HTML5 Basic

HTML 5 Basic 鐘祥仁 Ryan ryan@iii.org.twHTML5 Basic 1 http://MobileDev.TW

大綱1.  簡介 9.  Geolocation2.  原則 10. Drag&Drop3.  測試環境 11. 離線網頁4.  支援現況 12. Web Workers5.  影音播放 13. Web Socket6.  繪圖7.  離線儲存8.  表單相關 HTML5 Basic 2 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 & ApplicaionsHTML5 –由W3C與WHATWG共同制定(2006起) HTML5 Basic 3 http://MobileDev.TW

HTML5 Basic 4 http://MobileDev.TW

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

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

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

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

5-1.影片播放適用格式：Ogg, MPEG4(H.264+AAC),WebM瀏覽器支援狀況：格式 IE Firefox Opera Chrome Safari Ogg X 3.5+ 10.5+ 5.0+ XMPEG4 9.0+ X X 5.0+ 3.0+WebM X 4.0+ 10.6+ 6.0+ X HTML5 Basic 9 http://MobileDev.TW

5-1.影片播放語法：<video src="movie.ogg" 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> HTML5 Basic 10 http://MobileDev.TW

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

5-2.音樂播放支援格式：格式 IE9 Firefox3.5+ Opera10.5+ Chrome3.0+ Safari3.0 Ogg X O O O XVorbisMP3 O X X O O Wav X O O O O HTML5 Basic 12 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> HTML5 Basic 13 http://MobileDev.TW

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

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

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

6.繪圖Canvas使用JavaScript在網頁上畫圖定義出一個矩形，然後控制裡面的每一個pixel首先要先建立一個Canvas元件<canvas id="myCanvas" width="200" height="100"></canvas>Canvas本身並沒有辦法畫圖，要透過JavaScript HTML5 Basic 18 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)畫一個矩形</script></body></html> HTML5 Basic 19 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();//顯示 1) 圓心座標X 2) 圓心座標Y6-2-2.畫圓圈：一樣要取得id並宣告為2d之後： 3) 半徑cxt.fillStyle="#FF0000"; //畫紅色的圓 4) 畫圓的起點cxt.beginPath(); 5) 畫圓的終點cxt.arc(70,18,15,0,Math.PI*2,true);　 6) 是否為逆時鐘方向cxt.closePath();cxt.fill(); 4,5：Math.PI/180*度數 HTML5 Basic 20 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); HTML5 Basic 21 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); 前面四個參數決定要剪下圖片的哪一個部分，接著兩個參數決定圖片從哪一個點開始放，最後兩個參數決定縮放 HTML5 Basic 22 http://MobileDev.TW

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

7-1.localStorageHTML5提供兩種方式進行離線儲存：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> HTML5 Basic 24 http://MobileDev.TW

7-2.sessionStoragesessionStorage : 將資料存在一個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> HTML5 Basic 25 http://MobileDev.TW

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

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

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

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

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

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

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

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

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

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

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

9-2.運用Google Map•  取得經度與緯度的值•  組合出google map的連結 •  http://maps.google.com/ •  ?q=latValue+","+lonValue•  點下連結iPhone會開啓內建地圖程式 HTML5 Basic 38 http://MobileDev.TW

9-3.不斷更新現在位置•  使用navigator.geolocation.watchPosition•  持續取得位置•  成功取得位置的經緯度，用在地圖連結•  同時輸出現在時間，確認持續更新 HTML5 Basic 39 http://MobileDev.TW

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

拖拉翻譯器1. Ryan2. David3. John 1. 萊恩 2. 大衛 3. 約翰 HTML5 Basic 41 http://MobileDev.TW

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

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

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

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

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

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

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

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

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

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

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

13.WEB SOCKET HTML5 Basic 53 http://MobileDev.TW

Web Socket Request Response Web SocketHTML5 Basic 54 http://MobileDev.TW

Web Socket 聊天室•  client A 開啓一特定網頁•  建立web socket連線•  client B也開啓同一特定網頁，建立socket連線•  client A傳遞訊息， server接收後，廣播給所有client•  client B收到訊息，傳遞回覆訊息，server接受後，廣播給所有client HTML5 Basic 55 http://MobileDev.TW

Web Socket - Chat Room•  在Web Server根目錄建立一個資料夾testWebSocket•  放入相關檔案•  在命令列中執行php server.php•  修改client.html中的host變數 •  ws://localhost:12345/testWebSocket/server.php•  將php.ini中的socket extension打開 •  extension=php_sockets.dll HTML5 Basic 56 http://MobileDev.TW

Web Socket語法•  建立socket 連線•  socket相關事件 •  連線建立：socket.onopen •  接收訊息：socket.onmessage •  關閉連線：socket.onclose•  socket相關方法 •  傳送訊息：socket.send() •  關閉連線：socket.close() HTML5 Basic 57 http://MobileDev.TW

HTML5 Basic

by Ryan Chung on Feb 08, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

HTML5 Basic — Presentation Transcript