課程名稱：八屏一雲時代來臨教你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)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.

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

1

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

2

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

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

Under the following conditions:
• Attribution — You must attribute the work in the manner speciﬁed 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.


3

使用 JavaScript 製作動畫：
使用 GreenSock



4


GreenSock


5


GSAP
GreenSock Animation Platform (GSAP)

使⽤用 JavaScript


6


Tool Suite
TweenLite

TweenMax

TimelineLite

TimelineMax


7


Crazy Fast


8


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

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


9


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

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

可單獨執⾏行

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

可與 jQuery 搭配使⽤用

➡ 建議只將 jQuery 做為 selector

➡ 不使⽤用 jQuery 的 animation 功能


10

使⽤用 TweenLite


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


11


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

<script>
window.onload = function(){
var logo = document.getElementById("logo");
TweenLite.to(logo, 1, {css:{left:"632px"}});
}
</script>

Source: http://www.greensock.com


12


TweenLite.to()

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



13


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)



14


Use jQuery Selector
<div id="demo">
</div>

green = document.getElementById("green");

TweenLite.to($(".box"), 1, {css:{scale:0.2, opacity:0.3}});

jQuery Selector



15


Event Callbacks
onStart

onUpdate

onComplete

onReverse

onReverseComplete



16


Use Event Callbacks
var logo = document.getElementById("logo"),
updateOutput = document.getElementById("updateOutput"),
completeOutput = document.getElementById("completeOutput"),
updateCount = 0;

TweenLite.to(logo, 2, {css:{left:"300px"},
onUpdate:updateHandler,
onComplete:completeHandler,
onCompleteParams:["animation complete!"]});

function updateHandler() {
updateCount++;
updateOutput.innerHTML = "onUpdate ﬁred " + updateCount;
}

function completeHandler(message) {
completeOutput.innerHTML = "onComplete ﬁred <br/> completeParams = " + message;
}



17


Control Playback
play(), play(5)

pause()

resume()

reverse(), reverse(1)

seek(), seek(3)

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

restart()



18

使⽤用 EasePack


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




19


Call restart() Method
<div id="demo">
<div id="logo"></div>
</div>
<input type="button" id="restartBtn" value="restart animation">

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

restartBtn.onclick = function() {
tween.restart();
}



20


TweenMax
從 TweenLite 升級到 TweenMax

更多的 Animation 功能

並⽀支援許多 plugins

➡ CSSPlugin

➡ BezierPlugin

➡ RoundPropsPlugin



21

使⽤用 TweenMax



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

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

set repeat Tween will smoothly reverse direction
each time it repeats



22


使⽤用 Stagger
staggerTo()

staggerFrom()



23


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

green = document.getElementById("green"),
The fourth parameter called stagger sets the
blue = document.getElementById("blue"),
amount of time that will transpire between the
pink = document.getElementById("pink"), start of each animation.
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);

Source: http://www.greensock.com Inc. All Rights Reserved.
Copyright (C) 2013 Moko365

24


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

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

將多個動畫群組化 (group)

並視為 single tween 來控制

可將 playback control 使⽤用於 Timeline 群組


25


實例化 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>


26


使⽤用 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")


27


TimelineMax
如同 TweenLite 與 TweenMax 的關係

TimelineMax 可⽀支援

➡ set repeat

➡ yoyo

➡ currentLabel()

➡ getLabelAfter()

➡ getLablesArray()

➡ tweenFromTo()


28

多屏 Layout & CSS 定義：
Adaptive CSS Framework



29


Less Framework 4


30


課程回顧


31


adapt.js
前次課程使⽤用

替代 CSS Media Query

➡ 有瀏覽器相容性問題

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


32


使⽤用 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>

33


認識 Less Framework 4
CSS 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


34


4 Layouts


35


使⽤用 Less Framework 4


36


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

➡ html, body, div, span ...

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

➡ 請參考第⼀一堂課介紹

➡ Cross browser and cross devices

使⽤用 “px” 較不合適

➡ 請參考第⼀一堂課介紹

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


37


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

@media only screen and (min-width: 480px) and (max-width: 767px) {

body {
width: 436px;
padding: 36px 22px 48px;
}

}

38


技術細節：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 {

}


39


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

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

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

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


40


Less+ Framework

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


41


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

Less Framework 4 的⼀一個擴充插件

改⽤用 jQuery Media Query

➡ 取代 CSS Media Query

➡ 以克服課堂所提的問題

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


42

使⽤用 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/


43


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

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

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

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

➡ cross-device CSS grid system


44

Feature Detection & yepnope 載入器



45


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

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

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


46


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


47


主要瀏覽器的 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


48


使⽤用 yepnope Loader


49


關於 yepnope Loader
An 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


50


使⽤用 Modernizr


51


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

可客製化 Javascript library

包含 yepnope loader


52


使⽤用 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>


53


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


54


檢查 LocalStorage

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


55


是否⽀支援 Web Workers

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


56


Application Cache

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


57


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

➡ if (Modernizr.touch)


58


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

<head>
<title>NO Game</title>
<script src="loader.js"></script>
...
</head>


59


使⽤用 ‘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);


60


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 ]);


61

JavaScript 教學(2)



62


使⽤用 Local Storage

