iGarden – NSS ICT Education Blog

在這系列中，iGardener老師已介紹HTML5^W的圖解及簡介，不如今次講應用吧，幾年前我從外國的教育網誌^W見過製作文字雲(word cloud^W)的網站，例如Wordle，當時網站是使用Java^W技術，和只支援英文字，試過將iGarden的RSS^W輸入，得到下面的文字雲：

直到最近從本港博客石先生的blog看到這個「 HTML5 文字雲:文章詞彙分析機」，我也要試用。這文字雲系統採用 RSS Feed 閱讀機制，擷取iGarden blog近二十篇文章的內容作分析，效果如下：

我十分喜愛這文字雲，因為正中心剛好顯示iGardener老師最常用使用的字眼正是「教學」，其他如「學習」、「香港」、「Google」跟想像中的差不多，這文字雲顯示的其實與一個電腦科老師腦裡著緊的東西頗接近。

同學們也想試試嗎？

• Java英文版「文字雲」：Wordle
• HTML5中文版「文字雲」：HTML5 文字雲:文章詞彙分析機

最近iGardener老師開始在中三及中五ICT課程中，教導多媒體^W課題，參考維基百科^W的定義：

多媒體（Multimedia），在計算機系統中，組合兩種或兩種以上媒體的一種人機互動式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音 (包含音樂、語音旁白、特殊音效)、動畫和影片。

定義中著重多種媒體的揉合，只是iGardener老師不太同意只有電腦才能製作及展示到多媒體，此時腦裡記得很久很久前的一套經典1985年的MV，叫Take on me^W，它的特色是非電腦製作的多媒體動畫：

AHa – Take On Me from Eian Aldrich on Vimeo.

謝謝Youtube^W記錄了這些老餅影片，讓數碼一代見識到到這MV內的多媒體特技，是純使用光學剪接，不愧是iGardener老師至今印象最深刻的動畫MV之一。

這亦是ICT課程多媒體中動畫^W(animation)的完美教材，因為它包括以下與課程有關的元素及特點：

• 非電腦製作的經典多媒體動畫
• 影片以連續手繪素描組成
• 主角從手繪素描伸手到影片，是打破多媒體元素的視覺局限

iGardener老師最近與學生核對MC答案時，其中一題的答案指出，視訊^W／視頻^W(video^W)的播放是沒有互動^W性的，兆倫同學對此有點質疑，我便建議他舉出一個實例去支持他的論點，他就鍵入了Youtube^W的一套影片，叫「獵人與熊（A Hunter shoots A Bear）」：

這是iGardener老師見過互聯網史上最強的互動影片，充分利用互動的回饋，吸引用家不停輸入動詞，嘗試觀看相應的影片。

當獵人從螢幕伸手出來抓改錯帶時，有沒有嚇一跳，以為是經典鬼片貞子？

有注意到是什麼產品的廣告嗎？是的，是一家歐洲知名的塗改液、塗改帶公司（Tipp-Ex^W）的廣告。

用家把好玩的單字或片語輸入，便會產生不同的片段。

例如輸入moonwalk，主角便會學Michael Jackson的跳舞。

例如輸入give me five，主角便會拍掌。

廣告公司的創意是令人讚嘆的，怪不得從2010年8月影片上傳到YouTube^W網站至今，已突破1,470萬的瀏覽人次！

這是ICT課程多媒體互動影片的完美教材，因為它包括以下與課程有關的元素及特點：

• 影片以肢體動作為主，淺顯易懂
• 主角從影片伸手到右邊的圖像拿塗改帶，是打破多媒體元素的視覺局限
• 可輸入單詞變成動作，打破影片互動的有限性
• 廣告不受地區性侷限，因為選擇放在宇宙最強的YouTube影片上分享，善用互聯網的優勢，是傳統傳媒廣告所不能及的
• 善用盛行的Facebook、Twitter等web 2.0社群網站與微博推波助瀾之下，廣告效益之大，瞬間在全球各地擴散，令人大開眼界！

估一下廣告到底拍了多少段互動的影片？有甚麼動詞可用？答案在這裡找吧！

突然想到，英文科老師又可以用來做教材哩。

例如：

