HTML5 and the Future of the Mobile Web
-
Upload
wonsuk-lee -
Category
Documents
-
view
2.069 -
download
4
description
Transcript of HTML5 and the Future of the Mobile Web
![Page 1: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/1.jpg)
HTML5 and The Future of the Mobile WebHTML5 and The Future of the Mobile Web- Next Generation Mobile Web -
![Page 2: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/2.jpg)
Overall Circumstance of the Internet is changing ...
22
![Page 3: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/3.jpg)
Smartphone > PC Shipments Within 2 YearsSmartphone > PC Shipments Within 2 Years
33
![Page 4: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/4.jpg)
Mobile Users > Desktop Internet Users Within 5 YearsMobile Users > Desktop Internet Users Within 5 Years
44
![Page 5: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/5.jpg)
Smartphone > Feature Phone Shipments Within 1 Year Smartphone > Feature Phone Shipments Within 1 Year
55
![Page 6: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/6.jpg)
Increasingly, Mobile Phone Usage is About Data, Not VoiceIncreasingly, Mobile Phone Usage is About Data, Not Voice
66
![Page 7: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/7.jpg)
Change of Mobile Content Consumption in SmartphoneChange of Mobile Content Consumption in Smartphone
77
![Page 8: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/8.jpg)
Why HTML5 is important in the Mobile ?
88
![Page 9: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/9.jpg)
Position of Major IT CompaniesPosition of Major IT Companies� “We're betting big on HTML 5.” — Vic Gundotra, Google� “The world is moving to HTML5.” — Steve Jobs, Apple� “The future of the web is HTML5.”— Dean Hachamovitch, Microsoft99
![Page 10: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/10.jpg)
1010
![Page 11: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/11.jpg)
1111
![Page 12: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/12.jpg)
(Reference) Comparison of Features among the Smartphone Platforms(Reference) Comparison of Features among the Smartphone Platforms
1212
![Page 13: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/13.jpg)
New Computing Cycles – 10x More Devices New Computing Cycles – 10x More Devices
1313
![Page 14: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/14.jpg)
What is the HTML5?
1414
![Page 15: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/15.jpg)
Change of Circumstances: The Web Platform is AcceleratingChange of Circumstances: The Web Platform is Accelerating
1515[ Source : Brad Neuberg ]
![Page 16: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/16.jpg)
Change of Circumstances : And It’s Solving Key Developer ChallengesChange of Circumstances : And It’s Solving Key Developer Challenges
1616[ Source : Brad Neuberg ]
![Page 17: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/17.jpg)
Change of Circumstances: More DevelopersChange of Circumstances: More Developers
1717[ Source : Brad Neuberg ]
![Page 18: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/18.jpg)
Change of Circumstances: More UsersChange of Circumstances: More Users
1818[ Source : Brad Neuberg ]
![Page 19: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/19.jpg)
Change of Circumstances: More SpeedChange of Circumstances: More Speed
1919[ Source : Brad Neuberg ]
![Page 20: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/20.jpg)
HTML TimelineHTML Timeline
2020[ Source : Appleinsider ]
![Page 21: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/21.jpg)
What is HTML5 ?What is HTML5 ?Structure and Semantic APIs
2121
![Page 22: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/22.jpg)
HTML5 Basic StructureHTML5 Basic Structure� Common structures� Differentiation & Style. How about Semantic?� What is the potential of new elements?
� E.g. Search engine, etc
2222[ HTML4] [ HTML5]
![Page 23: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/23.jpg)
New Elements in HTML5New Elements in HTML5� New Markup Elements – for better structure
� <article>, <aside>, <command>, <details>, <summary>, <figure>, <figcaption>, <footer>, <header>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <rp>, <section>, <time>� New Media Elements – for media content
� <audio>, <video>, <source>, <embed>� The Canvas Element – for drawing
� <canvas>� New Form Elements and Input type attribute values
� <datalist>, <keygen>, <output>� New input type attribute values: email, url, number, range, date, month, week, time, datetime, datetime-local, search, color, etc2323
![Page 24: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/24.jpg)
Web FormsWeb Forms� Placeholder text
� An autofocus attribute
2424
![Page 25: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/25.jpg)
Web FormsWeb Forms
2525
![Page 26: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/26.jpg)
Web FormWeb Form� Validation of input value
2626
![Page 27: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/27.jpg)
(Reference) HTML5 elements(Reference) HTML5 elements
28 New Elements are added&
2727
&7 elements are changed
![Page 28: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/28.jpg)
HTML5 FeaturesHTML5 FeaturesCanvas / SVG
Video / Audio
Geolocation
Web Socket
Local Storage
Web Workers
2828
Geolocation
Offline web apps More features …
Web SQL Database
Web Workers
![Page 29: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/29.jpg)
CanvasCanvas� What is Canvas ?
� Dynamic and interactive graphics� Draw images using 2D drawing API•Lines, curves, shapes, fills, etc.� Useful for Graphs, Applications, Games, etc.
2929
[ http://canvaspaint.org/ ][http://www.liquidx.net/plotkit/ ] [http://www.benjoffe.com/code/demos/canvascape/]
![Page 30: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/30.jpg)
SVGSVG� What is SVG ?
� Scalable Vector Graphic� HTML-like tags for drawing
3030
![Page 31: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/31.jpg)
Video/AudioVideo/Audio� Embedding multimedia will get easier through the user of tags like <audio> and <video>
3131
![Page 32: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/32.jpg)
Video/Audio: CodecVideo/Audio: Codec
3232<Source: Dive into html5>
![Page 33: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/33.jpg)
Audio/Video: StreamingAudio/Video: Streaming� HTTP adaptive streaming would be cool for mobile device
� HTTP Live Streaming by Apple, on the iPhone� IIS Smooth Streaming by Microsoft for Silverlight� Dynamic streaming in Adobe Flash Player 10.1� What about browsers that will support WebM?� Skyfire does the adaptation on-the-fly
3333
![Page 34: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/34.jpg)
GeolocationGeolocation� Geolocation API
� brings browser-based location to your appsnavigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lon = position.coords.longitude;showLocation(lat, lon);}
3434
});
![Page 35: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/35.jpg)
Offline Web AppsOffline Web Apps� Web apps need to work everywhere
� Database and app cache store user data and app resources locally3535
![Page 36: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/36.jpg)
Web SQL DatabaseWeb SQL Database� Databases right in the browser� Around 5MB per domain� Accessible across tabs and windows� Based on SQLite� Features: Transaction, SQL queries
var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);
3636
var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);
function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction(function (tx) {tx.executeSql(
"INSERT INTO WebKitStickyNotes "+ "(id, note, timestamp, left, top, zindex) "+ "VALUES (?, ?, ?, ?, ?, ?)",[id, text, timestamp, left, top, zIndex]);
});
}
![Page 37: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/37.jpg)
Web StorageWeb Storage� Key/value pair (hash) storage� Hash-based storage of strings (not objects).� 10 MB per zone.� Two kinds:
� sessionStorage:•Die when browser closes•Die when browser closes•Not shared between tabs� localStorage•Crash-safe•Shared BW tabs / windows and sessions – but not zones.3737
![Page 38: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/38.jpg)
Web SocketsWeb Sockets� TCP for the Web� a next-generation bidirectional communication technology for web applications
if ("WebSocket" in window) {var ws = new WebSocket("ws://example.com/service");ws.onopen = function() {
3838
ws.onopen = function() {// Web Socket is connected. You can send data by send() method.
ws.send("message to send"); ....};ws.onmessage = function (evt) { var received_msg = evt.data; ... };ws.onclose = function() { // websocket is closed. };
} else {// the browser doesn't support WebSocket.}
![Page 39: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/39.jpg)
Web SocketsWeb Sockets� HTML5 Web Sockets and the Need for Speed!
� http://www.kaazing.com/blog/?p=301� http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )3939
The Web Sockets experience is 55 times faster than XHR
![Page 40: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/40.jpg)
Web WorkersWeb Workers� API for running background scripts� Threads for Web apps� Useful for gaming, graphics, crypto and etc.
4040
![Page 41: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/41.jpg)
Web FontsWeb Fonts
4141
![Page 42: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/42.jpg)
Browser SupportBrowser Support
4242
![Page 43: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/43.jpg)
Standardization Activity related with HTML5Standardization Activity related with HTML5� W3C WGs related with HTML5
� HTML WG•HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etc� Web Applications WG•Web Storage, Indexed Database API, File API, Server-Sent •Web Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etc� Device APIs and Policy WG•Calendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etc� Geolocation WG•Geolocation API, DeviceOrientation Event, Acceleration4343
![Page 44: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/44.jpg)
W3C HTML WGW3C HTML WG� Milestones ( This schedule was removed )
� 2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review� 2007-11 HTML Design Principles First Public Working Draft� 2008-02 HTML5 First Public Working Draft� 2010-01 HTML5 Last Call Working Draft� 2010-12? HTML5 Candidate Recommendation� 2010-12? HTML5 Candidate Recommendation� 2012-01? HTML5 Proposed Recommendation� 2012-03? HTML5 Recommendation
� Participants� 407 group participants,� 407 in good standing,� 140 participants from 37 organizations� 267 Invited Experts4444
![Page 45: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/45.jpg)
The Future of the Mobile Web=HTML5 based Mobile Web
4545
HTML5 based Mobile Web
![Page 46: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/46.jpg)
Social NetworkingSocial Networking� HTML5 based Facebook Client
� Music, Video, Photo, Apps
4646
![Page 47: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/47.jpg)
4747< http://techcrunch.com/2010/07/07/youtube-iphone-mobile-html5/ >
![Page 48: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/48.jpg)
4848
![Page 49: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/49.jpg)
4949
< Source: http://ymobileblog.com/blog/2010/06/30/yahoo-brings-its-world-class-communications-experiences-to-your-android-phone-plus-introduces-the-all-new-html5-mobile-web-mail/ >
![Page 50: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/50.jpg)
5050
![Page 51: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/51.jpg)
5151
< Source: http://solsie.com/2010/08/yahoo-mail-for-ipad-updated-with-html5-optimization/?utm_source=twitterfeed&utm_medium=twitter >
![Page 52: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/52.jpg)
e-Book and e-Magazinee-Book and e-Magazine
5252
![Page 53: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/53.jpg)
GameGame
5353
![Page 54: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/54.jpg)
5454 < http://openappmkt.com/ >
![Page 55: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/55.jpg)
Issues and Outlook...
5555
![Page 56: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/56.jpg)
Issues and Outlook of the Mobile WebIssues and Outlook of the Mobile Web� Issues
� Performance, Development tools, timeline of HTML5 standard including device API� Outlook
� HTML5 Web App•It is appropriate for multi-platform environment•It is appropriate for multi-platform environment•Webkit based browser is so popular in the mobile•HTML5 web app is more faster than legacy web app� HTML5 based Private Web Store� Hybrid Mobile Application•phoneGap, QuickConnect, Titanium, etc5656
![Page 57: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/57.jpg)
이원석 (Wonsuk Lee)/선임연구원/Ph.D.ETRI 표준연구센터 서비스융합표준연구팀W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/W3C HTML WG / W3C Web Application WG/ W3C Geolocation WG 멤버Email: [email protected], [email protected]: 042-860-4893, 010-5800-39975757
![Page 58: HTML5 and the Future of the Mobile Web](https://reader031.fdocuments.us/reader031/viewer/2022013118/54577e06af79594e128b48b1/html5/thumbnails/58.jpg)
ReferencesReferences[brad Neuberg] Introduction to HTML5, http://codinginparadise.org/presentations/intro_html5.pdf[Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/[Nabtron] New Elements introduced in HTML5, http://nabtron.com/new-elements-in-html5/1910/[W3C HTML WG], http://www.w3.org/html/wg/[W3C Web Applications WG], http://www.w3.org/2008/webapps/
5858