OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

Size: px

Start display at page:

Download "OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2"

崇惠
5 years ago
Views:

1 響應式網站設計簡介 Location: 東海大學電算中心 Speaker: 麥毅廷 Date:2015/03/08 Contact Info.:

2 OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

3 HTML5 簡介 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 年 3 3 3

4 HTML5 簡介 HTML4 之前, 主要用來定義 Richtext Hyperlink 的呈現 HTML5 繼承 HTML4 偏重 Web 應用程式更好的呈現內容 HTML5 規範的全稱是 HTML5 -- A Vocabulary and associated APIs for HTML and XHTML 4 4

5 HTML5 特色 HTML5 標準還在制定中取自網站 5

6 HTML5 市場接受度 YouTube 提供 HTML5 撥放器 Jobs 宣布放棄 flash 電子書商 (Scribd) 往 HTML5 發展所有電子書改以 HTML5 格式電子書格式支援行動載具 ( 手機平板 ) Amazon Kindle 電子書改用 HTL5 6

7 行動化設備新的參與方式 * 至 2016 年智慧型手機數量將達到 10 億至 2016 年平板數量將達到在台灣 3 億 7 千 5 百萬 61% 的 CIOs 將行設備列為優先 53% 的員工在工作時使用他們自己的設備行動裝置 ( 平板或智慧型手機 ) 持有族群約佔 30.4% 預估臺灣智慧型手機普及率至 2015 年將達 56.8% 截至 2012 年行動上網用戶數已破 650 萬戶取自網站 7 3

8 手持設備也上網新時代終端設備智慧型手機平板電腦智慧型家電使用手持設備瀏覽網站一年成成長 1 倍 (2012 Q1~2013 Q1) 不同的上網設備, 如何提供多樣性的網頁?! 8

9 何謂 Responsive Web Design 響應式網頁設計 (Responsive Web Design) 一種依瀏覽器設備裝置使用者能力 ( 如視障使用者 ) 和螢幕方向, 會自動調整解析度及大小, 並呈現不同樣式的外觀和網頁內容 9

10 響應式設計 (RWD, responsive web design) 手機 / 平板存取的多元設備網站對應設備的大小 / 方向, 網頁設計自動調整彈性的圖文版面配置及顯示透過 CSS 媒體查詢來啟動不同的呈現效果單一網站 / 主題 / 內容支援多種設備顯示多樣性的網站使用體驗強化使用者的操作性取自網站 10

11 行動應用發展的思考與策略?? 現有網站內容? 雙重維護人力? Native App? 目的與設計? 取自網站 11

12 響應式資料呈現版面樣式支援多元設備顯示相同內容, 可依需求或設備不同, 而有不同呈現樣式的選擇. 主要效益 : 單一應用程式及內容, 維護容易依前端設備不同提供最佳化顯示效果取自網站 12

13 取自網站 13

14 HTML5 特色 HTML5 用於呈現 Web 應用程式的新增功能用於繪圖的 Canvas element 支援 Drag Editable Undo & Redo 擴充的 HTMLDOM API 離線儲存 Web SQL 資料庫 Web Workers 最佳化 JavaScript 執行 Geolocation 14 14

15 HTML5 特色 (cont.) HTML5 用於更好的呈現內容的新增元素用於影音播放的 video 和 audio 用於描述檔案結構的 article footer header nav section 新的表單控制項 15 15

16 HTML5 呈現型態 16

17 歷年來網頁設計流行過什麼? 方法 2 : 2012 年使用網頁方法來設計 Android, iphone 各廠牌手機 20 年前網頁設計 15 年前 Flash 動畫 10 年前 Java 程式跨平台 7 年前 VS.NET 程式跨平台方法 1 : 使用 Java 設計 Android 手機 2~3 年前智慧型手機設計 2014 年 17

18 何謂 HTML5 廣義定義 : HTML5 是由 HTML+ CSS+ JavaScript 所組成, 目標就是減少瀏覽器對外掛程式的需求基礎技術 : 使用 Html5 + CSS + javascript 進階技術 : 使用 jquery + PhoneGap 18

19 HTML5 與 HTML4 差異 (1) 語法簡化, 例如文件型態定義 : HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML5 <!DOCTYPE html> 19

20 HTML5 與 HTML4 差異 (2) 新增語意標籤, 例如 <header> <footer> <section> 和 <article> HTML5 的設計是要更好的描繪網站的結構, 讓搜尋引擎更容易擷取到網頁重點位置可自由搭配 20

21 HTML5 普及狀況瀏覽器的相容性瀏覽器之間實作上的相容性也是 HTML5 的重要課題 W3C 於 2010/11/02 公佈 IE Chrome Firefox 下一版本對 HTML5 的支援程度

