html5 and the future of the mobile web
DESCRIPTION
TRANSCRIPT
HTML5 and The Future of the Mobile WebHTML5 and The Future of the Mobile Web- Next Generation Mobile Web -
Overall Circumstance of the Internet is changing ...
22
Smartphone > PC Shipments Within 2 YearsSmartphone > PC Shipments Within 2 Years
33
Mobile Users > Desktop Internet Users Within 5 YearsMobile Users > Desktop Internet Users Within 5 Years
44
Smartphone > Feature Phone Shipments Within 1 Year Smartphone > Feature Phone Shipments Within 1 Year
55
Increasingly, Mobile Phone Usage is About Data, Not VoiceIncreasingly, Mobile Phone Usage is About Data, Not Voice
66
Change of Mobile Content Consumption in SmartphoneChange of Mobile Content Consumption in Smartphone
77
Why HTML5 is important in the Mobile ?
88
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
1010
1111
(Reference) Comparison of Features among the Smartphone Platforms(Reference) Comparison of Features among the Smartphone Platforms
1212
New Computing Cycles – 10x More Devices New Computing Cycles – 10x More Devices
1313
What is the HTML5?
1414
Change of Circumstances: The Web Platform is AcceleratingChange of Circumstances: The Web Platform is Accelerating
1515[ Source : Brad Neuberg ]
Change of Circumstances : And It’s Solving Key Developer ChallengesChange of Circumstances : And It’s Solving Key Developer Challenges
1616[ Source : Brad Neuberg ]
Change of Circumstances: More DevelopersChange of Circumstances: More Developers
1717[ Source : Brad Neuberg ]
Change of Circumstances: More UsersChange of Circumstances: More Users
1818[ Source : Brad Neuberg ]
Change of Circumstances: More SpeedChange of Circumstances: More Speed
1919[ Source : Brad Neuberg ]
HTML TimelineHTML Timeline
2020[ Source : Appleinsider ]
What is HTML5 ?What is HTML5 ?Structure and Semantic APIs
2121
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]
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
Web FormsWeb Forms� Placeholder text
� An autofocus attribute
2424
Web FormsWeb Forms
2525
Web FormWeb Form� Validation of input value
2626
(Reference) HTML5 elements(Reference) HTML5 elements
28 New Elements are added&
2727
&7 elements are changed
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
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/]
SVGSVG� What is SVG ?
� Scalable Vector Graphic� HTML-like tags for drawing
3030
Video/AudioVideo/Audio� Embedding multimedia will get easier through the user of tags like <audio> and <video>
3131
Video/Audio: CodecVideo/Audio: Codec
3232<Source: Dive into html5>
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
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
});
Offline Web AppsOffline Web Apps� Web apps need to work everywhere
� Database and app cache store user data and app resources locally3535
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]);
});
}
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
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.}
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
Web WorkersWeb Workers� API for running background scripts� Threads for Web apps� Useful for gaming, graphics, crypto and etc.
4040
Web FontsWeb Fonts
4141
Browser SupportBrowser Support
4242
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
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
The Future of the Mobile Web=HTML5 based Mobile Web
4545
HTML5 based Mobile Web
Social NetworkingSocial Networking� HTML5 based Facebook Client
� Music, Video, Photo, Apps
4646
4747< http://techcrunch.com/2010/07/07/youtube-iphone-mobile-html5/ >
4848
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/ >
5050
5151
< Source: http://solsie.com/2010/08/yahoo-mail-for-ipad-updated-with-html5-optimization/?utm_source=twitterfeed&utm_medium=twitter >
e-Book and e-Magazinee-Book and e-Magazine
5252
GameGame
5353
5454 < http://openappmkt.com/ >
Issues and Outlook...
5555
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
이원석 (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
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