More on W6 Labs

To summarize what is happening during the labs and how XML DOM works with javascript:
1. Loading XML documents by XMLHttpRequest() or by ActiveXObject("Microsoft.XMLHTTP") with a few supporting operations (that we will learn in detail when we get to Ajax) sends the request to the server and gets the xml file (if you are trying to get an xml file).
2. The main focus of this week is in what you can do with this xml file using JavaScript and XML DOM. Here important to understand that JavaScript works on the client and whatever it does – will not change the original xml file on the server. It changes only the file loaded into RAM for further processing and presentation. Here JavaScript and XML DOM can allow you to modify the received document and change its presentation in any way you want.

W6 XML Labs additional info

I noticed that W3Schools site doesn't clearly state in large print that you should run loadxml() function and all your examples on any web server but NOT ON YOUR LOCAL FILE SYSTEM by just clicking on the html file. For example, you can use Web server from phobos by uploading all necessary files (your html file, xml file, and js file with loadxml()) there and running them from the phobos-based location.

Approach to your term project development

Read here about Agile approach to your term project development efforts that you are learning in addition to various technologies.

More About Project

As I described in the tasks, your site (AT THE END) should have all your programming technologies that you will be learning in some form. But… this will be achieved gradually, by adding new elements with these technologies to your site. At this point, having a front page from any free template site (like the one I showed in W5tasks) and tweaking its content will satisfy week 5 tasks. Do not worry about what is on the Project site now. Just choose the Project concept and what it will be about (some form of e-commerce may be will be easier to fit). You will be more closely working with the site in the following weeks using special Project tasks that will be telling you what elements should be added to your site.

For example, the next week you will have to add at least one of the pages connected to the front page menus that uses embedded and external CSS files (or show how you tweak the css file that came with the template site). Then you will have to show some use of javascript on at least one of the connected to the menu pages (could be the same that shows CSS use). And then in a similar fashion you will be adding technologies learned in the following week. Do not try to design it all now. It will be a dynamically growing project along with your learning of the new material (this is a modern way of designing complex web systems). The requirements/tasks of what technologies should be added to your site (in any from you will choose) will be given each week.

For those who do AWD and TEB projects together – do not try to integrate both parts too tight. It is more work (but, of course, more elaborate integration will be worth more). Best is keeping them separately as supporting resources for each other and simplify the integration like having a menu link from ASP page to the page sitting on the TEB site and vice versa. The user shouldn’t care where the pages are coming from as long as links work. All the code should also work when called from proper pages and the visual presentation of pages should relate to the same Project topic and preferably using similar style. Then it will look like really One Project. But, of course, you might choose to do the same Project Idea as two different sites (for AWD and for TEB) with two different types of technologies (and this might be not that much more work too, and may be even easier to implement).

But, again, my advice is to keep the development, AT THIS point, separately in terms of technologies and just watch for the content and functionality supplementing each other to be used for cross-references later. For example, you will learn Master Pages in ASP.NET, that will do similar stuff as template pages in TEB. These should be kept separately to show that you can use both methods.

You will learn down the road that the site/page that you use on your screen could actually be a bunch of pieces coming from different places and updating themselves at different times, but… this is later not to overwhelm you now. 

Template Task

There are a number of sites with free page design like http://www.oswd.org A visually good design requires serious practice and often art background. But you can use free designs by modifying them to your liking. For example, when you go to http://www.oswd.org do the following steps:
1. Find a good front page design applicable for your project.
2. Download it to your computer using the link in the upper-left side of the page that you found
3. Explore the files in the downloaded collection. Some have just an html file with all the css being embedded into it and also with an additional folder containing art. Some have an external CSS file and the link to it from the html page.
4. Explore the art, substitute the text for your text, and most importantly instead of the "#" symbols in the menu links put url addresses of your own pages. Of course, will be even nicer if you will maintain the top part of the page with logo and links on some of your pages for consistent look, but is not required for the task completion. Just modify the front page to match your business and connect at least a couple of your own pages to its menu. See how CSS relates to HTML elements. If you connect an external CSS file to any page of your and retain the names of HMTL elements that CSS refers to - those styles will be reused on your pages.

This is a good exercise in making your previous learning of HTML and CSS more reality connected.

XML, etc.

Based on the analysis of current students' backgrounds in your Student info posts, skills, and computing environments the plan for the rest of the semester is as following:

This week you will deal with XML as a basis for many Web communication methods and protocols which together with refreshed HTML creates the foundation of the main information formats pushed over HTTP. After that we get into CSS styling to see how they can be applied to HTML and XML allowing to separate Web design aspects (pretty looks) from Web development (basic functionality) to let different people/departments handle these issues separately.

After that we get into JavaScript to learn popular client-side development technologies and how JavaScript can be applied to XML and HTML documents. The following subject will be Ajax where you find out how the previously learned technologies can be enhanced by more advanced client-server interactions where a page will be seen not as a document but a number of rather independent action parts with each allowed to communicate with servers whenever the situation calls for it without complete page reloading or other parts' participation.

Later we move to the server side of the development learning PHP and MySQL that can not only enhance the power of asynchronous communications of AJAX but give you the full spectrum of development tools including both client- and server-side.

W2 HTML Problems

Please see the HTML Deprecation post regarding some img control problems.