Html5 Exploring -- by Udayakumar Mathivanan
1 like434 views
Semantic elements like <form>, <table>, and <img> clearly define their content, while non-semantic elements like <div> and <span> provide no information about meaning. The <nav> element is for major navigation blocks only, <article> is for independent compositions, and <section> represents database records. The <footer> contains information about the parent section like authors and copyright. Geolocation can obtain or watch a user's location. Canvas draws graphics via scripting while SVG uses XML for scalable vectors. Audio and video embed media with native playback and events, offering Flash as fallback. Storage interfaces include local and session storage and databases for persistent data, while the application cache provides local caching.
Html5 Exploring -- by Udayakumar Mathivanan
- 12. 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.
- 13. 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>
- 14. 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>
- 15. 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>
- 16. 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."
- 17. 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>
- 18. GeoLocation: • navigator.geolocation.getCurrentPosition() - obtain the user's current location • navigator.geolocation.watchPosition() - watches for changes in a user's location
- 19. GeoLocation - Usability: • FF 3.5 • Opera • Chrome (via GoogleGears) • Safari on the IPhone • IE8
- 20. Graphics: Canvas & SVG: Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
- 21. 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)
- 22. 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
- 23. Audio / Video: Usability: • FF3.5, Chrome, Safari 3/4
- 24. Currently, 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: ,
- 25. 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
- 30. Web Forms: • strongly-typed input fields • new attributes for defining constraints • new DOM interfaces