Static, Dynamic Webpages and Common Gateway Interface

CGI, Common Gateway Interface
(pages 41~46, 188~193 of Textbook)

static page
Ex:
http://www.google.com/

dynamic page
Ex:
http://www.cna.com.tw/

URL that sends a request by CGI
Ex:
http://maps.google.com/maps?q=24.9586,+121.2411

Homework 3-28-2008

1 根據無障礙網頁設計原則
，

• 為什麼不要開出新視窗?
• 為什麼要使用貼切的網頁標頭? 而不是留白?
• 定義快速鍵有什麼好處?

2. According to Section 2.1 of Textbook, some websites are powered by databases in the back end and some are not. What are the purposes of using databases?

3. Problem 1 & Problem 3 of Textbook on Page 55.

4. Reading Assignments:XML (Page 187-188 on the Textbook)

3-28-2008 缺課

9326361
9326312 (第二次點到)
9326229 (遲到)

三次未到，三振出局。

Lab 20: accessibility checker

1. Using A-Checker, Check the following 2 sites for accessibility.

• http://bloggercamp.blogspot.com/2007/01/2007.html
• the page you fix with ALT tags

2. Do you see any improvements on accessibility after you apply ALT tags?

ps:

A-Checker (version 0.8.6)

ATRC University Of Toronto, 1 January 2006
Description: Online accessibility checker that tests web pages for conformance to various accessibility guidelines.
Language: English, Italian
Guidelines: WCAG 1.0, Section 508, Stanca Act, BITV
Assistance: Generating Reports, Step-by-step evaluations
Automatic checking: Single pages, Restricted pages
Formats: HTML, XHTML
Online service: Online checker
Reports: HTML
License: Free Software, Open Source

Lab 19: Installing Mozilla/Firefox Accessibility Extension

Mozilla/Firefox Accessibility Extension (version 0.99.1.1851)

University of Illinois at Urbana/Champaign, 25 November 2005
Description: The Mozilla/Firefox Accessibility Extension adds features to Mozilla or Firefox to make it easier for people with disabilities to view and navigate web content based on the structural markup used to create the web page. The Mozilla/Firefox accessibility extension can be used directly by everyone to navigate the structure of a HTML web resource. It can be used by authors to check their structural markup to make sure it matches the actual content structure of the resource.
Language: English, Spanish
Guidelines: WCAG 1.0, Section 508
Assistance: In-page feedback, Page transformation
Formats: HTML, XHTML
Browser: Mozilla/Firefox
License: Free Software, Open Source

Lab 18: Webpage Accessibility

Use Nvu or Notepad to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.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. Make the webpage accessible by
adding ALT text to the images.

Lab 17: More on HTML

Headings
1. Copy and paste the Headings example at http://www.w3schools.com/html/html_primary.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?

Lists
4. Copy and paste the Headings example at http://www.w3schools.com/html/html_lists.asp
5. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
6. What kind of effects can you see?

Lab 16: HTML

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.

New editor
4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
5. Copy and paste the HTML example at Introduction to HTML
6. Verify your results on the screen.

Talk Outline: HTML & Accessibility

HTML

• Tutorial
  

Accessibility

• What is web accessibility?
• Accessible search engine
• Use accesskeys

Dive into Greasemonkey by Mark Pilgrim (free download)

Papers: Web 2.0 and Accessibility

Web 2.0: hype or happiness?
Mary Zajicek
Pages: 35 - 39
Full text available: Pdf(290 KB)

Enabling an accessible web 2.0
Becky Gibson
Pages: 1 - 6
Full text available: Pdf(344 KB)

WWW 2008

I will be attending WWW 2008, a premium Internet-themed conference. This year it is held in Beijing, China. The conference is in cooperation with ACM, IFIP, and W3C.

Lab 15: 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.

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.

Reference: Dive into Greasemonkey by Mark Pilgrim (free download)
http://dia.z6i.org/ (中文)

Homework 3-21-2008

1. Do Lab 15.

