2014年5月26日 星期一

Lab 34 Syndication with RSS 2.0

1. 進入你的部落格,登入,選擇設計
2. 新增小工具
3. 選取
資 訊提供
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)
==============================


Lab 33 XML (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.
(archive)

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.

=============================================

<META http-equiv="Content-Type" content="text/html">
<title>
        Results of Group A</title></head>
<body><h1>
        Results of Group A</h1>
<h2>Brazil versus Scotland</h2>
<p>Played on 10-Jun-1998</p>
<p>Result:
            Brazil2,
            Scotland1</p>
<h2>Morocco versus Norway</h2>
<p>Played on 10-Jun-1998</p>
<p>Result:
            Morocco2,
            Norway2</p>
<h2>Scotland versus Norway</h2>
<p>Played on 16-Jun-1998</p>
<p>Result:
            Scotland1,
            Norway1</p>
<h2>Brazil versus Morocco</h2>
<p>Played on 16-Jun-1998</p>
<p>Result:
            Brazil3,
            Morocco0</p>
<h2>Brazil versus Norway</h2>
<p>Played on 23-Jun-1998</p>
<p>Result:
            Brazil1,
            Norway2</p>
<h2>Scotland versus Morocco</h2>
<p>Played on 23-Jun-1998</p>
<p>Result:
            Scotland0,
            Morocco3</p>


















==========================
<h1>Results of Group A</h1>
<table cellpadding="5">
<tr>
<td>Team</td>
<td>Played</td>
<td>Won</td>
<td>Drawn</td>
<td>Lost</td>
<td>For</td>
<td>Against</td>
</tr>
<tr>
<td>Brazil</td>
<td>3</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>6</td>
<td>3</td>
</tr>
<tr>
<td>Scotland</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Morocco</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Norway</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>5</td>
<td>4</td>
</tr>
</table>

Lab32 XML

1. Register and Download Xray, an XML, XSLT editor and processor.
(安裝X-Ray需要權限)

(助教碎碎念:若無法順利安裝再點我)

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.

========================================

2014年5月19日 星期一

Lab 31 Making images accessible

1. Study what an ALT tag is.
2. Use Notepad++ to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html

You can copy and paste the content to your Notepad++.

3. Save your editings and preview your webpage.

4. Make the webpage accessible by
adding ALT text to the images.

5. Check whether you can see the ALT text for the images by moving the mouse over the image.

===================================


Lab 30 視障者使用網頁的需求

參考視障者瀏覽網頁的需求,請至少針對五類需求(例如:選定你的語言),每類舉出一個網頁實例(台灣或國外皆可),並列出該網頁關鍵HTML片段,證明該網頁的確符合視障者需求。

相關新聞報導 爭資訊與文化平權 上千身障者上街(自由時報12.1.2013)

==========================
1.不要開出新視窗:
Language Translation | Translate Free Online
http://ft.folk-dance.idv.tw/
關鍵HTML片段: 網頁原始碼找不到 <a target="_blank">

2.提供能取代圖片的文字:
Google首頁 https://www.google.com.tw/
關鍵HTML片段:<img id=gbi4i width=24 height=24 onerror="window.gbar&&gbar.pge?gbar.pge():this.loadError=1;" src="//lh3.googleusercontent.com/-SEMjByYxK4Q/AAAAAAAAAAI/AAAAAAAAAAA/7rWJZPJe8-I/s24-c/photo.jpg" alt="羅世雄">

3.定義快速鍵:
新竹市消防局 http://www.hcfd.gov.tw/access.asp#
關鍵HTML片段:<a href="#" AccessKey="L" title="左方主選單區" class="key-L">:::</a>

4.:在連結上加入標題
中國廣播公司 http://www.bcc.com.tw/
關鍵HTML片段:<a href='adv2_count.asp?nid=1' target="_blank" title="幸福好時光">幸福好時光</a>

5.有意義的網路標題:
維基百科 http://zh.wikipedia.org/wiki/Microsoft_FrontPage
關鍵HTML片段:<span class="toctext">簡介</span>

Lab 29 Using PageRank

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

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/

接著,以PageRank量測你常用的三個網站,
並留下至少八張有做此LAB的紀錄。

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文

========================================
1.紐約時報 http://www.nytimes.com
PageRank:9

2.CNN http://www.cnn.com/
PageRank:9

3.台灣雅虎 http://tw.yahoo.com
PageRank:8

4.蕃薯藤 http://www.yam.com
PageRank:6

5.PCHome 購物 http://shopping.pchome.com.tw/
PageRank:5

[我常用的三個網站]:
1.巴哈姆特電玩資訊站 http://www.gamer.com.tw/
PageRank:6

2.卡提諾論壇 http://ck101.com/
PageRank:4

3.Facebook https://www.facebook.com/
PageRank:9

2014年5月12日 星期一

Lab 28 Design your business card

1. Refer to the div example Try it yourself
2. Design your business card. You can choose your colors, fonts, styles.

=================================

<!DOCTYPE html>
<html>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #AAF72A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#FFF007"></div>

<h3>9926167 電子四甲 羅世雄</h3>

<div style="letter-spacing:15px;">TV電玩遊戲熱愛者</div>

<div style="color:#40B3DF;">專長興趣
<span style="background-color:#B4009E;color:#ffffff;">打電動交友</span>
</div>

<div style="color:#DD0077;">Facebook: shongle lo</div>

</div>

</body>
</html>