響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (rwd, responsive web design)...
TRANSCRIPT
![Page 2: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/2.jpg)
2
OUTLINE
2
•HTML5 簡介
•何謂響應式網站設計
•如何編寫符合 HTML5 的檔案
•新增和廢除的 tag•如何製作相容於各瀏覽器的 HTML5網頁
![Page 3: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/3.jpg)
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 年
![Page 4: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/4.jpg)
4
HTML5 簡介
4
•HTML4 之前,主要用來定義Richtext 、 Hyperlink 的呈現。
•HTML5•繼承 HTML4•偏重 Web 應用程式
•更好的呈現內容
•HTML5 規範的全稱是 ” HTML5 -- A Vocabulary and associated APIs for HTML and XHTML”
![Page 5: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/5.jpg)
5
HTML5 特色
HTML5 標準還在制定中
取自網站
![Page 6: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/6.jpg)
6
HTML5 市場接受度
YouTube 提供 HTML5 撥放器
Jobs 宣布放棄 flash電子書商 (Scribd) 往 HTML5 發展
– 所有電子書改以 HTML5 格式
– 電子書格式支援行動載具 ( 手機、平板 )
Amazon– Kindle 電子書改用 HTL5
![Page 7: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/7.jpg)
73
行動化設備 – 新的參與方式 *
10 億
3 億 7 千 5 百萬至 2016 年平板數量將達到
至 2016 年智慧型手機數量將達到
61% 的 CIOs 將行設備列為優先
53% 的員工在工作時使用他們自己的設備
在台灣 –行動裝置 ( 平板或智慧型手機 ) 持有族群約佔 30.4%
預估臺灣智慧型手機普及率 至 2015 年將達 56.8%
截至 2012 年行動上網用戶數已破 650 萬戶
取自網站
![Page 8: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/8.jpg)
8
手持設備也上網
新時代終端設備
– 智慧型手機– 平板電腦– 智慧型家電使用手持設備瀏覽網站一年成成長 1倍(2012 Q1~2013 Q1)不同的上網設備,如何提供多樣性的網頁 ?!
![Page 9: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/9.jpg)
9
何謂 Responsive Web Design
響應式網頁設計 (Responsive Web Design)一種依瀏覽器、設備裝置、使用者能力(如視障使用者 )和螢幕方向,會自動調整解析度及大小,並呈現不同樣式的外觀和網頁內容
![Page 10: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/10.jpg)
10
響應式設計 (RWD, responsive web design)
手機 /平板存取的多元設備網站• 對應設備的大小 /方向 ,
網頁設計自動調整
• 彈性的圖文版面配置及顯示
•透過 CSS 媒體查詢來啟 動不同的呈現效果
• 單一網站 /主題 /內容 支援多種設備顯示
• 多樣性的網站使用體驗
• 強化使用者的操作性
取自網站
![Page 11: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/11.jpg)
11
行動應用發展的思考與策略 ??
•現有網站內容 ?
•雙重維護人力 ?
• Native App?
•目的與設計 ?
取自網站
![Page 12: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/12.jpg)
12
相同內容 , 可依需求或設備不同, 而 有不同呈現樣式的選擇 .
主要效益 :• 單一應用程式及內容 , 維護容易
• 依前端設備不同提供最佳化顯 示效果
響應式資料呈現版面樣式支援多元設備顯示
取自網站
![Page 13: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/13.jpg)
13取自網站
![Page 14: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/14.jpg)
14
HTML5 特色
14
•HTML5 用於呈現 Web 應用程式的新增功能
•用於繪圖的 Canvas element•支援 Drag 、 Editable•Undo & Redo•擴充的 HTMLDOM API•離線儲存
•Web SQL 資料庫
•Web Workers 最佳化 JavaScript 執行
•Geolocation•……
![Page 15: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/15.jpg)
15
HTML5 特色 (cont.)
15
HTML5 用於更好的呈現內容的新增元素
用於影音播放的 video 和 audio用於描述檔案結構的article 、 footer 、 header 、 nav 、 section新的表單控制項
![Page 16: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/16.jpg)
16
HTML5 呈現型態
![Page 17: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/17.jpg)
172014 年
20 年前網頁設計
15 年前Flash動畫
10 年前Java 程式跨平台
7 年前VS.NET 程式跨平台
2~3年前智慧型手機設計
方法 1:使用 Java 設計Android 手機
方法 2: 2012 年使用網頁方法來設計Android, iphone…各廠牌手機
歷年來網頁設計流行過什麼?
![Page 18: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/18.jpg)
18
何謂 HTML5
廣義定義: HTML5 是由 HTML+ CSS+ JavaScript 所組成,目標就是減少瀏覽器對外掛程式的需求。
基礎技術:
– 使用 Html5 + CSS + javascript 進階技術:
– 使用 jquery + PhoneGap
![Page 19: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/19.jpg)
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>
![Page 20: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/20.jpg)
20
新增語意標籤,例如 <header> 、 <footer> 、 <section> 和 <article>– HTML5 的設計是要更好的描繪網站的結構,讓搜尋引擎更容易擷取到網頁重點
– 位置可自由搭配
HTML5 與 HTML4差異 (2)
![Page 21: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/21.jpg)
21
HTML5 普及狀況
21
•瀏覽器的相容性•瀏覽器之間實作上的相容性也是 HTML5 的重要課題
•W3C 於 2010/11/02公佈 IE 、 Chrome 、 Firefox下一版本對 HTML5 的支援程度
•http://html5test.com/
![Page 22: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/22.jpg)
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
勝勝
勝 勝
勝勝
勝 勝
![Page 23: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/23.jpg)
23
![Page 24: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/24.jpg)
24
如何編寫符合 HTML5 的檔案
24
使用 XML語法編寫 HTML5 檔案
使用 HTML語法編寫 HTML5 檔案
![Page 25: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/25.jpg)
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另外宣告
![Page 26: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/26.jpg)
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>
![Page 27: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/27.jpg)
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>
![Page 28: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/28.jpg)
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
![Page 29: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/29.jpg)
29
廢除的 TAG
29
•basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u•改用 CSS 設定
![Page 30: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/30.jpg)
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
![Page 31: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/31.jpg)
31
描述內容結構的 TAGS
31
HTML5加入了 header, nav, section, article, aside, footer等的 tag 來描述頁面及檔案結構
這些 tag 對網頁 layout 不具任何意義,若要指定 layout ,需使用 CSS
![Page 32: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/32.jpg)
32
描述內容結構的 TAGS
32
section: general 的 blockarticle:獨立的內容,如網誌本文、回應(例如可以做為 RSS傳送的一個單位)
aside:跟本文內容較無關,如網誌側欄其它文章的列表
nav:用來放網站其它頁面的連結
header 、 footer:與一般網站放置 title 、聯絡資料等習慣相同
![Page 33: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/33.jpg)
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都相同
![Page 34: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/34.jpg)
34
HTML5 Demo
目前 HTML5 的相關範例很多,但是並非所有的 Browser都支援 !!http://html5demos.com/
![Page 35: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/35.jpg)
35
設計智慧型手機主要方法
(1).採用應用程式設計法:
–例如:使用 JAVA 程式來撰寫 android 手機程式。或是 Objective-C 和 Xcode 來撰寫 iphone 程式,或使用 Visual Studio VB.NET 和 silverlight 來撰寫微軟 Window Phone 手機程式。
–缺點:程式技術較困難,無法跨越各種平台、各種廠牌、各種解析度。
![Page 36: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/36.jpg)
36
設計智慧型手機主要方法
(2).採用網頁程式設計方法:
– 使用 Html5+CSS+javascript ,結合jquery+PhoneGap 。
– 優點:網頁程式較為簡單,寫好的程式可以廣泛應用,可跨越各種平台、各種廠牌
![Page 37: 響應式網站設計簡介 - wkb.idv.t · 10 響應式設計 (RWD, responsive web design) 手機/平板存取的多元設備網站 •對應設備的大小/方向, 網頁設計自動調整](https://reader030.vdocuments.net/reader030/viewer/2022040218/5e04f75b91d5c867413862fa/html5/thumbnails/37.jpg)
37
採用網頁程式來設計手機
因為網頁程式較為簡單
寫好的程式可以廣泛應用,可跨越各種平台、各種廠牌
未來可能會造成大流行 !!