HTML5新手入門指南

HTML5的發展越來越邁向成熟,很多的應用已經逐漸出現在你我日常生活中了,不只讓傳統網站上的互動Flash逐漸的被HTML5的技術取代,更重要的是可以透過HTML5的技術來開發跨平台的手機軟體,讓許多開發者感到十分的興奮!
評論
評論

HTML5 的發展越來越邁向成熟,很多的應用已經逐漸出現在你我日常生活中了,不只讓傳統網站上的互動 Flash 逐漸的被 HTML5 的技術取代,更重要的是可以透過 HTML5 的技術來開發跨平台的手機軟體,讓許多開發者感到十分的興奮!

當你開始想要學習、試圖想要投入相關的開發時,由於 HTML5 的技術還在持續發展、進化當中,學習的資源也都比較零散,較難有一個整體的方向。在本篇文章中,筆者將會導覽 HTML5 的主要技術組成,並且提供一些學習資源讓大家參考。

HTML5 到底是什麼?

一般廣義而言的 HTML5 則包含了 HTML、CSS 和 JavaScript 三個部分,不單單只是 HTML 部分而已,CSS 3 和 JavaScript 也有許多的創新,讓整個網頁程式功能更加繽紛。

HTML5 的技術組成

離線功能

HTML5 透過 JavaScript 提供了數種不同的離線儲存功能,相對於傳統的 Cookie 而言有更好的彈性以及架構,並且可以儲存更多的內容。

  • WebStorage -- 比 Cookies 更大、更有彈性的的儲存
  • Web SQL Database -- 本地端的 SQL 資料庫
  • Indexed DB -- Key-value 的本地資料庫
  • Application Cache -- 將部分常用的網頁內容 cache 起來

即時通訊

以往網站由於 HTTP 協定以及瀏覽器的設計,即時的互動性相當的受限,只能使用一些技巧來「模擬」即時的通訊效果,但 HTML5 提供了完善的即時通訊支援。

  • WebSocket -- 即時的 socket 連線
  • Web Workers -- 以往 JavaScript 都是 single thread,透過 Worker 可以有多個運算
  • Notifications -- 原生的提示訊息,類似像 OS X 的 Growl 提示

檔案以及硬體支援

不知道大家有沒有發現,在 Gmail 等新的網頁程式當中,已經可以透過拖拉的方式將檔案作為郵件附件?這就是這部份 HTML5 檔案的功能中的 Drag'n Drop 和 File API。

  • Drag'n Drop -- HTML 元素的拖拉
  • File API -- 讀取使用者本機電腦的內容
  • Geolocation -- 地理定位
  • Device orientation -- 手持裝置的方向
  • Speech input -- 語音輸入

語意化

語意化的網路是可以讓電腦能夠更加理解網頁的內容,對於像是搜尋引擎的優化(SEO)或是推薦系統可以有很大的幫助。

  • New tags -- 新的標籤,像是<header>、<section> 等
  • Application tags -- 也是新的標籤,像是<meter>、<progress> 等
  • Microdata -- 加入語意的資料讓搜尋引擎等網站可以正確顯示
  • Form type -- <form> 可以加入的 type 便多了,包含 email 和 tel 等屬性,瀏覽器會協助進行資料格式的驗證

多媒體

Audio、Video 的標籤支援以及 Canvas 的功能應該是大家對於 HTML5 最熟悉的部份了,也是許多人認為 Flash 會被取代的主要原因。先前 Inside 有一些相關的技術展示可以參考(如何使用 HTML5 的影片播放?HTML5 火力展示!九個讓你驚奇的 HTML5 應用)。

  • Audio video -- 影片和音樂的原生播放支援
  • Canvas -- 2D 的繪圖功能支援
  • Canvas 3D -- 3D 的繪圖功能支援
  • SVG -- 向量圖支援

CSS 3

