html5 - stc india · 2015. 12. 31. · the rise of html5 . 2004: whatwg begins work on xtml2.0...
TRANSCRIPT
![Page 1: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/1.jpg)
HTML5 Language of the Modern Web
By: Mayur Agrawal
© Copyright 2000-2015 TIBCO Software Inc.
![Page 2: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/2.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
![Page 3: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/3.jpg)
Content
© Copyright 2000-2015 TIBCO Software Inc.
Exploring prior standards
Why HTML5?
HTML5 vs HTML4
Key Features of HTML5
HTML5 and Technical Writing
![Page 4: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/4.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Hypertext Markup Language (HTML)
The language for building web pages.
![Page 5: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/5.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Exploring Prior Standards
![Page 6: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/6.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
![Page 7: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/7.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
HTML 2.0 Formalized the syntax and many of the rules that were already implemented.
![Page 8: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/8.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
HTML 3.2 Largely ignored by browser manufacturers who began to implement their own design
![Page 9: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/9.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
HTML 4.0 Standardized the syntax and structure of HTML became the standard for web authoring.
![Page 10: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/10.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
XHTML 1.0 Designed to move HTML towards XML DTDs often caused it render as HTML
![Page 11: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/11.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
The growth of the web High bandwidth connection Increased multimedia AJAX and Flash XHTML 2.0 work begins
![Page 12: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/12.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML Timeline
The rise of HTML5 2004: WHATWG begins work on XTML2.0 alternative 2007: W3C adopts WHATWG’s work and renames to HTML5 2009: W3C does not renew XHTML 2.0 charter 2010: Driven by Apple and Google, HTML5 popularity grows 2014: W3C charts final recommendation
![Page 13: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/13.jpg)
History is Boring
© Copyright 2000-2015 TIBCO Software Inc.
![Page 14: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/14.jpg)
0 200 400 600
526
467
402
525
396
HTML5 FeaturesSupport (Total: 555)
Current Browsers HTML5 Features Support
© Copyright 2000-2015 TIBCO Software Inc.
Source: www.html5test.com
![Page 15: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/15.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Why HTML5?
![Page 16: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/16.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML5 is an Evolution, Not a Revolution
HTML 3.2
HTML 4.0 HTML5
XHTML 2.0
![Page 17: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/17.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Error Handling
• Previous version left it to user agent
• XHTML 2.0 – draconian error
handling
• Page stop rendering if error
• HTML5 features detailed algorithms
for parsing errors
![Page 18: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/18.jpg)
New Features
© Copyright 2000-2015 TIBCO Software Inc.
• New semantic elements and attributes
• Built-in APIs to assist in building web applications
• Added support for audio and video
• HTML5 reduces the need for plug-ins
![Page 19: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/19.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
![Page 20: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/20.jpg)
HTML5 Specification is Much Larger
© Copyright 2000-2015 TIBCO Software Inc.
HTML5
HTML 4
XHTML 1.0
DOM level2
![Page 21: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/21.jpg)
DOCTYPE Simplified
© Copyright 2000-2015 TIBCO Software Inc.
• The DOCTYPE declaration defines the document type to be HTML
• Prior DOCTYPEs <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 22: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/22.jpg)
DOCTYPE Simplified
© Copyright 2000-2015 TIBCO Software Inc.
• The DOCTYPE declaration defines the document type to be HTML
• HTML5 <!DOCTYPE HTML>
![Page 23: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/23.jpg)
HTML5 Character Encoding
© Copyright 2000-2015 TIBCO Software Inc.
• To display an HTML page correctly, a web browser must know the
character set (character encoding) to use.
• HTML 4 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
![Page 24: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/24.jpg)
HTML5 Character Encoding
© Copyright 2000-2015 TIBCO Software Inc.
• To display an HTML page correctly, a web browser must know the
character set (character encoding) to use.
• HTML5 <meta charset=“UTF-8" />
![Page 25: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/25.jpg)
HTML5 New Elements
© Copyright 2000-2015 TIBCO Software Inc.
Semantic
article, aside, bdi, details, dialog, figcaption, figure, footer, header, main, mark, menuitem, meter, nav, progress, rp, rt, ruby, section,
summary, time, wbr
Graphics
canvas, svg
Media
audio, embed, source, track, video
Form
datalist, keygen, output
![Page 26: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/26.jpg)
Forms in HTML5
© Copyright 2000-2015 TIBCO Software Inc.
• Web Forms 2.0 specification is
integrated into HTML5
• Date pickers, color pickers, numeric
stepper controls added
• Input field types now include email,
search, and url
• PUT and DELETE methods are now
supported
![Page 27: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/27.jpg)
Integrated APIs
© Copyright 2000-2015 TIBCO Software Inc.
Offline Apps
Editable Drag & Drop History
![Page 28: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/28.jpg)
Associated APIs
© Copyright 2000-2015 TIBCO Software Inc.
Geolocation Messaging
![Page 29: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/29.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Key Features of HTML5
![Page 30: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/30.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Key Features
![Page 31: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/31.jpg)
Video
© Copyright 2000-2015 TIBCO Software Inc.
Prior Standards
• Online video played through 3rd party plugin
• Flash was the industry standard for deploying online video
Current Standards
• HTML5 video support provide another option
![Page 32: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/32.jpg)
Benefits of Native Video Support
© Copyright 2000-2015 TIBCO Software Inc.
Native video support means the elimination of 3rd party plugin dependencies and
cross-browser deployment scripts.
<video src=“myvideo.mp4” width=“320” height=“240”></video>
![Page 33: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/33.jpg)
Video Example
© Copyright 2000-2015 TIBCO Software Inc.
<!DOCTYPE html> <html> <body> <video width="400"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html>
![Page 34: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/34.jpg)
<!DOCTYPE html> <html> <body> <video width="400“ controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html>
Video Example
© Copyright 2000-2015 TIBCO Software Inc.
![Page 35: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/35.jpg)
Current HTML5 Video Issues
© Copyright 2000-2015 TIBCO Software Inc.
Video codec is the compression software for digital videos
• Adoption is being slowed by browser codec support
• Current specification does not declare a standard
video codec
• Unclear nature of patent and licensing is affecting
browser support
![Page 36: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/36.jpg)
Video Codecs
© Copyright 2000-2015 TIBCO Software Inc.
H.264 (MP4) OGG Theora (Ogg)
VP8 (WebM)
Source: www.w3schools.com
![Page 37: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/37.jpg)
Native YouTube Support
© Copyright 2000-2015 TIBCO Software Inc.
• No hassle of video conversion
• Supported on all browser type with HMTL5 support
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
![Page 38: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/38.jpg)
Native YouTube Support
© Copyright 2000-2015 TIBCO Software Inc.
<!DOCTYPE html> <html> <body> <iframe width="420" height="345" src="https://www.youtube.com/embed/YE7VzlLtp-4"> </iframe> </body> </html>
![Page 39: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/39.jpg)
Audio
© Copyright 2000-2015 TIBCO Software Inc.
Prior Standards
• Online audio played through 3rd party plugin
• Flash was the industry standard for deploying online audio
Current Standards
• HTML5 audio support provide another option
![Page 40: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/40.jpg)
Benefits of Native Audio Support
© Copyright 2000-2015 TIBCO Software Inc.
Native audio support means the elimination of 3rd party plugin dependencies and
cross-browser deployment scripts.
<audio src=“myaudio.mp3”></audio>
![Page 41: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/41.jpg)
Audio Example
© Copyright 2000-2015 TIBCO Software Inc.
<!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
![Page 42: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/42.jpg)
Audio Codecs
© Copyright 2000-2015 TIBCO Software Inc.
MP3 Wav Ogg
Source: www.w3schools.com
![Page 43: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/43.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Key Features
![Page 44: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/44.jpg)
Canvas
© Copyright 2000-2015 TIBCO Software Inc.
• Container for graphics and uses script to draw the graphics
• The Canvas 2D API is used to draw within the canvas element
• Can draw colorful text with or without animation
• Can be animated as well as interactive
• Suited for graphic intensive games
![Page 45: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/45.jpg)
Defining a Canvas Element
© Copyright 2000-2015 TIBCO Software Inc.
<canvas id="myCanvas" width=“600" height=“695"> Your browser does not support canvas. Please upgrade to the latest version of Chrome, Firefox, or Safari. </canvas>
![Page 46: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/46.jpg)
Defining a Canvas Element
© Copyright 2000-2015 TIBCO Software Inc.
<canvas id="myCanvas" width=“600" height=“695"> Your browser does not support canvas. Please upgrade to the latest version of Chrome, Firefox, or Safari. </canvas>
• Sample drawing methods: beginPath(), fillRect(), fillStyle(), moveTo(),
lineTo(), closePath()
![Page 47: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/47.jpg)
Canvas Example
© Copyright 2000-2015 TIBCO Software Inc.
0 0
600
600 <canvas id="myPlot" width=“600" height=“600"> Placeholder content </canvas> <script> var c = document.getElementById("myPlot"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,300); ctx.stroke(); </script>
300, 300
![Page 48: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/48.jpg)
Canvas Example
© Copyright 2000-2015 TIBCO Software Inc.
<canvas id="myPlot" width=“600" height=“600“> Placeholder content </canvas> <script> var c = document.getElementById("myPlot"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,300); ctx.stroke(); </script>
![Page 49: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/49.jpg)
Canvas Example
© Copyright 2000-2015 TIBCO Software Inc.
3D Autumn Demo using WebGL
Canvas Video Blowup Demo
Burnin Rubber Game
![Page 50: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/50.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Offline Apps
Key Features
![Page 51: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/51.jpg)
Offline Web Application
© Copyright 2000-2015 TIBCO Software Inc.
• The web application is cached, and accessible without an internet connection
• Creates Application cache
• Uses cache manifest file to identify resources to cache or not cache
![Page 52: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/52.jpg)
How it Works
© Copyright 2000-2015 TIBCO Software Inc.
No
Yes
Application Cached?
Load from Server
![Page 53: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/53.jpg)
Advantages
© Copyright 2000-2015 TIBCO Software Inc.
• Offline browsing
• Speed
• Reduced server load
![Page 54: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/54.jpg)
How to Cache
© Copyright 2000-2015 TIBCO Software Inc.
A page is cached if it had manifest file specified in it or if it is directly mentioned in the manifest file
![Page 55: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/55.jpg)
Specify Manifest File
© Copyright 2000-2015 TIBCO Software Inc.
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document... </body> </html>
![Page 56: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/56.jpg)
In the Manifest File
© Copyright 2000-2015 TIBCO Software Inc.
CACHE MANIFEST # 2012-02-21 v1.0.0 CACHE: /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
Explicit Section – Files to be cached
Online Whitelist Section – Files to be fetched online
Fallback Section - Fallback files if a file is inaccessible
![Page 57: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/57.jpg)
Point to be Noted
© Copyright 2000-2015 TIBCO Software Inc.
• Browser shows the cached page even if the file is updated on
server
• To update the cache, update the manifest file
![Page 58: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/58.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Offline Apps Drag and Drop API
Key Features
![Page 59: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/59.jpg)
Drag and Drop API
© Copyright 2000-2015 TIBCO Software Inc.
• Grab an object and move it to different location
• HTML5 specification native API
![Page 60: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/60.jpg)
How it Works
© Copyright 2000-2015 TIBCO Software Inc.
1. Define an element as draggable
3. Control interactions through the drag and drop API
2. Define a drop target for it
draggable=“true”
ondragover ondrop
![Page 61: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/61.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Offline Apps Drag and Drop API
Geolocation API
Key Features
![Page 62: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/62.jpg)
Geolocation API
© Copyright 2000-2015 TIBCO Software Inc.
• Allows to build location-aware applications
• Lets the user agent handle discovery
• More accurate and flexible than prior methods like IP lookup
• Geolocation interactions are opt-in
• Can display position on Google maps using Google Maps API
![Page 63: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/63.jpg)
Using Geolocation
© Copyright 2000-2015 TIBCO Software Inc.
navigator.geolocation
global navigator object getCurrentPosition()
single-shot method to return location data watchPosition()
tracks location data over time
![Page 64: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/64.jpg)
Using Geolocation
© Copyright 2000-2015 TIBCO Software Inc.
timestamp contains the time stamp of the data call
coords
object that contains the geolocation data using the following: latitude longitude accuracy altitude altitudeAccuracy heading speed
![Page 65: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/65.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Geolocation Example
<!DOCTYPE html> <html> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>
![Page 66: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/66.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Offline Apps Drag and Drop API
Geolocation API
Responsive Web Design
Key Features
![Page 67: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/67.jpg)
Responsive Web Design
© Copyright 2000-2015 TIBCO Software Inc.
• The web page looks good and easy to
use, regardless of the device
• Uses CSS and HTML to resize, hide,
shrink, enlarge, or move the content
• HTML5 provides native support for
responsive web design
![Page 68: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/68.jpg)
Responsive Web Design
© Copyright 2000-2015 TIBCO Software Inc.
![Page 69: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/69.jpg)
Responsive Web Design
© Copyright 2000-2015 TIBCO Software Inc.
![Page 70: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/70.jpg)
Responsive Web Design
© Copyright 2000-2015 TIBCO Software Inc.
![Page 71: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/71.jpg)
Responsive Web Design
© Copyright 2000-2015 TIBCO Software Inc.
![Page 72: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/72.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Audio and Video
Canvas
Offline Apps Drag and Drop API
Geolocation API
Responsive Web Design
Key Features
![Page 73: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/73.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
HTML5 and Technical Writing
![Page 74: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/74.jpg)
Help Evolution
© Copyright 2000-2015 TIBCO Software Inc.
![Page 75: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/75.jpg)
Why Multimedia Content is Good?
© Copyright 2000-2015 TIBCO Software Inc.
![Page 76: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/76.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Help on All Devices
![Page 77: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/77.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
Help on All Devices
![Page 78: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/78.jpg)
More Searchable Content
© Copyright 2000-2015 TIBCO Software Inc.
![Page 79: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/79.jpg)
More Searchable Content
© Copyright 2000-2015 TIBCO Software Inc.
![Page 80: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/80.jpg)
© Copyright 2000-2015 TIBCO Software Inc.
The Savior
![Page 82: HTML5 - STC India · 2015. 12. 31. · The rise of HTML5 . 2004: WHATWG begins work on XTML2.0 alternative . 2007: W3C adopts WHATWG’s work and renames to HTML5 . 2009: W3C does](https://reader033.vdocuments.mx/reader033/viewer/2022052101/603b4876fe6ca6064f46e0cb/html5/thumbnails/82.jpg)
© Copyright 2000-2015 TIBCO Software Inc.