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

講師：Jollen Chen <jollen@jollen.org>Blog：http://www.jollen.org/blog課程：http://www.moko365.com

課程專案：鴻海科技集團贊助課程課程名稱：⼋八屏⼀一雲時代來臨教你HTML5六⼩小時打通關(2)課程⽇日期：2013/1/24 (四)課程時間：10:00~17:00講義版本：v1.3.0

八屏一雲時代來臨教你HTML5六小時打通關(2)

本教材由仕橙3G教室製作與維護

http://www.moko365.com/enterprise/html5-app-javascript-frontend

《⼋八屏⼀一雲時代來臨教你HTML5六⼩小時打通關》

LICENSE NOTICEThis 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 work

Under 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 author's 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.

使用 JavaScript 製作動畫：使用 GreenSock

GreenSock

GSAPGreenSock Animation Platform (GSAP)

使⽤用 JavaScript

Tool SuiteTweenLite

TweenMax

TimelineLite

TimelineMax

Crazy Fast

關於 JavaScript 效能在上⼀一堂課所介紹的觀念，效能由瀏覽器引擎的品質決定

在多媒體應⽤用⽅方⾯面，好的 Browser engine + 好的 JavaScript animation library，開始有能⼒力取代傳統的 Native 實作⽅方法

使⽤用 GSAP官⽅方⼊入⾨門教學

➡ http://www.greensock.com/jump-start-js/

可單獨執⾏行

➡ 無須搭配其它 JavaScript 平臺 (eg. jQuery)

可與 jQuery 搭配使⽤用

➡ 建議只將 jQuery 做為 selector

➡ 不使⽤用 jQuery 的 animation 功能

使⽤用 TweenLite

<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script><script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>

第⼀一個 GSAP 程式 (TweenLite)logo 元素將以 1 秒的時間，擁有⼀一個 CSS property {left:632px}

Source: http://www.greensock.com

TweenLite.to()

TweenLite.to( [target object], [duration in seconds], [destination values] )

Scale & Opacity<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"); TweenLite.to([red, yellow, green], 1, {css:{scale:0.2, opacity:0.3}});

(JavaScript array)

Use jQuery Selector<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"); TweenLite.to($(".box"), 1, {css:{scale:0.2, opacity:0.3}});

jQuery Selector

Event CallbacksonStart

onUpdate

onComplete

onReverse

onReverseComplete

Use Event Callbacks

Control Playbackplay(), play(5)

pause()

resume()

reverse(), reverse(1)

seek(), seek(3)

timeScale(), timeScale(0.5), timeScale(2)

restart()

使⽤用 EasePack

<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>

Call restart() Method

var logo = document.getElementById("logo"), restartBtn = document.getElementById("restartBtn"), tween = TweenLite.to(logo, 1, {css:{left:"632px"}}); restartBtn.onclick = function() { tween.restart(); }

TweenMax從 TweenLite 升級到 TweenMax

更多的 Animation 功能

並⽀支援許多 plugins

➡ CSSPlugin

➡ BezierPlugin

➡ RoundPropsPlugin

使⽤用 TweenMax

var logo = document.getElementById("logo"); TweenMax.to(logo, 1, {css:{left:"300px"}, repeat:3, yoyo:true});

set repeat Tween will smoothly reverse directioneach time it repeats

使⽤用 StaggerstaggerTo()

staggerFrom()

Call staggerTo() Method<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div> <div class="box" id="blue"></div> <div class="box" id="pink"></div> <div class="box" id="purple"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"), blue = document.getElementById("blue"), pink = document.getElementById("pink"), purple = document.getElementById("purple"); //The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation. TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {css:{scale:0.2, opacity:0.3}}, 0.25);

The fourth parameter called stagger sets the amount of time that will transpire between the start of each animation.

TimelineLite建⽴立⼀一系列的動畫效果 (animation sequences)

使⽤用 TimelineLite 的實例來儲存多個動畫 ( thousands of animations)

將多個動畫群組化 (group)

並視為 single tween 來控制

可將 playback control 使⽤用於 Timeline 群組

