A. What the morden web app is(characteristics):
1. eye-candy(visually stunning) --> 很炫(實際上也讓使用經驗變好)的視覺特效( rich, immersive experiences on the web)
ex: Drag & Drop, 圓角框, 陰影, 倒影, Resizable, Tabs, Slide bar, Slide effect...
2. more responsive(interactive ) --> 借助javascript這種在client side執行的腳本語言 ex: Ajax
B. HTML 一開始被設計的目的: HyperText Markup Language
--> a system for CERN(European Organization for Nuclear Research) researchers to use and share documents (physicist Tim Berners-Lee)
後來 web app 的概念出現, 因為其具有 隨時隨地(只要能上網) 不須額外安裝 不需更新 不佔儲存空間
資料無須同步 等優點
開始受到歡迎(ex: outlook --> gmail ) 網路應用越來越被要求必須和桌面應用程式具有相同的特點(a web application that has many of the characteristics of desktop applications) --> RIA(Rich Internet Application)的概念
--> HTML 被拿來做超出他本來設計要做的事情, 所以我們大量依賴javascript 函式庫, 像是: Prototype, jQuery, Dojo, Ext JS, Mootools, YUI, 這樣除了會造成執行js效率不高的瀏覽器在使用經驗上不好, 在載入頁面時, 也必須載入額外的檔案(從數十KB到數百KB都有), 對頻寬不高的用戶是一大負擔
順便分享一些javascript framework 比較 http://www.cnblogs.com/oomusou/archive/2008/07/05/javascript_framwork_introduction.html
C. http://www.w3schools.com/html5/html5_intro.asp
HTML5 is the next generation of HTML.
D. HTML 5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再於2007年獲W3C接納，並成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發布。WHATWG表示該規範是目前仍在進行的工作，仍須多年的努力。目前Firefox、Google Chrome、Opera及Safari（版本 4 以上）已有支援HTML5技術。
--> 由此敘述得知, html5是將web application development 正式納入設計考量的第一代html標準
E. HTML 5是HTML下一個的主要修訂版本，現在仍處於發展階段。目標是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，並且提供更多能有效增強網路應用的標準集。(from wikipedia: http://zh.wikipedia.org/zh-tw/HTML5)
F. What is HTML5?
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
The previous version of HTML came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
A. Some of the most interesting new features in HTML5(from W3Schools http://www.w3schools.com/html5/html5_intro.asp) 粗分幾大項:
- The canvas element for drawing
- The video and audio elements for media playback
- Better support for local offline storage
- New content specific elements, like article, footer, header, nav, section
- New form controls, like calendar, date, time, email, url, search
這裡有詳細的整理: http://www.w3schools.com/html5/html5_new_elements.asp
三. 應用面:
A. 最令我個人興奮的功能及其應用範例:
1. Local Storage: 無限期的在client side 保存資料
a. 允許離線存取, 在有網路時再將更新資料同步回server side
b. 網頁回應性強(因存取資料的接口現在改成了client side, 有點像多了一層快取)
c. 可在不需server支援下開發app, 加速開發流程, 要做一個會動的MVP也變得更簡單
(前端人員一人便可做到好)
intro: http://www.html5rocks.com/features/storage
http://www.html5rocks.com/tutorials/offline/storage/
sample code & demo: http://slides.html5rocks.com/#web-storage
2. Cross Domain Communication: 對於像是Tagtoo這種強調跨網站的應用很重要, 我們需要在第三方網域存取Tagtoo server的資料
intro: http://stevehanov.ca/blog/index.php?id=109
sample code: http://playground.html5rocks.com/#postmessage
demo: http://html5demos.com/postmessage2
延伸主題: http://www.html5rocks.com/tutorials/websockets/basics/ ( websockets: Low Latency Client-Server and Server-Client Connections)
3. Local File Access: 現在web app終於可以和桌面應用使用類似的方式處理上傳/下載檔案了!
intro: http://www.html5rocks.com/features/file
sample code: http://playground.html5rocks.com/#drag_from_desktop
demo: http://html5demos.com/file-api , http://studio.html5rocks.com/#Photos
其它視覺上的酷炫效果:
1. Device Orientation: 可以用這個做手機小遊戲 http://slides.html5rocks.com/#slide-orientation
2. HTML5 support native browser DnD(Drag and drop) : http://slides.html5rocks.com/#drag-and-drop
3. 超出顯示範圍就自動截段文字: http://slides.html5rocks.com/#text-wrapping
4. 雙色字: http://slides.html5rocks.com/#css-stroke
5. 經典的圓角框: http://slides.html5rocks.com/#rounded-corners
6. 陰影: http://slides.html5rocks.com/#css-shadow
7. 轉置: http://slides.html5rocks.com/#css-transforms
8. 2D 3D向量圖(SVG) 畫布: http://slides.html5rocks.com/#graphics-multimedia-title
沒有留言:
張貼留言