CSS3 支援了字體的嵌入、版面的排版,以及最令人印象深刻的動畫功能。

  • Selector -- 更有彈性的選擇器
  • Webfonts -- 嵌入式字體
  • Layout -- 多樣化的排版選擇
  • Stlying radius gradient shadow -- 圓角、漸層、陰影
  • Border background -- 邊框的背景支援
  • Transition -- 元件的移動效果
  • Transform -- 元件的變形效果
  • Animation -- 將移動和變形加入動畫支援

JavaScript

在比較 JavaScript 的基本面也新增了 DOM 的 API、和瀏覽器上下頁的紀錄修改。

  • DOM API -- 更方便的查詢 DOM 元件
  • History API -- 瀏覽器的上下頁內容修改,方便 AJAX 可以保留瀏覽記錄

現在就開始用 HTML5

截至目前而言,主流的網頁瀏覽器 Firefox 5、Chrome 12 和 Safari 5 都已經支援了許多的 HTML5 標準,而且目前最新版的 IE 9 也支援了許多 HTML5 標準,隨著使用者陸續升級到新版的瀏覽器,開發者應該在現在就可以著手開發!

而對於舊的瀏覽器相容性而言,先前 Inside 曾經撰文介紹過的 CSS3 Pie 便是一個讓舊版瀏覽器也能支援 CSS 3 功能的 JavaScript 函式庫。

Modernizer 也是一個相當重要的 JavaScript 函式庫,提供開發者輕鬆的方式判別目前使用者的瀏覽器是否有支援特定的 HTML5 功能。

學習的方向

在看完本篇文章之後,大家或許可以針對自己有興趣的方面透過關鍵字搜尋去尋找相關的學習資源以及內容。

Google 的 HTML5Rocks 網站 也是我相當推薦的,其中的透過 HTML5 開發的 HTML5 介紹投影片 更是值得一看,可以將上述的內容都實際試玩(推薦使用 Chrome 瀏覽器以獲得完整的功能效果)。


精準媒合,成為企業 100% 留用的 5G 新星

「大家最為關心的,就是人才缺口」經濟部工業局呂正華局長點出產業問題缺口,與資策會教研所、學界攜手合作,自去年起,已超過 600 名新星參與 5G 產業媒合。
評論
經濟部工業局呂正華局長洞察產業痛點,積極培養新興人才。 Photo Credit: 5G+ 產業新星揚帆啟航計畫團隊
評論

「大家最為關心的,就是人才缺口」經濟部工業局呂正華局長點出產業問題缺口,與資策會教研所、學界攜手合作,自去年起,已超過 600 名新星參與 5G 產業媒合。


第一次工業革命催生了現今的製造業,而 5G 將驅動世界又一次進化。 5G 網路具備超大頻寬、海量連結、超低延遲等特性,網速比 4G 快 10 倍以上,透過專網覆蓋,能承載各種需要龐大資料流量的智慧化服務,讓過去只存在於科幻小說中的場景有望逐一實現。

根據全球行動通信協會( GSMA )統計,至今( 2021 )年 6 月已有 69 個國家、 166 家電信廠商推出 5G 服務,顯見各國都強力聚焦發展 5G 通訊科技,預計 2025 年可達 18 億用戶規模。臺灣也於去年 2 月完成國內首波 5G 頻段競標,各大電信業者積極建設基地台,不落於美、日、韓等國之後。

雖然在疫情肆虐下不免打亂既有布局,但正因我們的食衣住行育樂都被迫數位化,反而讓 5G 在數位醫療、虛擬娛樂、擴增實境、加密裝置等跨領域的應用,因為需求而產生更多可能性。企業趁疫情之際加強練兵,加快轉型升級腳步,也需要更多新血加入。

首重跨領域 企業樂於從頭培養人才

經濟部工業局長呂正華表示,臺灣資通訊產業發展成熟,政府也全力扶植,「大家最為關心的,就是缺人才」。儘管商機潛力無窮,許多致力於商品化的企業都還是頻喊找不到人。

