html5 technology : past, present and future · page 6 however… in 2002, newly developed xhtml 1.0...
TRANSCRIPT
Nov 2011
HTML5 Technology :
Past, present and
future
Automotive Linux Summit 2011
PAGE 4
World Wide Web
PAGE 5
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
W3C, NeXT, Tim Berners-Lee and Steve Jobs
PAGE 6
However…In 2002, newly developed XHTML 1.0 and XHTML 2.0 standards were turned away by the industry.
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.
PAGE 7
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 8
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 9
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
A brief history of HTML
Market Status
PAGE 11
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
Adobe to STOP work on Mobile Flash,
concentrate on HTML5
If you can’t beat’em, join’em.
PAGE 12
Source : http://www.zdnet.com/blog/microsoft/will-there-be-a-silverlight-6-and-does-it-matter/11180
Will there be a Silverlight 6 (and
does it matter) ?
PAGE 13
more…
Rapid growth in number of internet-connected devices
PAGE 14
Source : ITU, Mark Lipacis, Morgan Stanley Research
PAGE 15
An interesting thing is that smartphone usage is about data, not voice anymore.
PAGE 16
Contents & Services
Mobile Phone
PAGE 17
source: http://www.asymco.com
Java
C, C++
Objective
C
Different hardware,
Different operating systems,
Different languages…
PAGE 18
There’s a problem…
PAGE 19
PAGE 20
“It’s getting similar to app frameworks”.
“Web apps are now able to go offline, and they can have richer graphics thanks to HTML5”.
“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
Different hardware,
Different operating systems,
Different languages…
High cost to support various platforms
(Contents & service provider)
PAGE 21
Why wasn’t there a talk about N-Screen back then ?
PAGE 22
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 23
Fast Web Innovation
PAGE 24
Source: Brad Neuberg
The Web is also getting faster
PAGE 25
By 2016, more than 2.1 billion mobile devices will have HTML5
browsers, up from just 109 million in 2010.
What is HTML5 ?
PAGE 27
What is HTML5 ?
Structure and Semantic APIs
PAGE 28
SemanticOffline &
Storage
Device
Access Connectivity
Multimedia 3D,
Graphics,
Effects
Performance
& integrationCSS3
Styling
PAGE 29
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.
HTML5 features
PAGE 30
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
HTML5 features
PAGE 31
Web Form
Canvas / SVG
Video / Audio
Geolocation
Web SQL Database
Local storage
Web Socket
Web Workers
HTML5 key features
PAGE 32
Quake 2 GWT Port
Source : http://code.google.com/p/quake2-gwt-port/
PAGE 33
Source : http://mrdoob.com/97/Depth_of_Field Source : http://mrdoob.com/137/Voxels_liquid
WebGL 3D Graphics + HTML5 Demo
PAGE 34
Video + Canvas Demo
Source : http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
PAGE 35
Source : http://www.romancortes.com/blog/pure-css-coke-can/
CSS3 Demo
Source : http://alteredqualia.com/canvasmol/#Chlorophyll
PAGE 36
So why is HTML5 better than plain ol’HTML?
PAGE 37
Some design principles include :
It’s backwards compatible.
PAGE 38
Better error handling.
PAGE 39
It’s designed for practical use.
PAGE 40
Better rich media support.
PAGE 41
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.
HTML5 vs. plain ol’HTML
PAGE 42
Web technologies have become
powerful enough that they are used to
build “full-featured applications”
Why HTML5
for automobiles ?
PAGE 44
Build on something bigger than automotive...
PAGE 45
Ecosystem
PAGE 46
Standards
PAGE 47
Flexibility
PAGE 48
Branding
PAGE 49
Lifespan
PAGE 50
Time to market
PAGE 51
Powerful
PAGE 52
Cross-platform
PAGE 53
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 54
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 55
HTML5 used in automobiles Demo
Power to Discover
Confi
denti
al