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.
講師:Jollen Chen <jollen@jollen.org>          Blog:http://www.jollen.org/blog          課程:http://www.moko365.com          課程...
http://www.moko365.com/enterprise/starting-html5-app                                                       2
現場實況       3
現場實況       4
現場實況       5
現場實況       6
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                                             License      This work is licensed ...
第一次寫	 HTML5	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                             ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                    HTML5 重要基礎      <div>      <Canvas>      Web Socket      Web StorageCopyrigh...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》          需要了解 HTML5 文件撰寫                                                       <!doctype html> ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                第⼀一個 HTML5 文件Copyright (C) 2013 Moko365 Inc. All Rights Reserved.               ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                   1.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved.   ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                   2.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved.   ...
第一次畫	 Layout	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                            ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                       CSS pixel           定義於 CSS 裡的稱為 device pixel           非...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                           device pixel      螢幕 (Screen) 的顯示像素      眼睛所見Copyright (C) 2013 Moko3...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          high-resolution           1 CSS pixel 需要 16 個 device pixel           更...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            with zoom out          4 pixel          CSS pixel 等於 device pixel   ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                             screen size                                                        ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》             Screen Size 測量方式      screen size 使用 device pixel 測量Copyright (C) 2013 Moko365 Inc....
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          window size                                                       wind...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 viewport                                                       ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 viewport                                       document.documen...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      visual viewport                                       visual viewport     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     layout viewport                                                       layou...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》               visual 不等於 layout visual                                                layout vi...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                         “width=320”  1 <!DOCTYPE html >  2 <html>  3 <head>  4       <meta char...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                        content width      content width = 900px      使用 %         1 #content { ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》             content = document      content width = document width      使用 %         1 #content...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》content = document, and viewport            before                                     afterCopy...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     其它 layout 屬性      margin >> border >> padding      position >> box-sizing >...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  更多關於 viewport      只適用於 mobile browser      手機瀏覽可讓 visual viewport = layout vi...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      visual viewport                                       visual viewport     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》           “width=device-width”      3.html  1 <!DOCTYPE html >  2 <html>  3 <head>  4       <me...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 圖片問題               before                                  afte...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   圖片大小怎麼處理                                                        no good      ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 Media Query            CSS @media rule            <style>      ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                   Media TypeSource: http://www.w3schools.com/css/css_mediatypes...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                不同的 Media TypeCopyright (C) 2013 Moko365 Inc. All Rights Reserved.              ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  使用 Media Query      大部份手機瀏覽器不實作 @media handheld      5.css           1 #conten...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                             瀏覽器相容          5.html at iOS6                               6.htmlC...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 解決問題      解決方式      6.html      建議方式: fully implement1 <!DOCTYP...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》              ViewPort 與 Content                                          ViewPort              ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》ViewPort 等於 Layout ViewportCopyright (C) 2013 Moko365 Inc. All Rights Reserved.                 ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            Scale = 2.0                                 scale=1.0               ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                      Scale      考慮 Scaling      手機設定 scale=1.0 (100% zoom)     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                     使用 ViewPort   <head>     <title>Example</title>      <meta ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          Media Query      7.css              1 @media screen {                 ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      自訂 Media Type├── css│ ├── common.css│ └── medium.css└── index.html        ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                   多個 CSS├── css                                             ├──...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                 根據手機解析度定義Nexus S                4"@240dpi               480x800Galaxy SII      ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                    Media Type 範圍                                                  480          ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      依手機實作 CSS 6      <link rel="stylesheet" 7           media="screen and (max...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          目前文件結構                           ├── css                           │ ├...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                實作 CSS                      480.css                             ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》         -webkit-device-pixel-ratio                 WebView 支援 “-webkit-device-pixel-ratio” CSS ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                        Webkit 有自已的個性   #header {     background:url(medium-density-image.png); ...
第一次學跨裝置	 Font	 Size	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》        property of the element      element size      p { font-size: 1.2em } 表示比原本預設的大 20%     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                              Galaxy SIICopyright (C) 2013 Moko365 Inc. All Rights Reserved.    ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            HTC One XCopyright (C) 2013 Moko365 Inc. All Rights Reserved.       ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                             em vs rem     p { font-size: 1.2em}                       p { font-...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                 font size 建議做法      將 root element 的 default font size 改為 10px     ➡    原本是 16p...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                             em vs rembody { font-size:62.5%; }          16px * 0.625 = 10pxh1 {...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                Base Property 觀念      WebKit based browser 的問題      可使用 “Base” 觀念解決     ➡    thi...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                修改 base font size       將 default (base) font size 改為 8px7 /* setting line-heigh...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用 base.css + 120% font size          HTC One X                                Galaxy SII       ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       很重要但不能用      切勿在 @media {} 裡使用 ‘rem’ 單位      @media {} 裡無法使用 ‘rem’ 單位 ?  ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          All in ‘12px’  HTC One X                               Galaxy SII     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 頁面放大Copyright (C) 2013 Moko365 Inc. All Rights Reserved.       ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                    關掉 scaling 功能24       <meta name="viewport" content="width=device-width,init...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》            使用 “font-size: 4vw”      vw: viewport’s width (%)      4x165mm/100 = 6.6mm = 0.66cm ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》             字的大小是 0.66 公分      目前發佈的 webkit based 瀏覽器不支援Copyright (C) 2013 Moko365 Inc. All Rig...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       現在能用 vw 嗎      Bad news: 瀏覽器不支援     ➡    Please just wait.      Good news...
第一次寫	 Screen	 Detection	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                 ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     Screen 大小偵測             iMac                             Galaxy SII   HTC O...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       找喳時間又到了       Firefox                Android Browser          Android Bro...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                         使用 adapt.js├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.cs...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                        多屏 UI 的關鍵      Screen Detection: 使用 JavaScript 取代 Media Query      了解 wi...
第一次學	 JavaScript	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                        ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》               www.codeyear.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved.             ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          screenSize();<script>function screenSize() {    var screenWidth,      ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                JavaScript 主要用途      瀏覽器的程式語言      寫在 HTML 文件裡      主要目的是開發動態網頁Copyright (C) 201...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                 進階觀念      Document ready 後才執行      Document 與 JavaScript 是並行載入 ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            使用 jQuery      JavaScript 核心程式庫      JavaScript 的插件平臺      JavaScrip...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   JavaScript Minify       jquery-1.8.3.min.js                             jquer...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》           偵測 Document Ready<script>function screenSize() {    var screenWidth,      screenHeigh...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  使用 $(document)                    $                                  $(documen...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          載入後再執行     $(document).ready()                        $(document).read...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                              認識 DOM      DOM      Document Object Model      document 是 DOM 裡的根...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                         認識 Selector                                            <!doctype html> ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                二種選擇對象的方法   var content =   findElememtById( notes );                    var cont...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》            Anonymous Function63 <script>64 function screenSize() {65    var screenWidth,66     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用於 Callback function 參數   function screenSize() {                     function() {   }         ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》    認識 Anonymous Function      匿名函數      function constant      lambda function      發源於 1958 LI...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                             學習 jQuery63 <script>64 function screenSize() {65    var screenWidth...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                           查詢函數用法   .css();                                          .fadeIn(); ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          動態修改 CSS                                                  #content {  ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                        DOM Selector      getElememtById()      jQuery      SizzleCopyright (C) ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                JavaScript 重要基礎      Object (物件觀念)      Module Pattern (模組製作)      輸入事件處理 (Input...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      Create Objects    var person = {    ! name: "Jollen",    ! job: "Software ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》JavaScript Constructor Pattern  function Person(name, job) {  ! this.name = name;  ! this.job = ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                          Closure (封閉性)                                    function() {         ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                           匯入外部封包        (function($) {        var base;        function square(...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       jQuery Plugins      Add new methods to jQuery module (object).Copyright (...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》             做⼀一個 jQuery Plugin   $.fn.cover = function () {    ...   };Copyright (C) 2013 Moko3...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                           將功能插件化        (function($) {        var base;        $.fn.square = fu...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     插件裡有多個函數      (function($) {      var base;      $.fn.square = function( ) ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     插件裡有多個函數      (function($) {      var base = 5;                            ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》   this 的 up object 是 content<div id= content ></div><div id= message ></div><script>$( #content...
第一次學	 UI	 Framework	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                     ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》       JavaScript UI Framework      jQuery Mobile      jQuery Tools, http://flowplayer.org/tools/...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》       非常多 Open Source 計畫      iUI, http://code.google.com/p/iui/      Yahoo YUI, http://develop...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  使用 jQuery Mobile 3 <head> 4   <meta charset="UTF-8" />   5   <meta http-equiv=...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      jquery.ebook.js    1 (function() {    2    3 $.fn.cover = function() {    ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》    javascriptcompressor.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved.                ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》              jquery.ebook.min.js (function(){$.fn.cover=function(){var ctx=this;$ (ctx).css("ba...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       直接修改不方便      CSS 應定義在獨立的 .css 文件      使用 jQuery 的 .addClass() 來引用Copyrigh...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   jquery.ebook.css   1 .ebook_cover {   2    background: #000000;   3  color: #...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                         修改 index.html8     <link rel="stylesheet" href="css/jquery.mobile-1.1.1...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     jquery.ebook.js 1 (function() { 2 3 $.fn.cover = function() { 4     var ctx...
第一次學	 jQuery	 Mobile	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                    ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》            jQuery UI Framework      jQTouch      jQuery Mobile     ➡    http://jquerymobile.com...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   “data-” attribute        The jQuery Mobile framework uses HTML5 data-        ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  data-role=”page”                             使用 “data-” attribute  <body data-...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》           jQuery Mobile 頁面結構<body><div data-role="page">    <div data-role="header">         <h...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   Page Transitions      jQuery Mobile 支援 CSS3 方式的 Page Transition      可套用在 pag...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                           使用 Dialogs<div data-role="page">   <div data-role="header">       <h1...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       使用 Transition<div data-role="page">    <div data-role="header">        <h...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            jQuery 佈景      jQuery Mobile 支援 CSS3 方式的自定佈景 (theme)      使用 ThemeRo...
第一次學	 PhoneGap	 就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                          ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   將網站打包成 Apppackage com.moko365.examples.phonegap;import android.app.Activity;i...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》     應用程式的 UI: index.htmlCopyright (C) 2013 Moko365 Inc. All Rights Reserved.                   ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》        HTML5 App: 從這裡開始<!DOCTYPE HTML><html><head>    <title>PhoneGap</title>    <script type="...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》使用 JavaScript 呼叫 Device API      http://docs.phonegap.comCopyright (C) 2013 Moko365 Inc. All Rig...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                   Accelerometer APInavigator.accelerometer.getCurrentAcceleration(accelerometer...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            acceleration.html<!DOCTYPE html><html> <head>   <title>Acceleration ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      Native Web App 觀念                             Figure 1. You can make your ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                  Canvas      HTML5 新增的繪圖標籤      不同瀏覽器的支援程度不同Copyright (C) 2013 ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                      使用 <Canvas><canvas id="cover"></canvas><script>var canvas = document.getEl...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                                     Audio<audio controls id="player"><source src="test.ogg"/></...
第一次學	 Event	 處理就上手Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                           ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                       處理 Click 事件   document.getElementById("content").addEvent   Listener("cli...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                  ‘touchmove’ 事件Touch X: <input id="touchx"><br/>Touch Y: <input id="touchy"><sc...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                            Touch 事件                          touchstart                        ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》                     結合繪圖與事件處理<canvas id="canvas" width="400" height="300"></canvas><script>var ...
《八屏⼀一雲時代來臨 教你HTML5六小時打通關 》               多屏 UI 的關鍵: 結論      Screen Detection: 使用 JavaScript 取代 Media Query      了解 window/...
更多資訊請上 Go8Panel.com                      148
Upcoming SlideShare
Loading in …5
×

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

6,584 views

Published on

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

Published in: Education
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Visit Here to Download PDF eBook === http://letobodome.best/8520507522-A-Escrita-Cientfica-no-Div-Entre-as-Possibilidades-e-as-Dif.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

課程名稱:八屏一雲時代來臨 教你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

×