實例化 TimelineLite<script>$(window).load(function() { var logo = $("#logo"), timelineLite = $("#timelinelite"), tagline = $("#tagline span"), restartBtn = $("#restartBtn"), tl = new TimelineLite(); // Timeline 的實例化 tl.from(logo, 0.5, {css:{left:"-=60px"}, ease:Back.easeOut}) .from(timelinelite, 0.5, {css:{width:"0px", alpha:0}}, -0.02) .staggerFrom(tagline, 0.5, {css:{top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8}, ease:Back.easeOut}, 0.2); restartBtn.click(function() { tl.restart(); }); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), {css:{visibility:"visible"}});}); </script>

使⽤用 TimelineLite Lables加⼊入 lables 以做為導覽列 (navigation)

tl.append("skew") // adds a new label .append(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end .append(getStaggerAnimation(), "stagger") //creates new label and adds animation there .append(getParticlesAnimation(), "particles")

TimelineMax如同 TweenLite 與 TweenMax 的關係

TimelineMax 可⽀支援

➡ set repeat

➡ yoyo

➡ currentLabel()

➡ getLabelAfter()

➡ getLablesArray()

➡ tweenFromTo()

多屏 Layout & CSS 定義：Adaptive CSS Framework

Less Framework 4

課程回顧

adapt.js前次課程使⽤用

替代 CSS Media Query

➡ 有瀏覽器相容性問題

Less Framework 4 是⽐比 adapt.js 更重量級的⼯工具

使⽤用 adapt.js <script> var ADAPT_CONFIG = { path: 'css/',

dynamic: true,

range: [ '0px to 480px = 480.css', '480px to 600px = 600.css', '600px to 720px = 720.css', '720px to 800px = 800.css' ] }; </script> <script src="./adapt.js"></script>

認識 Less Framework 4CSS grid system

For designing adaptive websites

4 layouts

3 sets of typography presets

基於 Media Query 技術

Permissive license (MIT license)

⽀支援 Retina Media Query *

Source: http://lessframework.com

4 Layouts

使⽤用 Less Framework 4

技術⾯面有對基礎的 element 做 reset

➡ html, body, div, span ...

沒有對不同的瀏覽器與裝置做 “base”

➡ 請參考第⼀一堂課介紹

➡ Cross browser and cross devices

使⽤用 “px” 較不合適

➡ 請參考第⼀一堂課介紹

➡ 改⽤用 “rem” 等較合適的單位

技術細節：使⽤用 Media Query/* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout.------------------------------------------------------------cols 1 2 3 4 5px 68 160 252 344 436 */

@media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }

技術細節：Retina Media Query

/* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4.----------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { }

總結使⽤用 Media Query 做為⼋八屏的基本技術

不需從新寫起，但要了解其原理 (第⼀一堂課)

使⽤用現有的 UI Framework (如 Less Framework 4)

以 Less Framework 4 為例，有些⼋八屏 (cross devices) 的技術細節未考慮到

Less+ Framework

Source: http://www.angrycreative.se/wordpress/plugins/less-framework/

簡介 Less+ FrameworkLess+ Framework is a cross-device CSS grid system using media queries

Less Framework 4 的⼀一個擴充插件

改⽤用 jQuery Media Query

➡ 取代 CSS Media Query

➡ 以克服課堂所提的問題

同樣有對基礎的 element 做 “reset”

使⽤用 Less+ Framework  <link rel="stylesheet" href="reset.css" media="all" /> <link rel="stylesheet" href="fonts.css" media="all" /> <link rel="stylesheet" href="style.css" media="all" />  <link rel="stylesheet" href="10col.css" media="all" />  <link rel="stylesheet" href="10col.css" media="only screen and (min-width: 992px)" /> <link rel="stylesheet" href="8col.css" media="only screen and (min-width: 768px) and (max-width: 991px)" /> <link rel="stylesheet" href="3col.css" media="only screen and (max-width: 767px)" /> <link rel="stylesheet" href="5col.css" media="only screen and (min-width: 480px) and (max-width: 767px)" />Source: http://www.angrycreative.se/wordpress/plugins/less-framework/

總結“reset” + “base” 將成為 cross device 的重要技術

⼤大部份 UI Framework 都會進⾏行 “reset”

“base” 部份⺫⽬目前仍需由開發者⾃自⾏行處理

Cross device (⼋八屏) 的技術關鍵

➡ cross-device CSS grid system

Feature Detection & yepnope 載入器

⺫⽬目的負責實作 HTML5 標準的是瀏覽器

我們所製作的 HTML5 應⽤用程式會使⽤用到許多 HTML5 特⾊色

檢查⺫⽬目的瀏覽器是否⽀支援這些特⾊色 (features)

例如：WebSocket 的⽀支援性請參考 http://en.wikipedia.org/wiki/WebSocket

主要瀏覽器的 WebSocket ⽀支援Firefox 6 以後

Google Chrome 14 以後

Internet Explorer 10 Developer Preview 以後

Opera 11 以後⽀支援舊版 WebSocket 實作

Safari 5 以後⽀支援舊版 WebSocket 實作

iOS 4.2 以後⽀支援舊版 WebSocket 實作

Android 4.x 內建瀏覽器不⽀支援 WebSocket

使⽤用 yepnope Loader

關於 yepnope LoaderAn asynchronous conditional resource loader

Super-fast

Allows you to load only the scripts that your users need

➡ Load on demand

以⾮非同步⽅方式載⼊入 Javascript 或其它 resource，可增強 usability

Yep - yes, has, ok

Nope - no, doesn’t has, not ok

See more: http://yepnopejs.com

使⽤用 Modernizr

關於 Modernizr可協助開發者進⾏行 feature detection

可客製化 Javascript library

包含 yepnope loader

使⽤用 modernizr Library

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>A HTML5 Page</title><script src="modernizr.min.js"></script></head> <body>...</body> </html>

是否⽀支援 Canvas<!DOCTYPE html> <html><head><meta charset="utf-8"><title>A HTML5 Page</title><script src="modernizr.min.js"></script></head> <body><script>if (Modernizr.canvas) { alert("Your browser supports Canvas");} else { alert("Oh my god. Your need a good browser!");}</script></body> </html>

檢查 LocalStorage

if (Modernizr.localstorage) { // Good} else { // No good}

是否⽀支援 Web Workers

if (Modernizr.webworkers) { // Good} else { // No good}

Application Cache

if (Modernizr.applicationcache) { // Good} else { // No good}

Touch Events檢查瀏覽器是否⽀支援 touch event

➡ if (Modernizr.touch)

使⽤用 yepnode Loader不要使⽤用 <script> 來載⼊入 JavaScript

使⽤用 ‘yepnope’ Loader

10 window.addEventListener("load", function() { 11 12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]); 24 25 }, false);

Sync and Async

12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]);

JavaScript 教學(2)

使⽤用 Local Storage

使⽤用 Session Storage

input.value = sessionStorage.getItem("mytext") || "";

input.addEventListener("keyup", function() { sessionStorage.setItem("mytext", input.value);}, false);

</script>

關於 Web WorkersJavaScript threading

無法存取 DOM

可實作 “Message Handler”

不共⽤用資料

➡ 無法存取 Parent Thread 的資料

Web Worker 的⽤用法var worker = new Worker(“worker.js”);

worker.terminate();

worker.postMessage(“hello webworker”);

worker.onmessage(function(event) {});

➡ worker.addEventListener(“message”, function(event) {}, false);

See more: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

Web Worker 範例：計算 Prime<p>The highest prime number is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script>

// worker.js 1 var n = 1; 2 search: while (true) { 3 n += 1; 4 for (var i = 2; i <= Math.sqrt(n); i += 1) 5 if (n % i == 0) 6 continue search; 7 // found a prime! 8 postMessage(n); // Don’t use return 9 }

Prototype 的技術⾯面基於 JavaScript 的 Prototype 觀念

➡ JavaScript OO

直接在瀏覽器與 HTML DOM 裡⾯面加⼊入功能 (methods)

擴充 element 的原貌 (prototype)

與 jQuery pattern 有何不同？

➡ 延續第⼀一堂課

JavaScript 的 Prototype每個 JavaScript 物件都有⼀一個 “prototype” 屬性

JavaScript 引擎的實作並不提供 class 觀念

➡ 延續第⼀一堂課的觀念

➡ 使⽤用 function() 來表⽰示 class，再使⽤用 “new” 來取得 instance

➡ Constructor pattern 與 Factory method pattern

➡ 上述做法，class 並不具備 OOP (C++/Java) 的必要特性

因此，使⽤用 JavaScript 的 “prototype” 來模擬 class 的 OO 特性

Class 宣告 & Instance

function Person(name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };} var person = new Person("Jollen", "Software Developer");person.queryJob();

定義 Functional Object

var Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };}; var jollen = new Person("Jollen", "Software Developer");

jollen.queryJob();

動態加⼊入新的 Methodvar Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };};

Person.prototype.getName = function () { return this.name;}

var jollen = new Person("Jollen", "Software Developer");

jollen.queryJob(); // “Software Developer”jollen.getName(); // “Jollen”

改變的是 Prototype (Class)var Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };};

var jollen = new Person("Jollen", "Software Developer");

// 順序交換不改變其結果Person.prototype.getName = function () { return this.name;}

jollen.queryJob(); // “Software Developer”jollen.getName(); // “Jollen”

什麼要學 JavaScript PrototypePrototype 改變的是 “base object”

DOM 裡有許多 Function Object (class)

➡ 如何改變其 base object ?

使⽤用 JavaScript “prototype” 屬性

更簡單 “extend DOM’ 的⽅方式

➡ 使⽤用 prototype.js

引⼊入 Prototype.js

See more: http://prototypejs.org

使⽤用 Prototype.js加⼊入 prototype.js

➡ JavaScript prototype library

<scriptsrc="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js></script>

關於 Prototype.jsPrototype provides functions to make HTML DOM programming easier

Like jQuery, Prototype has its $() function

The $() function accepts HTML DOM element id values (or DOM elements), and adds new functionality to DOM objects

Unlike jQuery, Prototype has no ready() method to take the place of window.onload(). Instead, Prototype adds extensions to the browser and the HTML DOM

See more: http://www.w3schools.com/js/js_lib_prototype.asp

Prototype.js 範例<div id="watch"></div><script>var w = document.getElementById("watch");w.setAttribute(); // OK. DOM Element 裡的 method

// Prototype.js 的官方範例var MyUtils = { truncate: function(element, length){ element = $(element); return element.update(element.innerHTML.truncate(length)); }, updateAndMark: function(element, html){ return $(element).update(html).addClassName('updated'); }}; Element.addMethods(MyUtils); // Prototype.js 擴充 DOM

$('watch').truncate(100); // OK. 使用 Prototype 擴充了 Element$('watch').helloWorld(); // OK.w.helloWorld(); // OK. 呼叫 DOM</script>

See more: http://prototypejs.org

See more: http://www.w3schools.com/dom/dom_element.asp

實作 Drag and Drop

關於 Drag and DropHTML5 的正式標準

可⽀支援任何的 Element

直接實作

或使⽤用 jQuery UI 更為⽅方便

➡ 可將任何 Element 設定為 Draggable

使⽤用 Drag and Drop 標籤屬性

<!DOCTYPE HTML><html><head></head><body>

</body></html>

Source: http://www.w3schools.com/html/html5_draganddrop.asp

(target)

“div1”

ondragover

ondrop

實作 Taget 的 onDrop() 事件<script>function allowDrop(ev){ ev.preventDefault();}

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}</script>

Source: http://www.w3schools.com/html/html5_draganddrop.asp

prevent the browser default handling of the data (default is open as link on drop)(任何的 event callbacks 都有其 default 處理方式)

認識 jQuery 與 Javascript UI Framework

講師：Jack Sun

AgendaIntroduce jQuery

Concept

Hello jQuery

Examples

JavaScript UI Framework

Overview

Mobile Development

jQuery UI Examples

Sencha Touch UI Examples

Concept of jQueryClient side & Server side

Concept of jQueryJavaScript Foundations

HTML DOM – HTML Document Object Model

AJAX – Asynchronous JavaScript and XML

jQuery is the most popular

JavaScript library.

Hello jQueryWrite less, do more.

jQuery Examples<!doctype html><html><head> <meta charset=utf-8> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <style> .emphasis { font-weight: bold;} </style> <script> $(document).ready(function() { $('li:first-child').addClass('emphasis'); }); </script> </head><body><ul> <li>hello</li> <li>hello 2</li> <li>hello 3</li></ul></body></html>

JavaScript UI FrameworkWhat’s the different between…

jQuery

- Is a way to find stuff on a page and work with that stuff.

- Write less, do more, a JavaScript library.

jQuery UI

- Is a UI library that works with jQuery. (need jQuery)

jQuery Mobile

- Is a UI library for Mobile devices that works with jQuery as well. (need jQuery)

JavaScript UI FrameworkThe Alternatives for Mobile Development

Zepto (not fully support IE)

jqmobi / jqui

Use Cases :

jQuery + jQuery UI

jQuery + jQuery Mobile

Zepto/jQuery + jQTouch

jQuery/Zepto/Xui + Custom UI

Sencha Touch (commercial)

How about use all of these…

jQuery : 'libs/jquery/jquery-loader',Handlebars : 'libs/handlebars/handlebars-loader',Underscore : 'libs/underscore/underscore-loader',Backbone : 'libs/backbone/backbone-loader',WebSocket : 'libs/websocket-loader',order : 'libs/require/order-1.0.5',text : 'libs/require/text-1.0.7',domReady : 'libs/require/domReady-1.0.0',iScroll : 'libs/iscroll/iscroll-loader',PhoneGap : 'libs/phonegap/phonegap-loader',

如何應用 Bootstrap 製作 Responsive Website Design

AgendaIntroduce Bootstrap

What’s Bootstrap

File Structure

What’s Included

HTML Template

Example

Customize

Bootstrap Tutorial

Introduce BootstrapWhat’s Bootstrap

Introduce BootstrapFile Structure

Introduce BootstrapWhat’s included

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

Introduce BootstrapHTML Template

Introduce BootstrapExample

Introduce BootstrapCustomize

Bootstrap TutorialCreate a Responsive Design Blog using Bootstrap.

更多資訊請上 Go8Panel.com

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

Technology

Visual Studio 2012 で実現する HTML5 & マルチデバイス時代の Web 開発

HTML5プロフェッショナル認定試験レベル2 無料 …HTML5プロフェッショナル認定試験レベル1 所要時間：90 分（アンケート等の時間を含む）

HTML５時代に必要なスキルと考え方〜クリエイティブHTML5、DEMOで感じろ！！〜

HTML5的時代 Flash何去何從

HTML5 Ahora

Ejercicios HTML5

Industry trend of HTML5 in 2012 (2012년 HTML5 총정리)

HTML5 guide

HTML5 Geolocalizacion

HTML5? · HTML5 und CSS3 sind keine abgeschlossenen Speziﬁkationen. Die Implementation in Browsern ist noch lückenhaft. HTML5 + CSS3 + More = NEWT. HTML5 + CSS3 + More = NEWT SVG,

HTML5 講義 - ttrc.edu.t · 這是 html5 的基本樣版。在 style 區塊宣告的，都是在 html5 所新增的標籤，但為了暫時讓不支援

Html5 canvas

HTML5 - CORE · •¿Qué es HTML5? •El nuevo lenguaje HTML5 •Más información Contenido ¿QUÉ ES HTML5? ... var e = ("abbr,article,aside,audio,canvas,datalist,details," +

Guida Html5

Html5 Navegacion

HTML5 소개 및 배우기- HTML5 Open Conference

HTML5? HTML5!

Html5+js with game engine cocos2d-html5 분석 @KGC2012

HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?

HTML5 Handbuch

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

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