張凱迪(KD Chang)
台灣大學，主修經濟學，臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台，也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。
html5 的新玩意兒
現代化行動網頁設計基礎入門班 DAY 4
講師：張凱迪（KD.Chang）
Copyright © 2013 All rights reserved
提醒您鍵盤左右鍵可以移動投影片
Sorry, PPT is not suitable for Hackers : (
Outline
HTML5 回顧
網頁資料儲存 Local Storage
Canvas
Audio/Video
Geolocation
關於HTML5的那些小事
HTML5 回顧
HTML5主要目標
減少瀏覽器對於需要外掛程式，
使網路標準達到符合
當代的網路應用需求
http://www.atizo.com/docs/
廣義來說Html5包含CSS3 + js
http://www.virtualsciences.nl/
網頁資料儲存 Local Storage
cookies
Cookies是在HTML5之前最重要的本地端儲存機制，目前幾乎所有瀏覽器都支援Cookies，所以跨瀏覽器問題不大。平常我們在電子商務網站上購物時，購物車的資料儲存很多都是使用Cookies來實作
簡單來說，Cookies是一組資料值，格式為『name / value』
name=valueCOOKIES
新增Cookie值
var cook = 'home=Taiwan';document.cookie = cook;
存取Cookie值
當儲存組數大於一組時用分號加上空白作為分隔符號，可以使用JS 中split()方法分隔成陣列，再透過迴圈逐一存取
COOKIES
一般預設寫入的Cookie只能存活在目前的Session中，一旦關閉瀏覽器，Session結束，則儲存的資料即消失
如果想要延長Cookie存活時間，可以設定max-age值(以秒為單位)
var cook = 'home=Taiwan; max-age=100';判斷瀏覽器是否支援Cookie功能
navigator.cookieEnabled //回傳true or falseweb storage
事實上Cookie在實務上有很多的缺點，如存取不易
在HTML5後，我們可以使用Web Storage的方式進行實作，運用Window物件中的localStorage和sessionStorage可以更方便的在本地端儲存資料
WEB STORAGE
localStorage
係表示一個儲存在用戶端的永久資訊區塊，除非安全性因素或使用者的刪除、更新，不然資料將不會改變
sessionStorage
為一個暫時性儲存區域，其中資料以session為基礎，每一個session有其專屬的儲存區域，除了使用者的更動外，生命週期於seesion存在期間，亦即關掉瀏覽器後即消失
* 以上兩者除了生命週期的不同外，使用方法和觀念類似
存取 WEB STORAGE
Web Storage資料中以key/velue為資料格式儲存於Storage物件之中 ，以下的storage僅為代號，可以替代為localStorage或是sessionStorage
儲存資料方法 setItem()
storage.setItem(key, value);取得資料方法 getItem()
var item = storage.getItem(key);刪除資料 clear()
storage.clear();存取 WEB STORAGE
透過索引值存取資料 key()
var key = storage.key(index);var value = storage.getItem(key);
透過名稱存取
localStorage[key] = 'value';var values = localStorage[key];
file api
由於安全性問題，原本JS是不能讀寫檔案，但透過HTML5 的File API可以職員檔案的存取操作。然而由於安全性問題，檔案系統本身是封閉的，存取僅限於瀏覽器範圍，無法與瀏覽器範圍以外的環境進行溝通
亦可以搭配使用<input type="file">標籤和相關API讀取外部檔案內容，為回傳的File物件為一個陣列
FILE API
常用存取檔案特性
屬性：
name 檔案名稱
lastModifiedDate 最後修改日期
size 檔案大小
type 檔案型態
方法：
slice() 切割檔案區塊
按這看結果appcache
HTML5 提供離線儲存的機制，可以減輕伺服器端負擔
CACHE: 區段定義要本機儲存的資源
FALLBACK: 區段定義其他資源不可用時要使用的資源NETWORK: 區段指定網路連線時存取的資源
練習一(SAMPLE 4-1)
利用HTML5元素拖曳的特性和本地端儲存的功能，製作一重新整理後仍可以保留資料的便條紙
Hint : localStorage、draggable="true"(參考範例)
Canvas
canvas
canvas標籤支援繪圖功能
beginPath() 開始圖形線條描繪
closePath() 結束圖形線條描繪，並將其封閉
moveTo() 移至指定座標
lineTo() 從目前座標到指定座標畫一直線
rect() 畫一個矩形
stroke() 描繪圖形
fill() 描繪圖形，並用顏色填滿封閉區域
參考文件：用100行實現HTML5可存檔塗鴉版
練習二(SAMPLE 4-2)
運用HTML5 Canvas製作一黃色小鴨
audio / VIDEO
audio
使用瀏覽器內建的音效播放器，不用使用外掛
<audio controls><source src="music.mp3"><source src="music.ogg"></audio>
參考文件：HTML5 audio 實驗
VIDEO
使用瀏覽器內建的影音播放器，不用使用外掛
<video id="movie" preload controls loop poster="js.png" width="640" height="360"><source src="js.mp4" type="video/mp4" /><source src="js.ogv" type="video/ogg" /><source src="js.webm" type="video/web" />您的瀏覽器不支援HTML5影片播放標籤<video>格式喔！</video>
練習三(SAMPLE 4-3)
請試著使用HTML5 audio和video標籤在網頁中添加影音效果
geolacation
地理位置定位 (Geolocation)
Web Apps 若需要使用者的位置，可透過 Geolocation API 取得相關資訊。而基於隱私權的考量，這些 Web Apps 均必須取得使用者的許可之後，才能發佈位置資訊
navigator.geolocation.getCurrentPosition(success, error);//取出經緯度position.coords.latitude, position.coords.longitude
關於HTML5的那些小事
modernizr
http://modernizr.com/
can i use
http://caniuse.com/
q & a
HTML5 的新玩意兒
By 張凱迪(KD Chang)
HTML5 的新玩意兒
隨著智慧型裝置的起飛，現在幾乎已是人手一支智慧型手機，根據統計今年全球智慧型手機出貨量已達10億支，由於大量的需求，開發Mobile Web也成為原生（Native App）外另一種較低成本的選擇。因此本課程將著重在網頁開發基礎介紹以及如何運用HTML5/CSS3/JavaScript（jQuery）來開發Mobile Web App。希望讓沒有基礎（或有基礎）的學員能在學習完課程後具備自學能力未來能持續進修，進而開發出搭配Facebook API、Google Map API的Mobile Web App。 課程網站：http://kdchang.cc/mobile-web-dev/