22 Feature Internet Explorer 9 Release Candidate Chromium (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% 勝勝 getelementsbyclass Name 勝 83.33% 100% 88.89% 100% 勝勝 XHTML 100% 50% 100% 42.86% 勝資料來源 : /11/02 22

23 23

24 如何編寫符合 HTML5 的檔案使用 XML 語法編寫 HTML5 檔案使用 HTML 語法編寫 HTML5 檔案 24 24

25 使用 XML 語法編寫 HTML5 檔案傳統使用 XHTML1.0, 需在起始位置加入 <!DOCTYPE html PUBLIC -//w3c//dtd XHTML 1.0 Strict//EN strict.dtd > HTML5 只需要寫為 <?xml version= 1.0 encoding= UTF-8?> <html xmlns= > 此寫法也直接指定編碼為 UTF-8, 不需在 meta tag 另外宣告 25 25

26 使用 XML 語法編寫 HTML5 檔案一個以 XML 語法編寫的基本網頁 <?xml version="1.0" encoding="utf-8"?> <html xmlns=" <head> <title> 基本的 HTML5 檔 - 使用 XML</title> </head> <body> <p> 基本的 HTML5 檔內文 - 使用 XML</p> </body> </html> 26 26

27 使用 HTML 語法編寫 HTML5 檔案一個以 HTML 語法編寫的基本網頁 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 基本的 HTML5 檔 - 使用 HTML</title> </head> <body> <p> 基本的 HTML5 檔內文 - 使用 HTML</p> </body> </html> 27 27

28 Tag 名稱 applet dir frame, frameset, noframes 替代方案改用 embed/object ul 改用 iframe 與 CSS 廢除的 TAG isindex listing, xmp noembed plaintext rb bgsound 用 form 與文字欄位的組合改用 pre 和 code 必須處理補救時, 可以使用 object 用 text/plian 的 MIME type 改用 ruby audio 28 28

29 廢除的 TAG basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u 改用 CSS 設定 29 29

30 新增的 TAG 分類與文件結構有關 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 30 30

31 描述內容結構的 TAGS HTML5 加入了 header, nav, section, article, aside, footer 等的 tag 來描述頁面及檔案結構這些 tag 對網頁 layout 不具任何意義, 若要指定 layout, 需使用 CSS 31 31

32 描述內容結構的 TAGS section : general 的 block article : 獨立的內容, 如網誌本文回應 ( 例如可以做為 RSS 傳送的一個單位 ) aside : 跟本文內容較無關, 如網誌側欄其它文章的列表 nav : 用來放網站其它頁面的連結 header footer : 與一般網站放置 title 聯絡資料等習慣相同 32 32

33 如何製作相容於各瀏覽器的 HTML5 網頁將原有 div tag 中具有特別的意義的, 如 header footer article 等, 改以對應的 tag 表示在 HTML5 中, 描述內容結構的新 tag 其預設的 display 值為 block, 因此為了在舊版瀏覽器可排出一樣的效果, 要指定讓這些新 tag 的 CSS display 屬性為 block article, aside, figure, footer, header, hgroup, menu, nav, section{ display:block; } 加入 HTML5shiv (  使用 IETester 來驗證頁面是否在 IE6~IE9 都相同 33 33

34 HTML5 Demo 目前 HTML5 的相關範例很多, 但是並非所有的 Browser 都支援!! 34

35 設計智慧型手機主要方法 (1). 採用應用程式設計法 : 例如 : 使用 JAVA 程式來撰寫 android 手機程式或是 Objective-C 和 Xcode 來撰寫 iphone 程式, 或使用 Visual Studio VB.NET 和 silverlight 來撰寫微軟 Window Phone 手機程式缺點 : 程式技術較困難, 無法跨越各種平台各種廠牌各種解析度 35

36 設計智慧型手機主要方法 (2). 採用網頁程式設計方法 : 使用 Html5+CSS+javascript, 結合 jquery+phonegap 優點 : 網頁程式較為簡單, 寫好的程式可以廣泛應用, 可跨越各種平台各種廠牌 36

37 採用網頁程式來設計手機因為網頁程式較為簡單寫好的程式可以廣泛應用, 可跨越各種平台各種廠牌未來可能會造成大流行!! 37

OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2 HTML5 網頁設計簡介 Location: 東海大學電算中心 Speaker: 麥毅廷 Date:2014/07/17 Contact Info.: wkb@wkb.idv.tw OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2 HTML5 簡介 HTML5 的發展史 HTML4.0 HTML4.01 XHTML1.0

OUTLINE HTML5 簡介 何謂響應式網站設計 如何編寫符合 HTML5 的檔案 新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2