HTML5 Basic

HTML5 Basic http://MobileDev.TW HTML5 Basic [email protected] 1

HTML5 Basic http://MobileDev.TW 大綱 1. 簡介 2. 原則 3. 測試環境 4. 支援現況 5. 影音播放 6. 繪圖
7. 離線儲存 8. 表單相關 9. Geolocation 10. Drag&Drop 11. 離線網頁 12. Web Workers 2

HTML5 Basic http://MobileDev.TW 1. 簡介 HTML4.01 1999.12.24 XHTML1.0 2002.08.01 XHTML1.1
2008.07.29 XHTML2.0 ? W3C-XHTML2.0 WHATWG-Web Forms & Applicaions HTML5 –由W3C與WHATWG共同制定(2006起) 3

HTML5 Basic http://MobileDev.TW 4

HTML5 Basic http://MobileDev.TW 2.原則 1.  新的特色仍應以HTML,CSS,DOM,JavaScript為基礎 2.  減少外掛元件的需求(如Flash) 3.  增強錯誤處理能力
4.  透過標記語言來取代更多的Script 5.  語言與設備不相依 6.  公開制定進度 5

HTML5 Basic http://MobileDev.TW 3.測試環境 1.  主機＋虛擬機 •  Firefox •  Chrome
•  Opera •  Safari •  iOS Simulator •  MAC + iOS SDK •  Android Emulator •  Android SDK •  /tools/android指令開啓 2.  主機＋實機 •  無線網路 •  主機Web Server •  iPhone實機 •  iOS Safari •  Android實機 •  Android Browser 3.  Editor •  NotePad++ •  TextWrangler •  Aptana 6

HTML5 Basic http://MobileDev.TW 4.支援現況部分支援： ü Safari ü Chrome ü Firefox ü IE9 ü Opera
http://caniuse.com/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) 7

HTML5 Basic http://MobileDev.TW 5.影音播放 8

HTML5 Basic http://MobileDev.TW 5-1.影片播放Video Element 9 除了Opera Mini、IE8之外，通通都支援了！

HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-MP4/H.264 10 IE8、Opera/Opera Mini不行用

HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-WebM/VP8 11 Firefox、Chrome、Opera、Android OK

HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-Ogg/Theora 12 Firefox、Chrome、Opera OK

HTML5 Basic http://MobileDev.TW 5-1.影片播放語法： <video src="movie.mp4" width="320" height="240" controls="controls">
萬一不支援想顯示的訊息放這裡 </video> Source也可以獨立多寫幾個,萬一User的Browser讀不出來，可以Load 另外一個 <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> </video> 13

HTML5 Basic http://MobileDev.TW 5-1.影片播放 video可以用的屬性： •  autoplay：自動撥放 autoplay="autoplay" •  controls：顯示控制項
controls="controls" •  height, width：撥放器的寬高 •  loop：影片要不要循環撥放 •  preload：影片是否要在頁面載入時就下載，還是要等按下Play再load •  src：影片來源 14

HTML5 Basic http://MobileDev.TW 5-1.Lab播放影片 15

HTML5 Basic http://MobileDev.TW 5-2.音樂播放Audio Element 16 除了IE8、Opera Mini，其他都ＯＫ！

HTML5 Basic http://MobileDev.TW 5-2.音樂播放支援格式支援格式：格式 IE9 Firefox3.6+ Opera10.5+ Chrome3.0+
Safari3.0 Ogg Vorbis X O O O X MP3 O X X O O Wav X O O O O 17

HTML5 Basic http://MobileDev.TW 5-2.音樂播放語法： <audio src="song.ogg" controls="controls"></audio> Source也可以獨立多寫幾個,萬一User的Browser讀不出來，可以Load另外一個
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> </audio> 18

HTML5 Basic http://MobileDev.TW 5-2.音樂播放 audio可以用的屬性： •  autoplay：自動撥放 autoplay="autoplay" •  controls：顯示控制項
controls="controls" •  loop：音樂要不要循環撥放 •  preload：音樂是否要在頁面載入時就下載，還是要等按下Play再load •  src：音樂來源 19