<textarea id="input"></textarea>

<script>
var input = document.getElementById("input");

input.value = localStorage.getItem("mytext") ¦¦ "";

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

</script>


63


使⽤用 Session Storage

<textarea id="input"></textarea>

<script>
var input = document.getElementById("input");

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

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

</script>


64


關於 Web Workers
JavaScript threading

無法存取 DOM

可實作 “Message Handler”

不共⽤用資料

➡ 無法存取 Parent Thread 的資料


65


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


66


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}


67


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

➡ JavaScript OO

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

擴充 element 的原貌 (prototype)

與 jQuery pattern 有何不同？

➡ 延續第⼀一堂課


68


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

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

➡ 延續第⼀一堂課的觀念

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

➡ Constructor pattern 與 Factory method pattern

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

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


69


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();


70


定義 Functional Object

var Person = function (name, job) {
this.name = name;
this.job = job;
alert(this.job);
};
};

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

jollen.queryJob();


71


動態加⼊入新的 Method
this.name = name;
this.job = job;
alert(this.job);
};
};

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


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


72


改變的是 Prototype (Class)
this.name = name;
this.job = job;
alert(this.job);
};
};


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

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


73


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

DOM 裡有許多 Function Object (class)

➡ 如何改變其 base object ?

使⽤用 JavaScript “prototype” 屬性

更簡單 “extend DOM’ 的⽅方式

➡ 使⽤用 prototype.js


74


引⼊入 Prototype.js

See more: http://prototypejs.org


75


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

➡ JavaScript prototype library

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


76


關於 Prototype.js
Prototype 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


77


Prototype.js 範例
See more: http://www.w3schools.com/dom/dom_element.asp
<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');
}
See more: http://prototypejs.org
};

Element.addMethods(MyUtils); // Prototype.js 擴充 DOM

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

78

實作 Drag and Drop



79


關於 Drag and Drop
HTML5 的正式標準

可⽀支援任何的 Element

直接實作

或使⽤用 jQuery UI 更為⽅方便

➡ 可將任何 Element 設定為 Draggable


80


使⽤用 Drag and Drop 標籤屬性
<!DOCTYPE HTML> div1
<html>
<head> (target) ondrop
</head>
<body> ondragover

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">

</body>
</html>

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


81


實作 Taget 的 onDrop() 事件
<script>
Source: http://www.w3schools.com/html/html5_draganddrop.asp
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
prevent the browser default handling of the data
(default is open as link on drop)
function drop(ev) (任何的 event callbacks 都有其 default 處理方式)

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

82

講師：Jack Sun

認識 jQuery 與 Javascript UI Framework



83


Agenda
Introduce jQuery
Concept

Hello jQuery

Examples

JavaScript UI Framework
Overview

Mobile Development

jQuery UI Examples

Sencha Touch UI Examples


84


Concept of jQuery
Client side & Server side


85


Concept of jQuery
JavaScript Foundations
HTML DOM
– HTML Document Object Model

AJAX
– Asynchronous JavaScript and XML

jQuery is the most popular

JavaScript library.


86


Hello jQuery
Write less, do more.

<script src=“http://code.jquery.com/jquery-
latest.min.js”></script>


87

<!doctype html>
<html>
<head>
jQuery Examples
<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:ﬁrst-child').addClass('emphasis');
});
</script>
</head>
<body>
<ul>
<li>hello</li>
<li>hello 2</li>
<li>hello 3</li>
</ul>

</body> 88
</html>


What’s the different between…
jQuery

- Is a way to ﬁnd 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)


89


The Alternatives for Mobile Development

Zepto (not fully support IE)

Xui How about use all of these…

jqmobi / jqui jQuery

: 'libs/jquery/jquery-loader',
Handlebars
: 'libs/handlebars/handlebars-
Use Cases : loader',
Underscore
: 'libs/underscore/underscore-
jQuery + jQuery UI loader',
Backbone
: 'libs/backbone/backbone-loader',
jQuery + jQuery Mobile WebSocket
: 'libs/websocket-loader',
order

: 'libs/require/order-1.0.5',
Zepto/jQuery + jQTouch text

: 'libs/require/text-1.0.7',
domReady
: 'libs/require/domReady-1.0.0',
jQuery/Zepto/Xui + Custom UI
iScroll

: 'libs/iscroll/iscroll-loader',
PhoneGap
: 'libs/phonegap/phonegap-loader',
Sencha Touch (commercial)


90

如何應用 Bootstrap 製作 Responsive Website Design



91


Agenda
Introduce Bootstrap
What’s Bootstrap

File Structure

What’s Included

HTML Template

Example

Customize

Bootstrap Tutorial


92


Introduce Bootstrap
What’s Bootstrap


93


Introduce Bootstrap
File Structure


94


Introduce Bootstrap
What’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.


95


Introduce Bootstrap
HTML Template


96


Introduce Bootstrap
Example


97


Introduce Bootstrap
Customize


98


Bootstrap Tutorial
Create a Responsive Design Blog using Bootstrap.


99

更多資訊請上 Go8Panel.com

100

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

More Related Content

What's hot (20)

Viewers also liked (14)

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

More from Jollen Chen (17)

Recently uploaded (20)