HTML5 Basic

6,224 views

Published on

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,224
On SlideShare
0
From Embeds
0
Number of Embeds
346
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×