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=value

COOKIES


新增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 false

 web 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() 描繪圖形,並用顏色填滿封閉區域

練習二(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/

  • 2,724
Loading comments...

More from 張凱迪(KD Chang)