HTML5 Technology : Past, Present and Future
Total Page:16
File Type:pdf, Size:1020Kb
Automotive Linux Summit 2011 HTML5 Technology : Past, present and future Nov 2011 World Wide Web PAGE 4 W3C, NeXT, Tim Berners-Lee and Steve Jobs Tim Berners-Lee Born : 8 June, 1955 World's first-ever web site and web server, running on a NeXT computer at CERN. The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html PAGE 5 HTML (HyperText Markup Language) - First created and developed by Tim Berners-Lee in 1989. - HTML 2.0, HTML 3.2 and then HTML 4.01 in 1999 was major driving momentum in internet industry. However… In 2002, newly developed XHTML 1.0 and XHTML 2.0 standards were turned away by the industry. PAGE 6 Tim Berners-Lee, “Reinventing HTML” - Proposes a new working group to evolve HTML incrementally. http://dig.csail.mit.edu/breadcrumbs/node/166 Reinventing HTML or, Yes we admit it, XHTML failed. PAGE 7 The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software in 2004 PAGE 8 A brief history of HTML . HTML 1.0 03.1993 . HTML 2.0 11.1995 . HTML 3.0 04.1996 . HTML 3.2 01.1997 . HTML 4.0 12.1997 . HTML 4.01 12.1999 Currently widely used HTML . XHTML 1.0 01.2000 HTML + XML . XHTML 1.1 05.2001 . XHTML 2.0 07.2006 No backward compatibility PAGE 9 Market Status Adobe to STOP work on Mobile Flash, concentrate on HTML5 If you can’t beat’em, join’em. Source : http://www.zdnet.com/blog/perlow/exclusive-adobe-ceases-development-on-mobile-browser-flash-refocuses-efforts-on-html5-updated/19226?tag=content;siu-container PAGE 11 Will there be a Silverlight 6 (and does it matter) ? Source : http://www.zdnet.com/blog/microsoft/will-there-be-a-silverlight-6-and-does-it-matter/11180 PAGE 12 Rapid growth in number of internet-connected devices more… PAGE 13 Source : ITU, Mark Lipacis, Morgan Stanley Research PAGE 14 An interesting thing is that smartphone usage is about data, not voice anymore. PAGE 15 Contents & Services Mobile Phone PAGE 16 Different hardware, Different operating systems, Different languages… Java C, C++ Objective C source: http://www.asymco.com PAGE 17 There’s a problem… PAGE 18 PAGE 19 Different hardware, High cost to support various platforms Different operating systems, (Contents & service provider) Different languages… “Even Google was not rich enough to support all of the different mobile platforms from Apple’s App Store to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform” - Vic Gundotra, Google Engineering VP “Web apps are now able to go offline, and they can have richer graphics thanks to HTML5”. “It’s getting similar to app frameworks”. PAGE 20 Why wasn’t there a talk about N-Screen back then ? PAGE 21 Actually, there was a need for N-Screen back then as well. The main difference between now and then is network connectivity. N-Screen is in connected life style. PAGE 22 Fast Web Innovation PAGE 23 The Web is also getting faster Source: Brad Neuberg PAGE 24 By 2016, more than 2.1 billion mobile devices will have HTML5 browsers, up from just 109 million in 2010. PAGE 25 What is HTML5 ? What is HTML5 ? Structure and Semantic APIs PAGE 27 Offline & Device Semantic Storage Access Connectivity Multimedia 3D, Performance CSS3 Graphics, & integration Styling Effects PAGE 28 HTML5 features . Web Form • new features allow for better input control and validation. • new input type(email, url, number, range, date pickers, search, color, etc) . Web worker • Allows Web application authors to spawn background workers running scripts in parallel to their main page. • Thread-like operation with message-passing as the coordination mechanism. Web socket • Enables Web pages to use the WebSocket protocol for two-way communication with a remote host. PAGE 29 HTML5 features . Multimedia • Canvas ▫ canvas element uses JavaScript to draw graphics on a web page ▫ draws graphs from any data source, such as a table • Video& Audio ▫ Most video/audio are played through a plug-in such like flash. Not all browsers have the same plug-ins. ▫ Standard way to include video/audio, with html element. • SVG ▫ SVG is XML Based 2D Vector graphic language PAGE 30 HTML5 key features . Web Form . Web SQL Database . Canvas / SVG . Local storage . Video / Audio . Web Socket . Geolocation . Web Workers PAGE 31 Quake 2 GWT Port Source : http://code.google.com/p/quake2-gwt-port/ PAGE 32 WebGL 3D Graphics + HTML5 Demo Source : http://mrdoob.com/97/Depth_of_Field Source : http://mrdoob.com/137/Voxels_liquid PAGE 33 Video + Canvas Demo Source : http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/ PAGE 34 CSS3 Demo Source : http://www.romancortes.com/blog/pure-css-coke-can/ Source : http://alteredqualia.com/canvasmol/#Chlorophyll PAGE 35 So why is HTML5 better than plain ol’HTML? PAGE 36 Some design principles include : It’s backwards compatible. PAGE 37 Better error handling. PAGE 38 It’s designed for practical use. PAGE 39 Better rich media support. PAGE 40 HTML5 vs. plain ol’HTML It’s backwards compatible. It won’t break in older browsers which means it won’t break your old websites. Better error handling. So doesn’t expose errors to the user - making you and your website a better experience for users. It’s designed for practical use. All new features must be justified based on real world problems. Better rich media support. Features that are being used today such as graphics-on-the-fly, audio, video and better support for JavaScript which used to be hard to achieve without a lot of expensive development work. PAGE 41 Web technologies have become powerful enough that they are used to build “full-featured applications” PAGE 42 Why HTML5 for automobiles ? Build on something bigger than automotive... PAGE 44 Ecosystem PAGE 45 Standards PAGE 46 Flexibility PAGE 47 Branding PAGE 48 Lifespan PAGE 49 Time to market PAGE 50 Powerful PAGE 51 Cross-platform PAGE 52 Why HTML5 for automobiles ? Build on something bigger than automotive... Ecosystem – developers, tools, companies Standards – no vendor lock-in Flexibility – fluid deployment and architectures Branding – brand same app on different cars with CSS Lifespan – will be supported for long time Time to market – easy to use and leverage Powerful – rich application environment Cross-platform – deploy apps on phones and car PAGE 53 VRM : On-demand diagnostics, Vehicle information Management, Device Link - Automotive device API Define API standard for automobiles. Status & diagnostic check API for Device Link API (Voice recognition, TTS) - Applications Link to authorized service centers Customized presets for automobiles according to different weather conditions and time of day (lights, air conditioning, windscreen wiper etc.) Car diagnostic program PAGE 54 HTML5 used in automobiles Demo PAGE 55 Future of HTML http://html11.org PAGE 56 Confidential Power to Discover.