• box (google, see, watch, watch TV With)
• brush (clean, clear, wash)
• call (chat, contact, phone, talk to, telephone, hat)
• cook (barbeque, bbq, eat with, feed, picnic, stoned fries)
• cut (mow)
• dance (rock)
• eat (eat by, dig)
• fart (king, pass, rip
• fish (catch, get, hook)
• freeze (nothing)
• give me five (cost)
• jump (circus)
• kick (wrestle)
• kill (kill by, shoot)
• like (together, cuddle)
• love (hug, kiss, lick, marry)
• moonwalk (Michael Jackson)
• paint (draw)
• pee (beer, drunk, piss, ko, toast)
• picture (take a picture with, photo, film, propose to)
• play (joy, game, guessing game with, paper, use)
• ride (drive)
• rnb (rap, hip hop, break dance)
• shake (and, joke, laugh, lol, shake hands with, smile, trick)
• sing (song, crop, harp, music, opera, record)
• sleep (sleep with, nap)
• sport (ball, football, basketball, naked, roll, soccer)
• sweep (forest)
• tickle (touch)
• Tipp-Ex (erase, rewrite, write, white)
• wrestle (fight, kick, vs)

經過大半年的報導，HTML5^W似乎已經成為互聯網^W技術的常用名詞，在Google^W的支持以及開發者們的熱情追捧下，HTML5^W似乎已經成為了解決網站開發中任何問題的良藥。無論新高中ICT的課程的中學資訊及通訊科技科常用英漢及漢英辭彙是否包含這詞，同學們亦要認識它。

W3C^W（World-Wide Web Consortium，萬維網聯盟）在今年一月發表了HTML5^W的官方新Logo，並對這的網絡開發技術做出了新的解釋：

HTML5的八大技術特點：

[資料來源：cnbeta]

1. 語義學

作為HTML5的前端和中心，語義學能夠賦予框架結構以意義。更詳盡的標簽組合以及資源描述框架，微型數據和微型格式將為你和你的用戶打造一套數據驅動的網絡。

2. 本機存儲

在應用緩存，本機存儲，索引數據庫和文件應用程序接口的幫助下，HTML5應用甚至能在沒有網絡連接的情況下工作。

3. 設備訪問

地理定位只是一個開始，HTML5能夠讓應用程序訪問連結到你電腦上的任何設備。

4. 連結性

更有效率的連結性將能帶來更實時的聊天，更快的游戲速度以及更好的溝通交流。服務器與客戶端之間的網絡套接字和郵件攝像頭將比以往更加便捷。

5. 多媒體

音頻和視頻可是HTML5世界的一等公民，他們將與你的應用程序和網站和睦共處。燈光，攝影，開始!

6. 平面和三維效果

在SVG, Canvas, WebGL和CSS3 3D效果這些特性之間，你一定能找到讓你的用戶眼花繚亂，美不勝收的創意。

7. 性能和集成

使你的應用程序和網絡在大量諸如Web Workers和XML HttpRequest 2這樣的技術下更加快速。沒有人願意停下了等你跟進的。

8. CSS3

在不犧牲你的講義結構和性能的情況下，CSS3提供了大量的樣式效果和加強你的網絡應用。另外WOFF(Web Open Font Format)提供了前所未有的印刷靈活性控制。

新高中ICT的課程被人詬病的是沒有指定的HTML^W標籤，所以嚴格來講2012的考卷可以考HTML5^W的標籤，不要驚慌，只要我們與時並進，HTML5^W並不是不能克服，早前園丁已介紹圖解及簡介，不如今次講歷史吧，同學亦可藉此重溫HTML^W的標準是如何制定吧！

什麼是 HTML 5？

來源:  http://www.ithome.com.tw/itadm/article.php?c=60266

HTML 5 (HyperText Markup Language 5)是W3C^W協會推出的最新網頁格式標準，大幅增加多項網頁元素和控制器，強化對網頁應用的支援，如支援影音播放的Video標籤，繪圖專用的Canvas^W標籤等，已於2008年釋出草案，預定2010年完成功能制定。

Read the rest of this entry »

普遍學生對HTML5^W的了解，是蘋果公司^W喬布斯^W轟走Adobe Flash^W的網頁技術，最容易見到的例子是HTML5版的Youtube^W，課堂中介紹得太簡單，學生亦會以為它只是另一個影音插件。

園丁在外國的tweets中見到一個介紹HTML5^W的演示，本身亦是以HTML5^W作格式的，蠻有意思：

老師可在課堂中示範HTML5^W的威力。

我們的學生自少便被誤導「PowerPoint即是演示」，他們以為演示只是隨便複製一堆文字和插入一些罐頭clipart便成，但這幾年來Steve Jobs等科技猛人示範了何謂多媒體演示，以下就是一個頗全面的介紹：

新一代網頁標準HTML 5^W，成為網絡熱談，因為它不是一個品牌像Adobe Flash^W，ICT或夕陽CA可以在考卷直接引用”HTML 5^W“，現時仍未有任何教科書（包括長人出版社）提及這概念，故此園丁想在此列出HTML5的pros and cons（相對流行的動畫^W軟件 Adobe Flash^W）：