多媒體演示創新系列(15) – HTML5文字雲:文章詞彙分析機

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

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

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

同學們也想試試嗎?

多媒體演示創新系列(11) – Old School MV “Take on me”

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

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

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

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

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

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

多媒體演示創新系列(10) – 經典互動式影片之獵人與熊(A Hunter shoots A Bear)

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

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

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

有注意到是什麼產品的廣告嗎?是的,是一家歐洲知名的塗改液、塗改帶公司(Tipp-ExW)的廣告。

用家把好玩的單字或片語輸入,便會產生不同的片段。
例如輸入moonwalk,主角便會學Michael Jackson的跳舞。
例如輸入give me five,主角便會拍掌。

廣告公司的創意是令人讚嘆的,怪不得從2010年8月影片上傳到YouTubeW網站至今,已突破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)

多媒體演示創新系列(9) – W3C推出HTML5的標誌

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

W3CW(World-Wide Web Consortium,萬維網聯盟)在今年一月發表了HTML5W的官方新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)提供了前所未有的印刷靈活性控制。

多媒體演示創新系列(8) – HTML5的由來

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

什麼是 HTML 5?

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

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

Continue reading 多媒體演示創新系列(8) – HTML5的由來