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 瀏覽器以獲得完整的功能效果)。


洞見機會,創新未來──新創如何用雲端打出一手好牌:AWS Startup Day 7 月 15 日線上重磅回歸

AWS Startup Day 即將於 7 月 15 日重磅回歸,此次不只聚焦新創趨勢與數位應用,更聯合 AWS 創投新創媒合會,提供參與者豐富的資源,所有與新創生態系相關的夥伴都不容錯過。
評論
Photo Credit:AWS
評論

隨著 Web3.0 去中心化的趨勢開展與現在進行式的產業數位轉型浪潮,雲端技術早已成為許多早期新創發展產品或服務的關鍵金鑰,甚至為其奠定高速發展的穩健根基。而台灣雲端服務供應龍頭 AWS(亞馬遜網路服務公司)更自 Web2.0 時代開始就從未缺席,始終在技術新知、應用實務等方方面面致力支持新創,其中最具代表性的免費論壇活動──AWS Startup Day 也即將於今年 7 月 15 日重磅回歸,在線上和參與者相會!

今年度 AWS Startup Day 持續聚焦新創趨勢與數位應用,精心規劃八場新創專題演說,非常適合長期關注新創生態系統的相關人士,或是正要起步、成長的新創夥伴報名參加。

立即報名 2022 AWS Startup Day!

五大特色議程安排,給你滿滿新創觀點與技術乾貨

Photo Credit:AWS

「新創如何運用雲端科技打出一手好牌,投注資源延續未來業務?」這是今年 AWS Startup Day 欲探討的核心議題之一。為解答雲端科技之於新創企業的珍貴價值,AWS 以「國際市場」、「創投趨勢」、「多元創業」、「雲端技術」、「焦點產業」等五大特色精心規劃講座內容,完整收錄新創趨勢脈動、雲端技術實務、佈局策略觀點與創投媒合等新創事業歷程的重要節點。為此,AWS 不只力邀 Web3.0、電商、串流、B2B 解決方案等不同領域的新創合作夥伴,分享選擇 AWS 開展新創事業的策略考量,更毫不藏私地解析雲端技術如何快速又穩定的開拓事業。

Photo Credit:AWS

無論新創還是育成,想要洞見機會就不能錯過 AWS Startup Day

Photo Credit:AWS

任何產業或技術的發展,不單要前人的引領,也需要後繼者無窮盡的創新思維與打破框架的勇氣,缺乏其中一個環節,生態系都無法平衡永續。所以無論是天使創投、孵化器,還是剛起步或處於早期新創的企業,只要你身為新創生態系統中的一份子,渴望尋求創意突破或開展新興業務,AWS Startup Day 都是你絕對不能錯過的最佳活動。

填單取得 2022 AWS Startup Day 免費入場券!

尋找下一個新創獨角獸──同場加映 AWS 年度創投新創媒合會

本次 AWS Startup Day 除新創及創投相關講座外,AWS 更直接邀請多家國際及台灣知名創投公司,與 AWS Startup Day 同場舉辦今年度唯一的線上「新創創投媒合會」,欲透過串聯本地深具潛力的新創與創投,幫助台灣新創企業獲得更豐富的資源,孕育下一個獨角獸。

根據 AWS 釋出的消息,媒合會將以早期天使輪或 Pre-A 輪融資為主,重點關注 AI/ML工具和平台、智能零售、MarTech、Web3.0、媒體和娛樂等產業,並以快速輪流的形式替新創獲得最大的曝光。

立即報名 2022 AWS Startup Day,共構台灣新創生態系統!