為此,工業局去年開始推動「 5G+ 產業新星揚帆啟航計畫」(以下簡稱 5G+  新星計畫),以「產業出題,人才實戰」模式媒合產學研發,目前已收穫相當成果;兩屆推動下來,已有上百家企業及大專校院參與,超過 600 名學生及應屆畢業生參與企業實戰活動。

呂正華說明,「產業出題,人才實戰」的專題都是企業在 5G 商用研發過程中實際遇到的問題,讓學生挑戰解題,為企業發展真正可用的解決方案,進而協助企業從內部「做中學」( OJT )培養切合需求的即戰力,目前參與計畫的企業對於學生留用意願達 100% ;因此「精準媒合,不管是對企業、對人才都能少掉很多碰撞和磨合,節省徵才和求職的成本。」

計畫不僅媒合企業資源,更辦理實戰工作坊,強化數位職能。Photo Credit:  5G+產業新星揚帆啟航計畫團隊
計畫不僅媒合企業資源,更辦理實戰工作坊,強化 5G 職能。Photo Credit:  5G+產業新星揚帆啟航計畫團隊

此外,呂正華也表示,因為 5G 應用是電機、機械、光電、材料等不同領域的結合,極需要跨領域的人才,企業很願意從頭培養,「所以態度比科系更重要」。

呂正華舉例,由交大資工系衍生之研發服務公司詮隼科技,曾面臨年薪 150 萬的職缺無人應徵的窘境,去年加入計畫,成功從內部培養出好幾位優秀人才,其中一位是中興大學中文系畢業的黃予璿,黃同學善用跨領域思考能力,在公司開發資安自動測試服務方面貢獻良多,文組與理組看似交集不多,可是只要有興趣,人人都能從 5G 行業中找到適合自己的工作。

電子五哥之一的仁寶電腦近年積極進行數位轉型,成立 5G 實驗室,鎖定智慧農業、智慧製造、健康醫療、雲端遊戲和終端設備等應用領域,並在去年透過 5G+ 新星計畫成功招募 19 位新血,藉由計畫的加值,培育人才並同步發展 5G 商業應用。

其中臺北教育大學玩具與遊戲設計所的研究生王凱瀚,過去從沒想過自己能加入科技業大公司,藉由計畫才有機會參與仁寶電腦的研發實戰。期間投入「 5G 邊緣運算技術智慧遊戲應用平台」研究,融合本身在數位內容和網頁設計的專業,進行雲端遊戲、虛擬實境解決方案與工具包的開發,最後獲得研發專題冠軍殊榮。

業師、培訓課程系統性帶領,加入 5G 創新研發

同時,「企業常反映學生在學校學的知識實際上沒辦法用,所以我們開的課要符合企業實戰需求。」呂正華說明, 5G+ 新星計畫也提供系統性的線上課程,特別引進諾基亞貝爾實驗室(Nokia Bell Labs)等 5G 專業培訓課程,並規劃包括天線、射頻、晶片封測、關鍵材料、小基站/無線接取、 SDN/ NFV(軟體定義網路/網路虛擬化)等 6 大領域職能地圖。仁寶電腦、雲達科技、亞旭電腦等企業都將其納入內部教育訓練規劃,也採用 5G JUMP 的線上課程強化員工 5G 職能。

計畫也與交大產業加速器( IAPS )、臺科大育成中心等機構合作培育創新應用師資,以帶領新創公司加速 5G 應用服務的開發,目前已成功培育 23 名業師顧問並輔導 12 組新創團隊,更有 2 家新創公司從去年接受輔導的角色,到今年成功商轉並擔任計畫的出題企業,形成正向循環。

呂正華說,5G 跨域應用是非走不可的路,臺灣已擁有完整 5G 生態系的基礎能量,涵蓋半導體、電子零組件、伺服器、網通與終端設備等產業,馬步紮得穩、紮得深,可在國際競爭中站穩腳步。 5G 新星計畫將作為產學培育人才的溝通橋樑,期待未來培養出更多生力軍,加速臺灣邁入 5G 紀元的步伐。

經濟部工業局 廣告