響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (rwd, responsive web design)...
TRANSCRIPT
2
OUTLINE
2
•HTML5 簡介
•何謂響應式網站設計
•如何編寫符合 HTML5 的檔案
•新增和廢除的 tag•如何製作相容於各瀏覽器的 HTML5網頁
3
HTML5 簡介
3
3
•HTML5 的發展史
•HTML4.0•HTML4.01→XHTML1.0•XHTML1.1 (W3C)•2004, WHATWG (Web Hypertext Application Technology Working Group)•2007, W3C, HTML WG, HTML5•2009/7 終止制定 XHTML2.0•WHATWG 估計「 HTML5 規格達到 W3C 的推薦標準」在 2022 年
4
HTML5 簡介
4
•HTML4 之前，主要用來定義Richtext 、 Hyperlink 的呈現。
•HTML5•繼承 HTML4•偏重 Web 應用程式
•更好的呈現內容
•HTML5 規範的全稱是 ” HTML5 －－ A Vocabulary and associated APIs for HTML and XHTML”
5
HTML5 特色
HTML5 標準還在制定中
取自網站
6
HTML5 市場接受度
YouTube 提供 HTML5 撥放器
Jobs 宣布放棄 flash電子書商 (Scribd) 往 HTML5 發展
– 所有電子書改以 HTML5 格式
– 電子書格式支援行動載具 ( 手機、平板 )
Amazon– Kindle 電子書改用 HTL5
73
行動化設備 – 新的參與方式 *
10 億
3 億 7 千 5 百萬至 2016 年平板數量將達到
至 2016 年智慧型手機數量將達到
61% 的 CIOs 將行設備列為優先
53% 的員工在工作時使用他們自己的設備
在台灣 –行動裝置 ( 平板或智慧型手機 ) 持有族群約佔 30.4%
預估臺灣智慧型手機普及率 至 2015 年將達 56.8%
截至 2012 年行動上網用戶數已破 650 萬戶
取自網站
8
手持設備也上網
新時代終端設備
– 智慧型手機– 平板電腦– 智慧型家電使用手持設備瀏覽網站一年成成長 1倍(2012 Q1~2013 Q1)不同的上網設備，如何提供多樣性的網頁 ?!
9
何謂 Responsive Web Design
響應式網頁設計 (Responsive Web Design)一種依瀏覽器、設備裝置、使用者能力(如視障使用者 )和螢幕方向，會自動調整解析度及大小，並呈現不同樣式的外觀和網頁內容
10
響應式設計 (RWD, responsive web design)
手機 /平板存取的多元設備網站• 對應設備的大小 /方向 ,
網頁設計自動調整
• 彈性的圖文版面配置及顯示
•透過 CSS 媒體查詢來啟 動不同的呈現效果
• 單一網站 /主題 /內容 支援多種設備顯示
• 多樣性的網站使用體驗
• 強化使用者的操作性
取自網站
11
行動應用發展的思考與策略 ??
•現有網站內容 ?
•雙重維護人力 ?
• Native App?
•目的與設計 ?
取自網站
12
相同內容 , 可依需求或設備不同, 而 有不同呈現樣式的選擇 .
主要效益 :• 單一應用程式及內容 , 維護容易
• 依前端設備不同提供最佳化顯 示效果
響應式資料呈現版面樣式支援多元設備顯示
取自網站
13取自網站
14
HTML5 特色
14
•HTML5 用於呈現 Web 應用程式的新增功能
•用於繪圖的 Canvas element•支援 Drag 、 Editable•Undo & Redo•擴充的 HTMLDOM API•離線儲存
•Web SQL 資料庫
•Web Workers 最佳化 JavaScript 執行
•Geolocation•……
15
HTML5 特色 (cont.)
15
HTML5 用於更好的呈現內容的新增元素
用於影音播放的 video 和 audio用於描述檔案結構的article 、 footer 、 header 、 nav 、 section新的表單控制項
16
HTML5 呈現型態
172014 年
20 年前網頁設計
15 年前Flash動畫
10 年前Java 程式跨平台
7 年前VS.NET 程式跨平台
2~3年前智慧型手機設計
方法 1：使用 Java 設計Android 手機
方法 2： 2012 年使用網頁方法來設計Android, iphone…各廠牌手機
歷年來網頁設計流行過什麼？
18
何謂 HTML5
廣義定義： HTML5 是由 HTML+ CSS+ JavaScript 所組成，目標就是減少瀏覽器對外掛程式的需求。
基礎技術：
– 使用 Html5 + CSS + javascript 進階技術：
– 使用 jquery + PhoneGap
19
HTML5 與 HTML4差異 (1)
語法簡化，例如文件型態定義：– HTML4
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
– HTML5• <!DOCTYPE html>
20
新增語意標籤，例如 <header> 、 <footer> 、 <section> 和 <article>– HTML5 的設計是要更好的描繪網站的結構，讓搜尋引擎更容易擷取到網頁重點
– 位置可自由搭配
HTML5 與 HTML4差異 (2)
21
HTML5 普及狀況
21
•瀏覽器的相容性•瀏覽器之間實作上的相容性也是 HTML5 的重要課題
•W3C 於 2010/11/02公佈 IE 、 Chrome 、 Firefox下一版本對 HTML5 的支援程度
•http://html5test.com/
22
FeatureInternet Explorer 9 Release Candidate
Chromium 9.0.597.94 (73967)
Firefox 4.0 Beta 11
WebKit Nightly Build r70732
Attributes 100% 100% 100% 100%Audio 100% 100% 100% 100%Video 100% 92.31% 76.92% 85.71%Canvas 95.57% 89.18% 84.09% 94.34%
Foreign Content 90.91% 90.91% 100% 100%
getElementsByClassName 83.33% 100% 88.89% 100%
XHTML 100% 50% 100% 42.86%
• 資料來源： http://test.w3.org/html/tests/reporting/report.htm2010/11/02
勝勝
勝 勝
勝勝
勝 勝
23
24
如何編寫符合 HTML5 的檔案
24
使用 XML語法編寫 HTML5 檔案
使用 HTML語法編寫 HTML5 檔案
25
使用 XML語法編寫 HTML5檔案
25
傳統使用 XHTML1.0 ，需在起始位置加入<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>HTML5只需要寫為<?xml version=“1.0” encoding=“UTF-8”?>
<html xmlns=“http://www.w3.org/1999/xhtml”>此寫法也直接指定編碼為 UTF-8 ，不需在 meta tag另外宣告
26
使用 XML語法編寫 HTML5檔案
26
•一個以 XML語法編寫的基本網頁
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>基本的 HTML5 檔－使用 XML</title></head><body>
<p>基本的 HTML5 檔內文－使用 XML</p></body></html>
27
使用 HTML語法編寫 HTML5檔案
27
•一個以 HTML語法編寫的基本網頁
<!doctype html><html><head>
<meta charset="UTF-8"><title>基本的 HTML5 檔－使用 HTML</title>
</head><body>
<p>基本的 HTML5 檔內文－使用 HTML</p></body></html>
28
廢除的 TAG
28
Tag名稱 替代方案
applet 改用 embed/object
dir ul
frame, frameset, noframes
改用 iframe與 CSS
isindex 用 form與文字欄位的組合
listing, xmp 改用 pre和 code
noembed 必須處理補救時，可以使用 object
plaintext 用 text/plian的 MIME type
rb 改用 ruby
bgsound audio
29
廢除的 TAG
29
•basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u•改用 CSS 設定
30
30
分類 •tag
•與文件結構有關
•section, article, aside, nav, footer, header, hgroup
•內嵌外部內容 •figure, video, audio, source, canvas, embed
•表單 •keygen, output, progress, meter, mark, ruby/rt/rp, time, command, details, datalist
新增的 TAG
31
描述內容結構的 TAGS
31
HTML5加入了 header, nav, section, article, aside, footer等的 tag 來描述頁面及檔案結構
這些 tag 對網頁 layout 不具任何意義，若要指定 layout ，需使用 CSS
32
描述內容結構的 TAGS
32
section： general 的 blockarticle：獨立的內容，如網誌本文、回應（例如可以做為 RSS傳送的一個單位）
aside：跟本文內容較無關，如網誌側欄其它文章的列表
nav：用來放網站其它頁面的連結
header 、 footer：與一般網站放置 title 、聯絡資料等習慣相同
33
如何製作相容於各瀏覽器的HTML5 網頁
33
將原有 div tag 中具有特別的意義的，如header 、 footer 、 article等，改以對應的 tag表示
在 HTML5 中，描述內容結構的新 tag其預設的 display值為 block ，因此為了在舊版瀏覽器可排出一樣的效果，要指定讓這些新 tag 的 CSS display屬性為 blockarticle, aside, figure, footer, header, hgroup, menu, nav, section{ display:block; }加入 HTML5shiv (http://code.google.com/p/html5shiv/)<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->使用 IETester 來驗證頁面是否在 IE6~IE9都相同
34
HTML5 Demo
目前 HTML5 的相關範例很多，但是並非所有的 Browser都支援 !!http://html5demos.com/
35
設計智慧型手機主要方法
(1).採用應用程式設計法：
–例如：使用 JAVA 程式來撰寫 android 手機程式。或是 Objective-C 和 Xcode 來撰寫 iphone 程式，或使用 Visual Studio VB.NET 和 silverlight 來撰寫微軟 Window Phone 手機程式。
–缺點：程式技術較困難，無法跨越各種平台、各種廠牌、各種解析度。
36
設計智慧型手機主要方法
(2).採用網頁程式設計方法：
– 使用 Html5+CSS+javascript ，結合jquery+PhoneGap 。
– 優點：網頁程式較為簡單，寫好的程式可以廣泛應用，可跨越各種平台、各種廠牌
37
採用網頁程式來設計手機
因為網頁程式較為簡單
寫好的程式可以廣泛應用，可跨越各種平台、各種廠牌
未來可能會造成大流行 !!