html5-exploring-training deck - osmosis 10oct - by udayakumar mathivanan
TRANSCRIPT
![Page 1: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/1.jpg)
![Page 2: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/2.jpg)
![Page 3: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/3.jpg)
![Page 4: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/4.jpg)
![Page 5: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/5.jpg)
![Page 6: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/6.jpg)
![Page 7: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/7.jpg)
![Page 8: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/8.jpg)
![Page 9: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/9.jpg)
![Page 10: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/10.jpg)
![Page 11: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/11.jpg)
![Page 12: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/12.jpg)
![Page 13: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/13.jpg)
![Page 14: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/14.jpg)
A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its
content.
![Page 15: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/15.jpg)
Tags - <nav>:"Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element."
<nav role="navigation"><ul>
<li><a href="#" title="link">link</a>
</li></ul>
</nav>
![Page 16: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/16.jpg)
Tags - <article>:"a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry ..."
<article><h2>Item</h2><p>Some content here.</p>
</article>
![Page 17: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/17.jpg)
Tags - <section>:"section is a blob of content that you could store as an individual record in a database."
<section id="foo"><h2>Foo</h2><p>
Content here</p>
</section>
![Page 18: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/18.jpg)
Tags - <footer>:"The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like."
![Page 19: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/19.jpg)
Tags - <footer>:<footer role="contentinfo">
<p>Footer
</p><nav>
<h5>Quick Links</h5><ul role="navigation">
<li><a href="#">link</a>
</li></ul>
</nav></footer>
![Page 20: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/20.jpg)
GeoLocation:
• navigator.geolocation.getCurrentPosition() -
obtain the user's current location• navigator.geolocation.watchPosition() - watches for
changes in a user's location
![Page 21: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/21.jpg)
![Page 22: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/22.jpg)
GeoLocation -Usability:• FF 3.5• Opera• Chrome (via GoogleGears)• Safari on the IPhone• IE8
![Page 23: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/23.jpg)
Graphics: Canvas & SVG:Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
![Page 24: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/24.jpg)
Graphics: Canvas & SVG:"SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (http://www.svgbasics.com/index.html)
![Page 25: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/25.jpg)
Audio / Video:• Offers the ability to easily embed media into HTML
documents• Media playback can be controlled via JS and media
events• A flash fallback could be provided for browsers that
don't support HTML5 media
![Page 26: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/26.jpg)
Audio / Video:Usability:
• FF3.5, Chrome, Safari 3/4
![Page 27: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/27.jpg)
Video Formats and Browser SupportCurrently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:•MP4 = MPEG 4 files with H264 video codec and AAC audio codec•WebM = WebM files with VP8 video codec and Vorbis audio codec•Ogg = Ogg files with Theora video codec and Vorbis audio codec
Audio / Video:
,
![Page 28: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/28.jpg)
Storage:• Session and Local Storage—provides a js
interface to key-value storage. • Web Databases—RDBMS support for storing
structured data inside the browser.• Application Cache—Local Cache
![Page 29: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/29.jpg)
Storage:Usability:• IE8,FF3.5, Safari 4
![Page 30: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/30.jpg)
![Page 31: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/31.jpg)
![Page 32: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/32.jpg)
![Page 33: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/33.jpg)
Web Forms:• strongly-typed input fields• new attributes for defining constraints• new DOM interfaces
![Page 34: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/34.jpg)
1.<input type="search"> for search boxes
2.<input type="number"> for spinboxes
3.<input type="range"> for sliders
4.<input type="color"> for color pickers
5.<input type="tel"> for telephone numbers
6.<input type="url"> for web addresses
7.<input type="email"> for email addresses
8.<input type="date"> for calendar date pickers
9.<input type="month"> for months
10.<input type="week"> for weeks
11.<input type="time"> for timestamps
12.<input type="datetime"> for precise, absolute date+time stamps
13.<input type="datetime-local"> for local dates and times
![Page 35: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/35.jpg)
![Page 36: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/36.jpg)
function supports_canvas() { return !!document.createElement('canvas').getContext; }
![Page 37: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/37.jpg)
↶check for native date picker
if (!Modernizr.inputtypes.date) { // no native support for <input type="date"> :( // maybe build one yourself with Dojo or jQueryUI }
MODERNIZR, AN HTML5
DETECTION LIBRARY
![Page 38: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/38.jpg)
![Page 39: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/39.jpg)
![Page 40: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/40.jpg)
![Page 41: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/41.jpg)
![Page 42: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/42.jpg)
![Page 43: Html5-Exploring-Training Deck - OSMOSIS 10Oct - By Udayakumar Mathivanan](https://reader034.vdocument.in/reader034/viewer/2022042817/55a6c8131a28ab4e1d8b45c8/html5/thumbnails/43.jpg)