HTML5 Basic http://MobileDev.TW 5-2.Lab 播放音樂 20

HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 21

HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 •  拿掉HTML tag中的controls屬性 •  用id取得元件後，可用src屬性取得檔案路徑與名稱 • 
在HTML中加入一顆按鈕，預設值為播放 •  按下播放按鈕時，判斷目前是否為暫停，是的話就呼叫播放方法，並更新按鈕文字為暫停 •  用video.paused是否為真來判斷 •  播放方法：video.play() •  若不是暫停狀態，就呼叫暫停方法，並更新按鈕文字為播放 •  暫停方法：video.pause() 22

HTML5 Basic http://MobileDev.TW 5-4.加上播放進度與音量控制項 23

HTML5 Basic http://MobileDev.TW 5-4.加上播放進度與音量控制項 •  在HTML中，增加進度與音量顯示區，以及兩顆按鈕(-/+) •  開始播放後，監聽timeupdate事件 •  video.currentTime：目前播放進度
•  video.duration：全長 •  Math.floor()取向下整數 •  按下+按鈕 •  透過video.volume取得目前音量 (介於0~1) •  若音量已經為1，不動作 •  若音量大於0.9，設定為1 •  其他狀況，音量加0.1 •  按下-按鈕 •  若音量已經為0，不動作 •  若音量小於0.1，設定為0 •  其他狀況，音量減0.1 •  用toFixed(2)將數值輸出為小數點後有2位數 24

HTML5 Basic http://MobileDev.TW 6.CANVAS 25

HTML5 Basic http://MobileDev.TW 6.繪圖 Canvas 使用JavaScript在網頁上畫圖定義出一個矩形，然後控制裡面的每一個pixel 首先要先建立一個Canvas元件 <canvas id="myCanvas"
width="200" height="100"></canvas> Canvas本身並沒有辦法畫圖，要透過JavaScript 26

HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 27

HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 <!DOCTYPE HTML> <html><body> <canvas id="myCanvas" width="200"
height="100" style="border:1px solid #c3c3c3;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); //使用id來找到Canvas元件 var cxt=c.getContext("2d"); //2d是HTML5內建Object,有許多可使用的方法，如畫路徑,箱子,圓圈, 文字,影像等等。 cxt.fillStyle="#00FF00"; //塗成綠色 cxt.fillRect(0,0,100,50); //在(0,0)~(100,50)畫一個矩形從(0,0)延伸畫一個寬100高50的矩形 </script> </body></html> 28

HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-1.畫線：一樣要取得id並宣告為2d之後： cxt.moveTo(10,10); //先移動到(10,10) cxt.lineTo(150,50); //劃線到(150,50)
cxt.lineTo(10,50); //再劃線到(10,50) cxt.stroke();//顯示 29 線的粗細可以用這個屬性來調： cxt.lineWidth=“5”;

HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-1-1.Lab：請畫出以下圖形 30

HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2.畫圓圈：一樣要取得id並宣告為2d之後： cxt.fillStyle="#FF0000"; //畫紅色的圓 cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true);　
cxt.closePath(); cxt.fill(); 1) 圓心座標X 2) 圓心座標Y 3) 半徑 4) 畫圓的起點 5) 畫圓的終點 6) 是否為逆時鐘方向 4,5：Math.PI/180*度數 31

HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-1.Lab：請畫出四分之一圓 32

HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-2.Lab：請畫出奧運圖形(藍、黑、紅、黃、綠) 33

HTML5 Basic http://MobileDev.TW 6-3.漸層塗上漸層背景 var grd=cxt.createLinearGradient(0,0,175,50); //決定從哪一個點到哪一個點進行漸層 grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#0000FF");
//產生由紅轉藍的漸層 cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); 34

