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 文字雲:文章詞彙分析機

學生在選修單元C「多媒體製作及網站建構」中，需要學習使用網頁編輯器，編寫多媒體網站，在學校多數會用Adobe^W的Dreamweaver^W，但學生在家或在外，很難找到合法的軟件。

所以iGardener老師找到一個不錯的網頁編輯器，並安裝在iGarden的網頁伺服器中，讓各位老師和同學生可以穩定地使用，我認為檢視HTML原始碼是最有用的功能。

有興趣可以按此連結或加入書籤：http://www.i-garden.org/htmledit

或可直接在以下的嵌入版試用：

學生在ICT課程的選修單元C「多媒體製作及網站建構」中，需要學習多媒體^W的元素－動畫^W(animation)，所以iGardener老師為大家推介「彼思動畫25年」展覽，知道早前台灣已經舉辦類似展覽，終於等到香港也有，真心要讚香港政府的眼光！展期由2011年3月28日至2011年7月11日，ICT師生們切勿錯過。

有興趣可以按此連結：
http://www.heritagemuseum.gov.hk/chi/exhibitions/exhibition_details.aspx?exid=158

或可直接閱讀簡介：

彼思動畫製作室創作的動畫人物，如《反斗奇兵》中的童玩胡迪、巴斯光年；《怪獸公司》中的毛毛和小女孩；《海底奇兵》中的小丑魚父子；以及《超人特工隊》中的超能家庭等，深受大朋友和小朋友歡迎。在創意無限的電腦動畫世界裡，彼思創作一個個扣人心弦的動畫故事，引來陣陣歡樂笑聲的同時，更讓觀眾體驗充滿動感的視覺享受。

「彼思動畫25年」是香港文化博物館2011年的大型重點展覽，透視彼思動畫製作室在構思電腦動畫過程中激發的靈感與想像，讓觀眾從藝術角度了解製作室深受大眾喜愛的動畫作品。超過400件展品結集彼思藝術家們的創作成果，包括以不同媒介繪畫的原稿、雕塑、早期動畫短片和特別製作的多媒體裝置等。繼美國加州的巡迴展後，備受歡迎的「彼思動畫25年」經重新組織整理在香港作全球首展，部份展品更從未曝光，一饗喜愛動畫的本地觀眾。

亞洲電視的經典節目不多，歷年以來，最叫人「難忘」的電視節目，非《魚樂無窮》莫屬，在深夜時段「直播」魚缸中的大小魚兒活動，不停播放魚缸影像就可以當「電視節目」，是窮出來的創意。

當年小兒Matthew仍是嬰孩的時候，每逢發燒不能入睡，多少晚上爸媽便與他一起看《魚樂無窮》。今天魚樂無窮回歸之時，兒子已是一個比自己高的中學生了！所以iGardener對這經典「電視節目」有特別的感情，2011年2月初起身，喜見亞視的《魚樂無窮》在早上 7:30am 復播了！

看看當年「聞名經典」的《魚樂無窮》Youtube吧：

強勢回歸的新版本《魚樂無窮》改用了數碼標清及採用 16:9 的比例播放，畫質比以前更清晰，比較下，同學可學習視頻的特性：

• 模擬(analog)->數碼(digital)
• 比例：4:3->16:9

同學別說它無聊，其實很多觀眾都愛看和懷念此「節目」的！

最近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的威力。