課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)

6,270 views
6,187 views

Published on

學習 HTML5 應用程式的第一課: 建立 UI 與學習 JavaScript。本課程由鴻海集團贊助,全程免費,深入淺出、六個小時入門 HTML5。

Published in: Education
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,270
On SlideShare
0
From Embeds
0
Number of Embeds
1,278
Actions
Shares
0
Downloads
287
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)

  1. 1. 講師:Jollen Chen <jollen@jollen.org> Blog:http://www.jollen.org/blog 課程:http://www.moko365.com 課程專案:鴻海科技集團贊助課程 課程名稱:八屏⼀一雲時代來臨 教你HTML5六小時打通 課程日期:2012/12/19 (三) 課程時間:10:00~17:00 八屏一雲時代來臨 教你HTML5六小時打通Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 1
  2. 2. http://www.moko365.com/enterprise/starting-html5-app 2
  3. 3. 現場實況 3
  4. 4. 現場實況 4
  5. 5. 現場實況 5
  6. 6. 現場實況 6
  7. 7. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 License This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.You are free: • to Share — to copy, distribute and transmit the work • to make commercial use of the workUnder the following conditions: • Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). • No Derivative Works — You may not alter, transform, or build upon this work.With the understanding that: • Waiver — Any of the above conditions can be waived if you get permission from the copyright holder. • Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license. • Other Rights — In no way are any of the following rights affected by the license: ◦ Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations; ◦ The authors moral rights; ◦ Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights. • Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 7
  8. 8. 第一次寫 HTML5 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 8
  9. 9. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 HTML5 重要基礎 <div> <Canvas> Web Socket Web StorageCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 9
  10. 10. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 需要了解 HTML5 文件撰寫 <!doctype html> <html> <head> <meta charset="utf-8"> <title>page title</title> </head> <body> <header> header </header> <nav> navigation </nav> <article> <section>summary</section> </article> <aside> sidebar </aside> <footer> footerSource: http://web-profile.com.ua/html/html5- </footer> </body>document-structure/ </html> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 10
  11. 11. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 第⼀一個 HTML5 文件Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 11
  12. 12. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 1.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 12
  13. 13. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 2.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 13
  14. 14. 第一次畫 Layout 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 14
  15. 15. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 CSS pixel 定義於 CSS 裡的稱為 device pixel 非眼睛所見 圖像的像素 #content { width: 128px; }See more: http://www.quirksmode.org/mobile/viewports.html Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 15
  16. 16. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 device pixel 螢幕 (Screen) 的顯示像素 眼睛所見Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 16
  17. 17. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 high-resolution 1 CSS pixel 需要 16 個 device pixel 更細緻Source: www.w3.org/TR/css3-values/ Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 17
  18. 18. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 with zoom out 4 pixel CSS pixel 等於 device pixel Zoom out: ⼀一個 device pixel 包含多個 CSS pixelSource: http://www.quirksmode.org/mobile/viewports.html Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 18
  19. 19. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 screen size screen.width screen.heightSource: Moko365 Inc. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 19
  20. 20. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Screen Size 測量方式 screen size 使用 device pixel 測量Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 20
  21. 21. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 window size window.innerWidth window.innerHeightSource: Moko365 Inc.Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 21
  22. 22. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 viewport window.innerWidth window.innerHeightSource: Moko365 Inc. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 22
  23. 23. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 viewport document.documentElement.clientWidth document.documentElement.clientHeightSource: Moko365 Inc. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 23
  24. 24. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 visual viewport visual viewport the part of the page that s currently shown on-screenCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 24
  25. 25. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 layout viewport layout viewportCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 25
  26. 26. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 visual 不等於 layout visual layout viewport viewportCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 26
  27. 27. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 “width=320” 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="2.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=320"> 8 <title>我在 Android World 2012 深圳:與會心得分享</title> 9 </head>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 27
  28. 28. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 content width content width = 900px 使用 % 1 #content { 2 width: 900px; 3}Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 28
  29. 29. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 content = document content width = document width 使用 % 1 #content { 2 width: 100%; 3}Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 29
  30. 30. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》content = document, and viewport before afterCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 30
  31. 31. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 其它 layout 屬性 margin >> border >> padding position >> box-sizing >> zCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 31
  32. 32. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 更多關於 viewport 只適用於 mobile browser 手機瀏覽可讓 visual viewport = layout viewportCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 32
  33. 33. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 visual viewport visual viewport the part of the page that s currently shown on-screenCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 33
  34. 34. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 “width=device-width” 3.html 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="3.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=device-width;"> 8 <title>我在 Android World 2012 深圳:與會心得分享</title> 9 </head>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 34
  35. 35. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 圖片問題 before afterCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 35
  36. 36. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 圖片大小怎麼處理 no good 1 #content { 2 width: 100%; 3 } 4 5 img { 6 width: 300px; 7 }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 36
  37. 37. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Media Query CSS @media rule <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style>See more: http://www.w3schools.com/css/css_mediatypes.asp Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 37
  38. 38. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Media TypeSource: http://www.w3schools.com/css/css_mediatypes.asp Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 38
  39. 39. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 不同的 Media TypeCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 39
  40. 40. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 Media Query 大部份手機瀏覽器不實作 @media handheld 5.css 1 #content { 2 width: 100%; 3} 4 5 @media screen { 6 img { 7 } 8} 9 10 @media screen and (max-width: 480px) { 11 img { 12 width: 300px; 13 } 14 }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 40
  41. 41. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 瀏覽器相容 5.html at iOS6 6.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 41
  42. 42. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 解決問題 解決方式 6.html 建議方式: fully implement1 <!DOCTYPE html >2 <html>3 <head>4 <meta charset="UTF-8" />5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />6 <link href="6.css" rel="stylesheet" type="text/css" />7 <meta name="viewport" content="width=device-width,initial-scale=1.0">8 <title>我在 Android World 2012 深圳:與會心得分享</title>9 </head>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 42
  43. 43. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 ViewPort 與 Content ViewPort Content (Surface)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 43
  44. 44. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》ViewPort 等於 Layout ViewportCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 44
  45. 45. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Scale = 2.0 scale=1.0 100% zoom 480x320 (Content) scale=2.0 200% zoom 960x640 (Content)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 45
  46. 46. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Scale 考慮 Scaling 手機設定 scale=1.0 (100% zoom) ➡ one CSS pixel 等於 one device pixel ➡ 12px / 1.2em ➡ ppi = pixel per inch ➡ 240 ppiCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 46
  47. 47. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 ViewPort <head> <title>Example</title> <meta name="viewport" content="width=device-width, user- scalable=no" /> </head> <meta name="viewport" content=" height = [pixel_value ¦ device-height] , width = [pixel_value ¦ device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes ¦ no] , target-densitydpi = [dpi_value ¦ device-dpi ¦ high-dpi ¦ medium-dpi ¦ low-dpi] " />Source: Android Dev Guide. Portions of this page are reproduced from workcreated and shared by the Android Open Source Project and used accordingto terms described in the Creative Commons 2.5 Attribution License. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 47
  48. 48. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Media Query 7.css 1 @media screen { 2 img { 3 } 4 #content { 5 width: 100%; 6 } 7} 8 9 @media screen and (max-width: 480px) { 10 img { 11 width: 300px; 12 } 13 #content { 14 width: 100%; 15 } 16 }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 48
  49. 49. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 自訂 Media Type├── css│ ├── common.css│ └── medium.css└── index.html 6 <link rel="stylesheet" 7 media="screen" 8 href="css/common.css" 9 type="text/css" /> 10 <link rel="stylesheet" 11 media="screen and (max-width: 480px)" 12 href="css/medium.css" 13 type="text/css" /> 14 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 15 <title>我在 Android World 2012 深圳:與會心得分享</title> 16 </head> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 49
  50. 50. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 多個 CSS├── css ├── css│ ├── common.css │ ├── common.css│ └── medium.css │ └── medium.css└── index.html └── index.html 1 img { 1 img { 2 width: 300px; 2 } 3 } 3 4 4 #content { 5 #content { 5 width: 100%; 6 width: 100%; 6 } 7 } Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 50
  51. 51. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 根據手機解析度定義Nexus S 4"@240dpi 480x800Galaxy SII 4.3"@ 480x800Galaxy Tab 2 7"@160dpi 600x1024Galaxy Nexus 4.65"@320dpi 720x1280HTC One X 4.7"@320dpi 720x1280Galaxy SIII 4.8"@320dpi 720x1280Galaxy Note 5.3"@320dpi 800x1280Nexus 7 7"@213dpi 800x1280 Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 51
  52. 52. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Media Type 範圍 480 481 720 721 800 801Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 52
  53. 53. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 依手機實作 CSS 6 <link rel="stylesheet" 7 media="screen and (max-width: 480px)" 8 href="css/480.css" 9 type="text/css" />10 <link rel="stylesheet"11 media="screen and (max-width: 720px) and (min-width: 481px)"12 href="css/720.css"13 type="text/css" />14 <link rel="stylesheet"15 media="screen and (max-width: 800px) and (min-width: 721px)"16 href="css/800.css"17 type="text/css" />18 <link rel="stylesheet"19 media="screen and (min-width: 801px)"20 href="css/large.css"21 type="text/css" />Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 53
  54. 54. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 目前文件結構 ├── css │ ├── 480.css │ ├── 720.css │ ├── 800.css │ └── large.css └── index.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 54
  55. 55. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 實作 CSS 480.css 800.css img { img { width: 300px; width: 720px; } } #content { #content { width: 100%; width: 100%; } } 720.css large.css img { img { width: 480px; width: 800px; } } #content { #content { width: 100%; width: 100%; } }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 55
  56. 56. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 -webkit-device-pixel-ratio WebView 支援 “-webkit-device-pixel-ratio” CSS 樣式 ➡ 0.75, 1.0, 1.5 <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according toterms described in the Creative Commons 2.5 Attribution License. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 56
  57. 57. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Webkit 有自已的個性 #header { background:url(medium-density-image.png); } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); Figure 5. A web page with CSS thats } targetted to specific screen densities using the -webkit-device-pixel-ratio media feature. Notice that the hdpi device shows a different image thats applied in CSS.Source: Android Dev Guide. Portions of this page are reproduced from workcreated and shared by the Android Open Source Project and used accordingto terms described in the Creative Commons 2.5 Attribution License. Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 57
  58. 58. 第一次學跨裝置 Font Size 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 58
  59. 59. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 property of the element element size p { font-size: 1.2em } 表示比原本預設的大 20% p {font-size: 14px} 不建議使用絕對值Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 59
  60. 60. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Galaxy SIICopyright (C) 2013 Moko365 Inc. All Rights Reserved. 60
  61. 61. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 HTC One XCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 61
  62. 62. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 em vs rem p { font-size: 1.2em} p { font-size: 1.2rem} elements will elements will be 20% be 20% greater the greater then element root emCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 62
  63. 63. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 font size 建議做法 將 root element 的 default font size 改為 10px ➡ 原本是 16px 使用 rem 單位 ➡ 相對於 root elementCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 63
  64. 64. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 em vs rembody { font-size:62.5%; } 16px * 0.625 = 10pxh1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px ? */body { font-size:62.5%; }h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px */html { font-size: 62.5%; }body { font-size: 14px; font-size: 1.4rem; } /* =14px */h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 64
  65. 65. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Base Property 觀念 WebKit based browser 的問題 可使用 “Base” 觀念解決 ➡ thierryk/base.css - https://gist.github.com/1396486 ➡ “Styling for WebKit-based browsers”, ➡ http://www.css-101.org/articles/base-styles-sheet-for-webkit-based- browsers/index.phpCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 65
  66. 66. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 修改 base font size 將 default (base) font size 改為 8px7 /* setting line-height and family while leaving default font-size using *rem * */89 html {10 font: 62.5%/1.3 sans-serif;11 } Root Element (HTML):12 16px * 0.625 = 10px13 /* zeroing out the default 8px margin */ 10px / 1.3 = 7.69px = 8px1415 body { Body:16 font-size: 1.3rem; 8px * 1.3rem = 10px;17 margin: 0;18 }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 66
  67. 67. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用 base.css + 120% font size HTC One X Galaxy SII (ratio = 50%) (ratio = 50%)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 67
  68. 68. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 很重要但不能用 切勿在 @media {} 裡使用 ‘rem’ 單位 @media {} 裡無法使用 ‘rem’ 單位 ? ➡ Bug 78295: Support for CSS rem unit in Media Queries, ➡ https://bugs.webkit.org/show_bug.cgi?id=78295 ├── css │ ├── 480.css │ ├── 720.css │ ├── 800.css 1p{ │ ├── base.css 2 font-size: 1.2rem; │ ├── common.css 3} │ └── large.css └── index.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 68
  69. 69. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 All in ‘12px’ HTC One X Galaxy SII Galaxy SIIAndroid Browser Firefox Android Browser Galaxy SII FirefoxCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 69
  70. 70. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 頁面放大Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 70
  71. 71. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 關掉 scaling 功能24 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">25 <title>我在 Android World 2012 深圳:與會心得分享</title>26 </head>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 71
  72. 72. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 “font-size: 4vw” vw: viewport’s width (%) 4x165mm/100 = 6.6mm = 0.66cm viewport 的實體大小 ? 用尺量 !Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 72
  73. 73. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 字的大小是 0.66 公分 目前發佈的 webkit based 瀏覽器不支援Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 73
  74. 74. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 現在能用 vw 嗎 Bad news: 瀏覽器不支援 ➡ Please just wait. Good news: ➡ Implement vw/vh/vmin (viewport sizes) from CSS 3 Values and Units, ➡ ​https://bugs.webkit.org/show_bug.cgi?id=27160 and ➡ http://trac.webkit.org/changeset/109656Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 74
  75. 75. 第一次寫 Screen Detection 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 75
  76. 76. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Screen 大小偵測 iMac Galaxy SII HTC One XCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 76
  77. 77. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 找喳時間又到了 Firefox Android Browser Android BrowserCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 77
  78. 78. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 adapt.js├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.css└── index.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 78
  79. 79. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 多屏 UI 的關鍵 Screen Detection: 使用 JavaScript 取代 Media Query 了解 window/document 的 width/height 設好 ViewPort 寫好不同 Media Type 的 CSS 找⼀一個好的 browser engine (webkit) 工程師 ➡ webkit engineer 應該和 UI designer 合作 ➡ 工程師不會告訴你這是他的錯Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 79
  80. 80. 第一次學 JavaScript 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 80
  81. 81. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 www.codeyear.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 81
  82. 82. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 screenSize();<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight; screenWidth = screen.width; screenHeight = screen.height; windowWidth = window.innerWidth; windowHeight = window.innerHeight; alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}screenSize();</script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 82
  83. 83. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 JavaScript 主要用途 瀏覽器的程式語言 寫在 HTML 文件裡 主要目的是開發動態網頁Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 83
  84. 84. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 進階觀念 Document ready 後才執行 Document 與 JavaScript 是並行載入 (concurrent)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 84
  85. 85. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 jQuery JavaScript 核心程式庫 JavaScript 的插件平臺 JavaScript 的外部程式庫Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 85
  86. 86. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 JavaScript Minify jquery-1.8.3.min.js jquery-1.8.3.js minify 未 minify,浪 (compress) 後 費載入時間 的版本Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 86
  87. 87. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 偵測 Document Ready<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight; screenWidth = screen.width; screenHeight = screen.height; windowWidth = window.innerWidth; windowHeight = window.innerHeight; alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}$(document).ready(screenSize);</script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 87
  88. 88. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 $(document) $ $(document) selector. 從 DOM 裡面有一 DOM 裡找出指 個 document 定的對象 對象Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 88
  89. 89. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 載入後再執行 $(document).ready() $(document).ready(screenSize) screenSize 是 接著呼叫 ready 事件的 jQuery 的 callback ready() 函數 functionCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 89
  90. 90. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 認識 DOM DOM Document Object Model document 是 DOM 裡的根 (root) 對象 每⼀一個標籤都是⼀一個對象,文件載入後掛進 DOM 學習 JavaScript 的重點是認識 DOM JavaScript 的核心概念: Access DOM 不的標籤是不同的對象,並提供許多 API (函數)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 90
  91. 91. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 認識 Selector <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> id=notes <body> <header> </header> <nav> </nav> <article>var content =findElememtById(“notes”); <section>summary</section> <div id= notes ></div>var content = $(“notes”); </article> <aside> </aside> <footer> </footer> </body> </html>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 91
  92. 92. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 二種選擇對象的方法 var content = findElememtById( notes ); var content = $( notes ); 呼叫 DOM 提 使用 jQuery 選 供的函數來找出 擇器來找出 notes notesCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 92
  93. 93. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Anonymous Function63 <script>64 function screenSize() {65 var screenWidth,66 screenHeight,67 windowWidth,68 windowHeight;6970 screenWidth = screen.width;71 screenHeight = screen.height;7273 windowWidth = window.innerWidth;74 windowHeight = window.innerHeight;7576 alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight);77 alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);78 }7980 $(document).ready(function() {81 alert("OK!");82 });83 </script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 93
  94. 94. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用於 Callback function 參數 function screenSize() { function() { } } 具名函數 匿名函數,使用 於 callback function 參數 function screenSize() { } 不需要名字Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 94
  95. 95. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 認識 Anonymous Function 匿名函數 function constant lambda function 發源於 1958 LISP 語言 多種語言採用 經常使用於 Callback function 參數 在 JavaScript 裡,anonymous function 有別於 ClosureCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 95
  96. 96. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 學習 jQuery63 <script>64 function screenSize() {65 var screenWidth,66 screenHeight,67 windowWidth,68 windowHeight;6970 screenWidth = screen.width;71 screenHeight = screen.height;7273 windowWidth = window.innerWidth;74 windowHeight = window.innerHeight;75 }7677 $(document).ready(function() {78 screenSize();79 $("#content").css("display", "none");80 $("#content").fadeIn("slow");81 });82 </script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 96
  97. 97. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 查詢函數用法 .css(); .fadeIn(); 1 .css( propertyName ) .fadeIn( [duration] [, callback] ) 2 .css( propertyName, value ) 3 .css( propertyName, function(index, value) ) 4 .css( map )Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 97
  98. 98. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 動態修改 CSS #content { $( #content ).css( display: none; display , none ); }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 98
  99. 99. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 DOM Selector getElememtById() jQuery SizzleCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 99
  100. 100. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 JavaScript 重要基礎 Object (物件觀念) Module Pattern (模組製作) 輸入事件處理 (Input Events) ➡ Drag & Drop DOM (Document Object Model)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 100
  101. 101. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Create Objects var person = { ! name: "Jollen", ! job: "Software Developer", ! ! queryJob: function() { ! ! alert(this.job); ! } }; person.queryJob();Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 101
  102. 102. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》JavaScript Constructor Pattern function Person(name, job) { ! this.name = name; ! this.job = job; ! this.queryJob = function() { ! ! alert(this.job); ! }; } // 將 Person() 視為 constructor var person = new Person("Jollen", "Software Developer"); alert(person instanceof Person); // trueCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 102
  103. 103. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Closure (封閉性) function() { (function() {var base; var base; var base;function square( ) { function square( ) { function square( ) { base = base * base; base = base * base; base = base * base;} } } } }) (); 沒有封閉... 完成封閉,成 (function() { var base; 為一個封包 function square( ) { base = base * base; } }) Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 103
  104. 104. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 匯入外部封包 (function($) { var base; function square( ) { $ = jQuery base = base * base; $( #content ).html(base); } }) (jQuery); 匯入 jQuery 封包Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 104
  105. 105. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jQuery Plugins Add new methods to jQuery module (object).Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 105
  106. 106. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 做⼀一個 jQuery Plugin $.fn.cover = function () { ... };Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 106
  107. 107. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 將功能插件化 (function($) { var base; $.fn.square = function( ) { base = base * base; $( #content ).html(base); } }) (jQuery); 插件要打包, 一個插件裡有 一個函數Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 107
  108. 108. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 插件裡有多個函數 (function($) { var base; $.fn.square = function( ) { base = base * base; 插件包, 這個 $( #content ).html(base); 插件裡有2個 } $.fn.minus = function( ) { 函數 base = base - 10; $( #content ).html(base); } }) (jQuery);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 108
  109. 109. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 插件裡有多個函數 (function($) { var base = 5; up objct $.fn.square = function( ) { base = base * base; this.html(base); } $.fn.minus = function( ) { <div id= content ></div> base = base - 10; <div id= message ></div> this.html(base); <script> } $( #content ).square(); $( #message ).minus(); }) (jQuery); </script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 109
  110. 110. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 this 的 up object 是 content<div id= content ></div><div id= message ></div><script>$( #content ).square();$( #message ).minus();</script> content function() {(function($) { thisvar base = 5; }$.fn.square = function( ) { base = base * base; message this.html(base);}}) (jQuery); Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 110
  111. 111. 第一次學 UI Framework 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 111
  112. 112. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 JavaScript UI Framework jQuery Mobile jQuery Tools, http://flowplayer.org/tools/index.html jQuery UI, http://jqueryui.com/home Kendo UI, http://www.kendoui.com/ Ignite, Prototype UI, http://www.prototype-ui.com/ MochaUI, http://mochaui.com/ UKI, http://ukijs.org/Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 112
  113. 113. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 非常多 Open Source 計畫 iUI, http://code.google.com/p/iui/ Yahoo YUI, http://developer.yahoo.com/yui/ XUI, http://xuijs.com/ Alloy, http://alloy.liferay.com/ Jitsu, http://www.jitsu.org/jitsu/index.html Qutensil, http://qutensil.com/ Dojo Mobile, http://http://dojotoolkit.org/Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 113
  114. 114. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 jQuery Mobile 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link rel="stylesheet" href="css/base.css" type="text/css" /> 7 <link rel="stylesheet" href="css/common.css" type="text/css" /> 8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" />... 25 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 26 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 27 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 28 <title>我在 Android World 2012 深圳:與會心得分享</title>29 </head> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 114
  115. 115. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jquery.ebook.js 1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 $(ctx).css("background", "#000000"); 7 $(ctx).css("color", "#ffffff"); 8} 9 10 }) (jQuery);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 115
  116. 116. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 javascriptcompressor.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 116
  117. 117. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jquery.ebook.min.js (function(){$.fn.cover=function(){var ctx=this;$ (ctx).css("background","#000000");$(ctx).css("color","#ffffff")}}) (jQuery);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 117
  118. 118. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 直接修改不方便 CSS 應定義在獨立的 .css 文件 使用 jQuery 的 .addClass() 來引用Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 118
  119. 119. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jquery.ebook.css 1 .ebook_cover { 2 background: #000000; 3 color: #ffffff; 4 height: 30rem; 5}Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 119
  120. 120. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 修改 index.html8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" />9 <link rel="stylesheet" href="css/jquery.ebook.css" type="text/css" />..26 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">27 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>28 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>29 <script src="js/jquery.ebook.js" type="text/javascript"></script> ..35 <div id="cover">36 <p>我在 Android World 2012 深圳:與會心得分享</p>37 </div>.89 $(document).ready(function() {90 screenSize();91 $("#content").css("display", "none");92 $("#content").fadeIn("slow");93 $("#cover").cover();94 });95 </script> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 120
  121. 121. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jquery.ebook.js 1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 ctx.addClass("ebook_cover"); 7} 8 9 }) (jQuery);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 121
  122. 122. 第一次學 jQuery Mobile 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 122
  123. 123. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jQuery UI Framework jQTouch jQuery Mobile ➡ http://jquerymobile.com/Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 123
  124. 124. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 “data-” attribute The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported.Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 124
  125. 125. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 data-role=”page” 使用 “data-” attribute <body data-role="page"> ...content goes here... </body> </html>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 125
  126. 126. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jQuery Mobile 頁面結構<body><div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page --></body></html> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 126
  127. 127. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Page Transitions jQuery Mobile 支援 CSS3 方式的 Page Transition 可套用在 page link 或是 form (表單) 描述方式: <a href="index.html" data-transition="pop">Home</a>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 127
  128. 128. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 Dialogs<div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html" data-rel="dialog">Open dialog</a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page --> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 128
  129. 129. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 Transition<div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html" data-rel="dialog" data-transition="slidedown">Open dialog</a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --></div><!-- /page --> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 129
  130. 130. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 jQuery 佈景 jQuery Mobile 支援 CSS3 方式的自定佈景 (theme) 使用 ThemeRoller 工具Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 130
  131. 131. 第一次學 PhoneGap 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 131
  132. 132. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 將網站打包成 Apppackage com.moko365.examples.phonegap;import android.app.Activity;import android.os.Bundle;import com.phonegap.*;import org.apache.cordova.*;public class HelloPhoneGapActivity extends ActivityDroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); super.loadUrl("file:///android_asset/www/index.html"); }} Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 132
  133. 133. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 應用程式的 UI: index.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 133
  134. 134. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 HTML5 App: 從這裡開始<!DOCTYPE HTML><html><head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"> </script></head><body> <h1>Hello World</h1></body></html>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 134
  135. 135. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用 JavaScript 呼叫 Device API http://docs.phonegap.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 135
  136. 136. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Accelerometer APInavigator.accelerometer.getCurrentAcceleration(accelerometerSuccess,accelerometerError);function onSuccess(acceleration) { alert(Acceleration X: + acceleration.x + n + Acceleration Y: + acceleration.y + n + Acceleration Z: + acceleration.z + n + Timestamp: + acceleration.timestamp + n);};function onError() { alert(onError!);};navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 136
  137. 137. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 acceleration.html<!DOCTYPE html><html> <head> <title>Acceleration Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is ready // function onDeviceReady() { navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } function onSuccess(acceleration) { alert(Acceleration X: + acceleration.x + n + Acceleration Y: + acceleration.y + n + Acceleration Z: + acceleration.z + n + Timestamp: + acceleration.timestamp + n); } function onError() { alert(onError!); } </script> </head> <body> <h1>Example</h1> <p>getCurrentAcceleration</p> </body></html>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 137
  138. 138. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Native Web App 觀念 Figure 1. You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout.Source: Android Dev Guide. Portions of this page are reproduced from workcreated and shared by the Android Open Source Project and used accordingto terms described(C) 2013 Moko365 Inc. All Rights Reserved. Copyright in the Creative Commons 2.5 Attribution License. 138
  139. 139. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Canvas HTML5 新增的繪圖標籤 不同瀏覽器的支援程度不同Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 139
  140. 140. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 使用 <Canvas><canvas id="cover"></canvas><script>var canvas = document.getElementById("cover");var ctx = canvas.getContext("2d");!canvas.width = 480; 推薦網站:http://www.javascriptkit.com/domref/canvas.height = 640;ctx.fillStyle = "black";ctx.beginPath();ctx.arc(100, 100, 100, 0, Math.PI * 2, true);ctx.fill();ctx.fillStyle = "white";ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2, true);ctx.fill();</script> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 140
  141. 141. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Audio<audio controls id="player"><source src="test.ogg"/></audio><script>var audio = document.getElementById("player");document.onkeydown = function(e) {! if (e.keyCode == 83) { // P: Start! ! audio.pause();! } else if (e.keyCode == 80) {! ! audio.play(); // P: Play! }}</script> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 141
  142. 142. 第一次學 Event 處理就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 142
  143. 143. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 處理 Click 事件 document.getElementById("content").addEvent Listener("click", function() {}, false);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 143
  144. 144. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 ‘touchmove’ 事件Touch X: <input id="touchx"><br/>Touch Y: <input id="touchy"><script>var touchx = document.getElementById("touchx"),! touchy = document.getElementById("touchy");!document.addEventListener("touchmove", function(e) {! var touch = e.touches[0];! touchx.value = touch.clientX;! touchy.value = touch.clientY;! e.preventDefault();}, false);</script>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 144
  145. 145. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 Touch 事件 touchstart touchmove touchendCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 145
  146. 146. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 結合繪圖與事件處理<canvas id="canvas" width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");canvas.addEventListener("touchmove", function(e) { hitTest(e.targetTouches[0]); e.preventDefault();}, false);canvas.addEventListener("mousemove", hitTest, false);function hitTest(e) { var rect = canvas.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, inPath = ctx.isPointInPath(x, y); ctx.fillStyle = inPath ? "orange" : "teal"; ctx.fill();}</script> Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 146
  147. 147. 《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》 多屏 UI 的關鍵: 結論 Screen Detection: 使用 JavaScript 取代 Media Query 了解 window/document 的 width/height 設好 ViewPort 寫好不同 Media Type 的 CSS 用對 UI Framework (多屏 UI Framework 有待開發)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 147
  148. 148. 更多資訊請上 Go8Panel.com 148

×