HTML5 Basic http://MobileDev.TW 6-4.放圖片放圖片進去 var img=new Image(); img.src="picture.png"; cxt.drawImage(img,0,0);
//決定圖片從哪一個點開始放 cxt.drawImage(img,0,0,80,80); 前兩個參數決定開始放的點，後兩個參數可以縮放圖片大小，後兩個可省略 cxt.drawImage(img,0,0,170,343,0,0,100,100); 前面四個參數決定要剪下圖片的哪一個部分，接著兩個參數決定圖片從哪一個點開始放，最後兩個參數決定縮放 35

HTML5 Basic http://MobileDev.TW 6-4.放圖片 36 6-4-1Lab: 取出女生的頭

HTML5 Basic http://MobileDev.TW 6-4.放圖片 37 6-4-2Lab: 馬力歐向前衝

HTML5 Basic http://MobileDev.TW 7.離線儲存 38

HTML5 Basic http://MobileDev.TW 7-1.localStorage HTML5提供兩種方式進行離線儲存： localStorage : 資料存放無時間限制 7-1A：存放資料 <script
type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name: " + localStorage.lastname); </script> 7-1B：記錄到訪次數 <script type="text/javascript"> if (localStorage.pagecount) {localStorage.pagecount=Number(localStorage.pagecount) +1;} else {localStorage.pagecount=1;} document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> 39

HTML5 Basic http://MobileDev.TW 7-2.sessionStorage sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失範例一：存放資料 <script type="text/javascript">
sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> 範例二：計算訪客次數 <script type="text/javascript"> if (sessionStorage.pagecount) {sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;} else {sessionStorage.pagecount=1;} document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> 40

HTML5 Basic http://MobileDev.TW 8.表單相關 41

HTML5 Basic http://MobileDev.TW 8-1.email •  將input type設定為email •  送出表單前會先檢查是否為email格式 • 
iPhone上鍵盤會出現@ Firefox跳出警告 Chrome跳出警告 Opera跳出警告 42

HTML5 Basic http://MobileDev.TW 8-2.url •  將input type設定為url •  送出表單前會先檢查是否為網址格式 • 
iPhone上鍵盤會出現.com Firefox跳出警告 Chrome跳出警告 Opera不會跳出警告，但會幫你加上http:// 43

HTML5 Basic http://MobileDev.TW 8-3.number •  將input type設定為number •  可限定最小值min, 最大值max,
每次增加step Chrome 旁邊出現小小的上下按鈕 Opera 旁邊出現小小的上下按鈕但數字的大小沒顯示好 44

HTML5 Basic http://MobileDev.TW 8-4.range •  將input type設定為range •  可限定最小值min, 最大值max,
每次增加step Chrome 出現可愛的tuner (但是沒顯示數字!?) Opera也一樣 45

HTML5 Basic http://MobileDev.TW 8-5.date picker •  將input type設定為date Safari 可按上下改變日期
(要按到甚麼時候…) Opera 跳出日曆！還可以選今天！ 46

HTML5 Basic http://MobileDev.TW 8-6.color •  將input type設定為color Opera 可以選顏色！還可以按其它選更多的顏色！
Chrome 也有了！ 47

HTML5 Basic http://MobileDev.TW 8-7.Progress Bar <progress id="bar" value="10" max="100"> • 
可設定最大值max, 目前值value Firefox Chrome 48

HTML5 Basic http://MobileDev.TW 8-7.Progress Bar 49 8-7-1.Lab 工作清單結合進度狀態顯示提示透過CheckBox的
checked屬性，判斷是否為true，即可得知該選項是否被勾選了

HTML5 Basic http://MobileDev.TW 8-8.meter <meter id="myMeter" max="1500" min="0" value="500" low="150"
high="1350"></meter> •  可設定最大值max, 最小值,目前值value •  過大的警戒臨界值high,過小的警戒臨界值low Chrome Opera 50

HTML5 Basic http://MobileDev.TW 8-9.placeholder •  將input 增加placeholder屬性 Safari Firefox Opera
Chrome 51

HTML5 Basic http://MobileDev.TW 9.GEOLOCATION 52

HTML5 Basic http://MobileDev.TW 9-1.取得地理位置 •  建立一顆按鈕，按下去之後開始動作 •  確認是否有支援地理位置抓取 •  呼叫取得地理位置的方法
•  設定成功取得位置後要做的事情 •  設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition(succes sCallback, errorCallback); 53

