Exam 98-375 HTML5 Application Development Fundamentals

今天要來談談…
名詞解釋

今天要來談談…
名詞解釋
好玩範例

Client可能原因
DNS => tw.yahoo.com /
123.456.789.111
DNS server 掛掉
http 80 port / https 443 port
ping / traceroute / nslookup…..

Server可能原因
防火牆
主機重開機失敗( Update )
通常累積1xxx小時不重開機
安全性漏洞? 靠防火牆
忘記開機… ( MIS 3R )

API
Application Programming Interfaces
我們講好，如果你要提款，你跟我講你的帳
號密碼跟提款金額，我就給你錢
爾後，每次都要給這三個資料才成立
3rd
Third party component
別的個人、團隊或組織已經寫好一些功能，
可能免費、授權金或買斷方式提供使用

講正經的
我們來聊聊HTML5 !!

HTML5 - WIKI
HTML5 = HTML 第5版
Developed byWorld Wide Web
Consortium (W3C) and WHATWG
29 October 2014 ( 1997 ~ 2014 )

HTML5 - W3C
HTML5 is the latest HTML standard. It
walks hand in hand with CSS3, the
latest CSS standard.
* W3C 一個制訂網頁相關標準的組織

HTML5 -當約束沒有強制力…

HTML5 -流覽器大戰
Net Applications

HTML5 -特殊情況
政府機關專案
中國市場

HTML5 -補強
HTML5的支援差異，由Framework補強，
甚至增加自己的特色功能
Javascript 相容: JQuery.
CSS相容: JQuery UI.
Responsive Web
Mobile App

HTML5 -迷思1
HTML5 是全新產品X
去蕪存精，大部分語法跟HTML4都還通用
簡化過去繁瑣的語法
增加之前需要第三方元件的支援

HTML5 -迷思2
HTML5 跟APP沒直接關聯，但是因為推
出時間，大家都習慣行動上網，所以以為
手機上的APP跟HTML5有關聯
* 有Hybrid的方式，稍後說明!

HTML5 -迷思3
HTML5 本身不包含JS (Javascript)跟CSS3
整合更密切
通常，單一無法發揮全部效用

HTML5 - W3C
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of
web pages

HTML5 -其實….
HTML5相關考試，通常就涵蓋
HTML基本語法
好朋友JS (Javascript) / CSS3
甚至進化過的JQuery / JQuery UI
彼此整合時，該如何使用
瀏覽網頁時，HTML5、JS跟CSS3之間互動

HTML5 - HTML基礎
<html>
<br>
<ol>
<li>
<table>
<div>
<hr>
<meta>
<xxxx> </xxxxx> 成對出現, 少結尾會出現錯誤

HTML5 - HTML基礎
<Tag A>
<Tag B>
</ Tag B>
</ Tag A>

HTML5 – 精簡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 -New Elements
New semantic elements like <header>,
<footer>, <article>, and <section>.

HTML5 -New Elements
New form controls like number, date,
time, calendar, and range.

HTML5 -New Elements
New graphic elements: <svg> and
<canvas>.

HTML5 -New Elements
New multimedia elements: <audio> and
<video>

HTML5 - New API
HTML Geolocation

HTML5 - New API
Drag and Drop

HTML5 - New API
Local Storage
部分資料先存在Client，免得我
每次都要跟Server要資料占頻寬
* 比Cookie存的資料更複雜且多

HTML5 - New API
Application Cache
類似Local Storage，存在Client
記憶體中，不需要跟Server取資
料，可離線時繼續看
*即時性低的資料才用

HTML5 - New API
Web Workers
通常網頁要等全部執行完畢才
可以操作，萬一要更新，又必須
要在等一次，透過這機制，可在
不影響操作情況下，繼續更新資
料
*AJAX概念

HTML5 - New API
SSE
Receive Server-Sent Event
Notifications
Server有更新資料，通知Client，
Client就不需要一直去問好了沒!
*Node.js

JS
JavaScript to program the behavior of
web pages
網頁的互動師

JS
滑鼠移過去Click
點著拖拉
手指頭縮放
點按鈕跳出提醒視窗
驗證表單輸入是否正確
畫面上的連動效果( 點按鈕，跳出選單)

JS Framework (套件)
每次都調相容，不如我寫一次，以後套用
把常用程式片段包起來，方便使用
增加功能，或整合其他套件
開發者自己的特色
針對Mobile
主推輕量化
有自家的UI設計

JS -功能越多，套件越肥大
JQuery (HTML4開始，歷史悠久，信用
保證)
Angular JS (輕量，Google主推)
Backbone.js
Node.js
…

CSS (Cascading Style Sheets)
階層式樣式表

CSS to specify the layout of
web pages
網頁的化妝師

CSS3-Three Ways to Insert
External style sheet
Internal style sheet
Inline style

CSS3-Three Ways to Insert 1/3
External style sheet

Internal Style Sheet

Inline Styles

CSS3-Relative Position ( 相對定位)

CSS3-Absolute Position ( 絕對定位)

CSS3-Float Position ( 浮動定位)

CSS3-Modules
CSS3 has been split into "modules". It contains the
"old CSS specification" (which has been split into
smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS-Hack
/* IE6 and below */ * html #uno { color: red }
/* IE7 */ *:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */ html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body
#cuatro { color: red }
/* Opera 9.27 and below, safari 2 */ html:first-child #cinco
{ color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child
#seis { color: red }

CSS3-Hack
-moz-box-shadow:0 3px 6px rgba(0, 0, 0,
0.25); -moz-transform:rotate(-5deg);
-webkit-box-shadow:0 3px 6px rgba(0, 0,
0, 0.25);
-webkit-transform:rotate(-5deg);
-ms-transform: rotate(7deg); /* IE 9 */

說點543
HTML5 in Mobile ( Mobile Web )
HTML5 vs Flash
RWD (Responsive web design)

HTML5 in Mobile 優點
既有工程師轉移成本低
開發時程相對快
跨裝置(iOS、Android、Windows Phone)

HTML5 in Mobile 缺點
效能
操作經驗不如Native-App順暢
缺乏新功能(iOS更新, Android更新)

HTML5 in Mobile 缺點
不是不好，是太早用

說點543
HTML5 in Mobile ( Mobile Web )
HTML5 vs Flash
RWD (Responsive web design)
響應式網頁設計

Exam 98-375 HTML5 Application Development Fundamentals

Exam 98-375 HTML5 Application Development Fundamentals

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Exam 98-375 HTML5 Application Development Fundamentals

Similar to Exam 98-375 HTML5 Application Development Fundamentals (20)

Exam 98-375 HTML5 Application Development Fundamentals

Editor's Notes