2. Check into the government-sponsored web accessibility website.

At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
presentation materials. What is web accessibility?

Lab 14: Tongwen

At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.

Lab 13: Clean Language

1. Save the JavaScript file of Clean Language to your desktop. Make changes to the script with self-defined bad words. To do this, save the JavaScript on your desk top. Use Notepad editor to make changes. Install the modified script as Greasemonkey.

2. Use Google to search webpages that contains some bad words.

3. Try whether the filtering take effects.

Lab 12: Greasemonkey

1. Install Greasemonkey 0.7. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the
   

2. Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?
   
3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
4. Install Web Developer Toolbar to examine cookies.

Talk outline: Browsers

Browsers (Textbook, pp. 57-58 )

• Business values
• architecture
  

Tools for Browsers

• JavaScript, client side language turning homepage documents into rich user experiences
• Cookie, what it is and how it works
• GreaseMonkey, post-processing the webpages for Firefox

Homework 3-14-2008

1. 參考 PageRank-Google 決定搜尋排名的關鍵技術
以及Google.com 網站的官方解釋，簡要說明PageRank原理。

2. Essay Writing on Google Docs

參考鳳凰城動物園遊記，撰寫一篇你自己的春日遊記。如果是多人出遊，請嘗試合寫的方式。(Teamwork editing)


3. 閱讀課本電子商務系統第一章，並做成三頁摘要。

ps. 這次我們要使用Google Docs來書寫，請參考Google Docs。

Lab 11: Web Pageranking

Lab Google PageRank

在Firefox上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/

接著，以PageRank量測你常用的三個網站。

參考資料:
PageRank 介紹
PageRank 的論文
Google 廣告獲利模式

Lab 10 Keep track of blogs

Use Technorati to measure the authority of blogs and show how many links the following blogs have.

Scobleizer http://scobleizer.wordpress.com/
Techcrunch http://www.techcrunch.com/
Engadget http://www.engadget.com/
Reflection http://www.chieftain.idv.tw
Java http://javaatcycu.blogspot.com
yours

Lab 9 Online teamwork editing

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document.
4. What's the URL of your document.
5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
6. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Homework 3-7-2008

1. 請閱讀數篇其他同學的部落格(上次作業第一題)，選擇其中三位同學在她(他)的部落格上，針對其散文給予評語或建議。

2. 關於你的散文作品，你得到多少篇回應? 其中多少贊同，多少異議，多少缺乏實質內容(灌水,你好帥之類)? 這些回應對你有幫助嗎?

3. 部落格是一種社會媒體，根據What is social media?ㄧ文，比較社會媒體與其他媒體之不同。

4. 網站提供 RSS 內容餵送(feed) 有何好處?

Lab 7: RSS

1. Enter Google Reader

2. Try the following

• iapblog.blogspot.com
• New York Times
• http://yourblog.blogspot.com/feeds/comments/default
  

3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.
(Hint: Examine Yam's RSS feed. Use IE to view original XML.)

Lab 8: Personal Portal

1. Enter
http://www.google.com/ig

The Google account is the same as your Blogger account.

2. Rearrange the templates. And perhaps remove blocks that you don't need.

3. Add new stuff. For now add the Google Reader, Google Docs, Google Group, Google Calendar, and GMail. You should be able to see the subscriptions in the Google Reader block of your personal portal.

HTTP & RSS

HTTP, Hypertext Transfer Protocol

http is based on request-response model. If you don't send requests, there will be no responses from any servers at all.

Limitations

If you have a lot of blogs and news groups to read frequently, the request-response behaviors will cost you time to examine each content source respectively. Unfortunately, you may check into websites that have no updates since you checked in last time.

RSS 2.0

RSS 2.0 is a syndication standard using XML. With RSS 2.0, you can subscribe to the source feeds in RSS 2.0 format. Many RSS 2.0 readers can keep an unread list for you, so that you always see the latest updates from the information sources you subscribe to.

Further Reading

pp. 183-185 of Textbook.