Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Basic

6,334 views

Published on

Published in: Technology, Design
  • Be the first to comment

HTML5 Basic

  1. 1. HTML5 Basic http://MobileDev.TW HTML5 Basic Ryan@MobileDev.TW 1
  2. 2. HTML5 Basic http://MobileDev.TW 大綱 1.  簡介 2.  原則 3.  測試環境 4.  支援現況 5.  影音播放 6.  繪圖 7.  表單相關 8.  Geolocation 9.  DragDrop 10. 離線網頁 11. Web Workers 2
  3. 3. 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
  4. 4. HTML5 Basic http://MobileDev.TW4
  5. 5. HTML5 Basic http://MobileDev.TW 2.原則 1.  新的特色仍應以HTML,CSS,DOM,JavaScript為基礎 2.  減少外掛元件的需求(如Flash) 3.  增強錯誤處理能力 4.  透過標記語言來取代更多的Script 5.  語言與設備不相依 6.  公開制定進度 5
  6. 6. 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 •  Aptana •  Sublime Text 6
  7. 7. 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
  8. 8. HTML5 Basic http://MobileDev.TW 5.影音播放 8
  9. 9. HTML5 Basic http://MobileDev.TW 5-1.影片播放Video Element 9 除了Opera Mini、IE8之外,通通都支援了!
  10. 10. HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-MP4/H.264 10 IE8、Opera/Opera Mini不行用
  11. 11. HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-WebM/VP8 11 Firefox、Chrome、Opera、Android OK
  12. 12. HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-Ogg/Theora 12 Firefox、Chrome、Opera OK
  13. 13. 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
  14. 14. HTML5 Basic http://MobileDev.TW 5-1.影片播放 video可以用的屬性: •  autoplay:自動撥放 autoplay=autoplay •  controls:顯示控制項 controls=controls •  height, width:撥放器的寬高 •  loop:影片要不要循環撥放 •  preload:影片是否要在頁面載入時就下載,還是要 等按下Play再load •  src:影片來源 14
  15. 15. HTML5 Basic http://MobileDev.TW 5-1.Lab播放影片 15
  16. 16. HTML5 Basic http://MobileDev.TW 5-2.音樂播放Audio Element 16 除了IE8、Opera Mini,其他都OK!
  17. 17. 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
  18. 18. 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
  19. 19. HTML5 Basic http://MobileDev.TW 5-2.音樂播放 audio可以用的屬性: •  autoplay:自動撥放 autoplay=autoplay •  controls:顯示控制項 controls=controls •  loop:音樂要不要循環撥放 •  preload:音樂是否要在頁面載入時就下載,還是要等按 下Play再load •  src:音樂來源 19
  20. 20. HTML5 Basic http://MobileDev.TW 5-2.Lab 播放音樂 20
  21. 21. HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 21
  22. 22. HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 •  拿掉HTML tag中的controls屬性 •  用id取得元件後,可用src屬性取得檔案路徑與名稱 •  在HTML中加入一顆按鈕,預設值為播放 •  按下播放按鈕時,判斷目前是否為暫停,是的話就呼叫 播放方法,並更新按鈕文字為暫停 •  用video.paused是否為真來判斷 •  播放方法:video.play() •  若不是暫停狀態,就呼叫暫停方法,並更新按鈕文字為 播放 •  暫停方法:video.pause() 22
  23. 23. HTML5 Basic http://MobileDev.TW 5-4.加上播放進度與音量控制項 23
  24. 24. 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
  25. 25. HTML5 Basic http://MobileDev.TW 6.CANVAS 25
  26. 26. HTML5 Basic http://MobileDev.TW 6.繪圖 Canvas 使用JavaScript在網頁上畫圖 定義出一個矩形,然後控制裡面的每一個pixel 首先要先建立一個Canvas元件 canvas id=myCanvas width=200 height=100/canvas Canvas本身並沒有辦法畫圖,要透過JavaScript 26
  27. 27. HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 27
  28. 28. HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 !DOCTYPE HTML html head/head body canvas id=myCanvas width=200 height=100 style=border:1px solid #c3c3c3;/canvas script 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
  29. 29. 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”;
  30. 30. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-1-1.Lab: 請畫出以下圖形 30
  31. 31. 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
  32. 32. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-1.Lab: 請畫出四分之一圓 32
  33. 33. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-2.Lab: 請畫出奧運圖形(藍、黑、紅、黃、綠) 33
  34. 34. 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
  35. 35. 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
  36. 36. HTML5 Basic http://MobileDev.TW 6-4.放圖片 36 6-4-1Lab: 取出女生的頭
  37. 37. HTML5 Basic http://MobileDev.TW 6-4.放圖片 37 6-4-2Lab:馬力歐向前衝 任務一: 按按鈕會前進 任務二: 用鍵盤控制
  38. 38. HTML5 Basic http://MobileDev.TW 7.表單相關 38
  39. 39. HTML5 Basic http://MobileDev.TW 1.email •  將input type設定為email •  送出表單前會先檢查是否為email格式 •  iPhone上鍵盤會出現@ Firefox跳出警告 Chrome跳出警告 Opera跳出警告 39
  40. 40. HTML5 Basic http://MobileDev.TW 2.url •  將input type設定為url •  送出表單前會先檢查是否為網址格式 •  iPhone上鍵盤會出現.com Firefox跳出警告 Chrome跳出警告 Opera跳出警告 40
  41. 41. HTML5 Basic http://MobileDev.TW 3.number •  將input type設定為number •  可限定最小值min, 最大值max, 每次增加step Chrome 旁邊出現小小的上下按鈕 Opera 旁邊出現小小的上下按鈕 但數字的大小沒顯示好 41
  42. 42. HTML5 Basic http://MobileDev.TW 4.range •  將input type設定為range •  可限定最小值min, 最大值max, 每次增加step Chrome 42 •  Lab •  顯示range的值在range元件旁邊,會自動更新數值
  43. 43. HTML5 Basic http://MobileDev.TW 5.date picker •  將input type設定為date 43 Chrome •  Lab •  取得使用者所選擇的日期
  44. 44. HTML5 Basic http://MobileDev.TW 6.color •  將input type設定為color 44 •  Lab •  取得使用者所選擇的顏色 •  並設定為網頁背景顏色
  45. 45. HTML5 Basic http://MobileDev.TW 7.Progress Bar progress id=bar value=10 max=100 •  可設定最大值max, 目前值value Chrome 45
  46. 46. HTML5 Basic http://MobileDev.TW 7.Progress Bar 46 Lab 工作清單結合進度狀態顯示 提示 透過CheckBox的 checked屬性,判斷 是否為true,即可得 知該選項是否被勾選 了
  47. 47. HTML5 Basic http://MobileDev.TW 8.meter meter id=myMeter max=1500 min=0 value=500 low=150 high=1350/meter •  可設定最大值max, 最小值,目前值value •  過大的警戒臨界值high,過小的警戒臨界值low Chrome 47
  48. 48. HTML5 Basic http://MobileDev.TW 9.placeholder •  將input 增加placeholder屬性 48
  49. 49. HTML5 Basic http://MobileDev.TW 8.GEOLOCATION 49
  50. 50. HTML5 Basic http://MobileDev.TW 1.取得地理位置 1.  建立一顆按鈕,按下去之後開始動作 2.  確認是否有支援地理位置抓取 3.  呼叫取得地理位置的方法 •  設定成功取得位置後要做的事情 •  設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition (successCallback, errorCallback); 50
  51. 51. HTML5 Basic http://MobileDev.TW 2.運用Google Map •  取得經度與緯度的值 •  組合出google map的連結 •  https://maps.google.com.tw/ •  ?q=latValue+,+lonValue 51
  52. 52. HTML5 Basic http://MobileDev.TW 2.運用Google Map 9-2-1.Lab 直接去Google Map 提示:改變目前視窗的網址 52
  53. 53. HTML5 Basic http://MobileDev.TW 3.不斷更新現在位置 •  改用navigator.geolocation.watchPosition •  可持續取得位置 •  不用時呼叫clearWatch •  window.navigator.geolocation.clearWatch( watc hPositionObject ) 53
  54. 54. HTML5 Basic http://MobileDev.TW 9.DRAGDROP 54
  55. 55. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1. Ryan 2. David 3. John 1. 萊恩 2. 大衛 3. 約翰 55
  56. 56. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •  準備一個純文字檔 •  在網頁中規劃一個div與一個textarea •  拖放的4個事件 •  dragenter:拖進該區域 •  dragleave:拖離該區域 •  dragover:停留在該區域 •  drop:放下 56
  57. 57. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1.  頁面載入時,即觀察這4個事件 2.  拖進該區域時,區域變成紅色,並顯示Drop it! 3.  拖離該區域時,恢復為藍色,文字為Come here. 4.  拖放於該區域時,取得該檔案,進行轉換 5.  確認該檔案為文字檔 6.  讀出內容,進行翻譯 7.  翻譯完後,顯示於textarea 57
  58. 58. HTML5 Basic http://MobileDev.TW Lab.餵食笑臉 58 蘋果 毒蘋果
  59. 59. HTML5 Basic http://MobileDev.TW 10.離線網頁 59
  60. 60. HTML5 Basic http://MobileDev.TW Web App最害怕…..Offline 可連線時,將網 頁儲存一份於快 取中,離線時, 就讀取這一份快 取的檔案 60
  61. 61. HTML5 Basic http://MobileDev.TW Web Server 設定步驟 •  在Web Server上設置.htaccess,加上這一行: •  AddType text/cache-manifest .manifest •  將Apache上的httpd.conf,修改: Directory / Options FollowSymLinks AllowOverride All /Directory 61
  62. 62. 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 62
  63. 63. HTML5 Basic http://MobileDev.TW 如何更新快取 •  直接更新manifest檔案 •  用JavaScript applicationCache.update() •  可監聽以下事件瞭解現況 •  checking:正在檢查更新或準備第一次下載manifest •  noupdate:manifest沒有變動時 •  downloading:正在下載manifest列出的檔案時 •  progress:相關檔案都下載好時 •  updateready:更新快取完畢,準備替換成最新的快取之前 63
  64. 64. HTML5 Basic http://MobileDev.TW 11.WEB WORKERS 64
  65. 65. HTML5 Basic http://MobileDev.TW Web Worker •  多執行緒進行運算 •  無法共享主執行緒變數 •  無法直接變更window •  無法直接變更document •  傳送訊息回主執行緒 Main Thread New Thread make new thread passing messagespassing messages 65
  66. 66. HTML5 Basic http://MobileDev.TW Web Worker •  避免瀏覽器當掉,停住於某一個龐雜的計算script •  使用Web Worker來計算2~1000000是否為質數 •  建立一個新的Web Worker來跑一隻JavaScript •  該檔案計算2~1000000是否為質數 •  過程中需將進度回傳給主執行緒 •  最後將結果也送回主執行緒 66
  67. 67. HTML5 Basic http://MobileDev.TW Web Worker •  建立新執行緒 •  從新執行緒傳遞資料給主執行緒 •  主執行緒接收新執行緒的訊息 67

×