HTML5 Basic http://MobileDev.TW 9-2.運用Google Map •  取得經度與緯度的值 •  組合出google map的連結
•  https://maps.google.com.tw/ •  ?q=latValue+","+lonValue 54

HTML5 Basic http://MobileDev.TW 9-2.運用Google Map 9-2-1.Lab 直接去Google Map 提示：改變目前視窗的網址 55

HTML5 Basic http://MobileDev.TW 9-3.不斷更新現在位置 •  改用navigator.geolocation.watchPosition •  可持續取得位置 •  不用時呼叫clearWatch
•  window.navigator.geolocation.clearWatch( wat chPositionObject ) 56

HTML5 Basic http://MobileDev.TW 10.DRAG&DROP 57

HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1. Ryan 2. David 3. John 1. 萊恩 2. 大衛 3. 約翰
58

HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •  準備一個純文字檔 •  在網頁中規劃一個div與一個textarea •  拖放的4個事件
•  dragenter：拖進該區域 •  dragleave：拖離該區域 •  dragover：停留在該區域 •  drop：放下 59

HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •  頁面載入時，即觀察這4個事件 •  拖進該區域時，區域變成紅色，並顯示Drop it! • 
拖離該區域時，恢復為藍色，文字為Come here. •  拖放於該區域時，取得該檔案，進行轉換 •  確認該檔案為文字檔 •  讀出內容，進行翻譯 •  翻譯完後，顯示於textarea 60

HTML5 Basic http://MobileDev.TW 10.Lab 餵食笑臉 61 蘋果毒蘋果

HTML5 Basic http://MobileDev.TW 11.離線網頁 62

HTML5 Basic http://MobileDev.TW Web App最害怕…..Offline 可連線時，將網頁儲存一份於快取中，離線時，就讀取這一份快取的檔案
63

HTML5 Basic http://MobileDev.TW Web Server 設定步驟 •  在Web Server上設置.htaccess，加上這一行： • 
AddType text/cache-manifest .manifest •  將Apache上的httpd.conf，修改： <Directory /> Options FollowSymLinks AllowOverride All </Directory> 64

HTML5 Basic http://MobileDev.TW 網頁設定步驟 •  建立一個 off-line.manifest檔案 CACHE MANIFEST #
Version:1.0 off-linePage.html off-lineJS.js •  off-linePage.html •  修改HTML tag為<html manifest="off-line.manifest"> 65

HTML5 Basic http://MobileDev.TW 如何更新快取 •  直接更新manifest檔案 •  用JavaScript applicationCache.update() • 
可監聽以下事件瞭解現況 •  checking：正在檢查更新或準備第一次下載manifest •  noupdate：manifest沒有變動時 •  downloading：正在下載manifest列出的檔案時 •  progress：相關檔案都下載好時 •  updateready：更新快取完畢，準備替換成最新的快取之前 66

HTML5 Basic http://MobileDev.TW 12.WEB WORKERS 67

HTML5 Basic http://MobileDev.TW Web Workers •  多執行緒進行運算 •  無法共享主執行緒變數 • 
無法直接變更window •  無法直接變更document •  傳送訊息回主執行緒 Main Thread New Thread make new thread passing messages passing messages 68

HTML5 Basic http://MobileDev.TW Web Workers •  避免瀏覽器當掉，停住於某一個龐雜的計算script •  使用Web Worker來計算2~1000000是否為質數
•  建立一個新的Web Worker來跑一隻JavaScript •  該檔案計算2~1000000是否為質數 •  過程中需將進度回傳給主執行緒 •  最後將結果也送回主執行緒 69

HTML5 Basic http://MobileDev.TW Web Workers •  建立新執行緒 •  從新執行緒傳遞資料給主執行緒 • 
主執行緒接收新執行緒的訊息 70

HTML5 Basic

HTML5 Basic

More Decks by Ryan Chung

Other Decks in Technology

Featured

Transcript