Lab Create Img using DOM

1. Open Nvu
2. Hand code a javascript that loads an image from Internet based on
the DOM model. You may use window.onload to load the image.
3. You may also use a button to load the image. Try how onclick works.

Hint: The javascript code should be enclosed by script tags.

Lab RSS Reader

1. Enter Google Reader

2. Try the following

• news.yam.com
• 中時電子報
• New York Times
• Taiwan

3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.

4. What kind of impacts to the portals such as yahoo and yam?

Homework 03/31/2006 sites that use google maps

Take a look at the following site:
HousingMaps
Google Maps Transparencies
Google Maps Nighttime!
Track visitors to your website
Google Map links for Unesco World Heritage Sites
Frappr

List another 5 ideas that you think would be useful. Why?

台灣資訊科技競爭力全球第七首度進入前十大

http://news.yam.com/cna/fn/200603/20060328407577.html

Lab AJAX in web personalization 網頁個人化

http://www.google.com/ig

4/7 校外學習週停課一次, 4/21期中考停課一次

3-17-2006 作業不完整, 重做

s9226253
s9226347
s9226160
s9226222

DOM (Document Object Model)

• Manipulate the elements of any document
  

1. The structure of the DOM exposes new powerful methods which allow you access and manipulate the elements of any document.

• JavaScript

1. This goes beyond DHTML and its tags; it's comprehensive control over every page element via JavaScript.

introduction

Defining Ajax

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.

Reference

Lab XSLT, Part 2

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results

use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.

3. View the formatted HTML file.

4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings

compute the team standings in a table.

5. View the formatted HTML file.

Lab CGI and Form, Part 2

Hand code a HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114

Use Form CGI that includes action, input, and submit.
Try a few different coordinates.

Homework 03/24/2006

1. Read page 188~193 of Text and then answer the problems 7, 8, and 9 on Page 195.
2. Find 3 more AJAX examples and provide the links. You have to look for websites other than Laszlo.

Lab Movie Player by AJAX

1. Go to Laszlo
2. Study and play around the "scripting" and "video" examples.
3. Use this script to control movie playing.
4. If you push the "pause" button, the movie pauses.
5. If you push the "resume" button, the movie resumes.

Why AJAX

• HTML is basically for hyperlinked documents and offers very limited interactions.
• AJAX brings desktop like interactions to the web and complements HTML in terms of graphic user interfaces.
• AJAX examples
  

http://www.housingmaps.com/

Laszlo

CGI Form

CGI
(page 188~193 of Text)

Lab Form and Action

"logic will get you from A to B - imagination will take you anywhere"

How to use Form to invoke a remote service through CGI.

1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.
2. Open your Nvu HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use Nvu to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
7. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?

Lab Drag-and-Drop by AJAX

1. Go to Laszlo
2. Study and play around the "drag-and-drop" example.
3. Use this method to control music playing of the song "Where to begin".
4. Add the song to the program.
5. Change the photo to the CD title.
6. If you drag and drop the photo to the "play" area, the music plays.
7. If you drap and drop the photo to the "pause" area, the music pauses.

3-17-2006 Homework Lab XSLT

Using Xray to transform this course's atom XML
into bulleted list of blog titles in HTML format.

Please show your XSLT code and the webpage result.

Lab XSLT

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

3. View the formatted HTML file.

Cookie

XML

Take a look at islandwide temperatures of Taiwan.

What happens if you just want Taoyuan's temperature?

If you want to include Taoyuan's temperature in your Theme
Park homepage, is there any solution?

XML examples:

• atom of Blog,

• Zip Code Web Service

• News Syndication

the need of XML

Separation of data from data processor

Seperation of data from presentation

• HTML for machine-human interaction

• XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.

Automation of data flow across various business systems

• XML for machine-machine interaction

• Without human involvement, automation of business systems can be accelerated.

What kind of language is XSLT?

• An XSLT style sheet is an XML document.
• The basic processing paradigm is pattern matching.

Operation of an XSLT Processor

Lab Google Mars

1. Observe how Google Mars loads the map and does the zooming. Is the data downloaded once
for all or retrieved on demand?

2. HTML alone cannot perform the functions of Google Mars. So find out which code in the HTML
source does the map things.

Hints: You may use Nvu to determine what HTML tags are for what.

3-10-2006 Work with HTML

Introduction to Hypertext, HTTP

HTML

Making webpage accessible

Lab Subscription with RSS

RSS is Really Simple Syndication.

1. Open Firefox
2. Enter Ctrl-B to activate Bookmark.
3. Go to http://news.yam.com
and look for the subscription button at the right of URL bar.
4. Make the subscription step by step.
5. Take a look at the Bookmark at your left. Open the Yam News and start browsing news pieces.

Lab Webpage Accessibility

Use Nvu to edit the following homepage
at http://maplepoem.blogspot.com/2005/03/blog-post_111070085865304732.html

1. You can copy and paste the content to your Nvu.

2. Take a look at the HTML 標籤, HTML 原始碼

3. Save your editings and preview your webpage using Firefox

4. Create a clickable link at the term 中原大學 so that
this link goes to http://www.cycu.edu.tw

5. Make the webpage accessible by
(1) adding ALT text to the images and
(2) adding a title to the URL link at Step 4.

6. Take a second look at the HTML 標籤, HTML 原始碼
Look for the differences you have made after doing Step 4 & Step 5.

7. Save your editings again and preview your webpage using Firefox

8. Download web accessibility validator Freego

9. Use Freego to examine whether your webpage is accessible.
須通過第一級機器檢測

Homework 3-3-2006

"tell me and I'll forget; show me and I may remember; involve me and I'll understand"

1. What is NAT (Network Address Translation) ? How does Skype overcome NAT and get connected with each other?

2. Explain scalability. What is the scalability design inside Skype?

3. Do the following 2 labs.

Lab Clean Language

Lab Tongwen

4. Reading Assignments:
Pages 181~194 of the Textbook.

Bring the Textbook to the class on 3-10-2006.
(下次上課請攜帶課本)

Cookie

Lab Accessibility by GreaseMonkey

1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more

2. Google Access Keys Enables navigation through Google search results using ALT-"," and ALT-".". more

3. AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window. Added 2005-04-01 (not a joke). Find how many access keys have been defined at www.ocac.gov.tw www.epa.gov.tw
4. Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.