1 / 42

HTML5

HTML5. Praveen Srivatsa Director, AsthraSoft Consulting Microsoft Regional Director, Bangalore MVP, ASP.NET since 2006. HTML 5. XHTML 5. text/html. application/xhtml+xml. Document Representations. Document. DOM. Benefits of HTML. Backwards compatible with legacy UAs

yvette-burns
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Praveen Srivatsa Director, AsthraSoft Consulting Microsoft Regional Director, Bangalore MVP, ASP.NET since 2006

  2. HTML 5 XHTML 5 text/html application/xhtml+xml Document Representations Document DOM

  3. Benefits of HTML • Backwards compatible with legacy UAs • Author familiarity • Lenient and forgiving syntax • No User-Hostile Yellow Screen of Death! • Convenient shorthand syntax • Can omit some tags and attribute values

  4. Benefits of XHTML • Strict XML Syntax • Integrate directly with other XML vocabularies • SVG, MathML • Use XML Processing

  5. Using HTML and XHTML Together

  6. Overview of Enhancements • Structure and Semantics • Embedded Content and Multimedia • DOM APIs • Forms • Repetition Model

  7. Structure and Semantics

  8. Structure <header> <divid="header"> <nav> <div id="nav"> <section> <divid="content"> <aside> <divid="right"> <article> <divclass="article"> <footer> <divid="footer">

  9. Dates and Times • Microformats datetime-design-pattern • <abbrclass="datetime"title="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30</abbr> • Misusing the abbr element • Accessibility Issues

  10. Dates and Times • The time Element • <timedatetime="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30</time> • Solves Accessibility Issue • Can be used in Microformats like hCalendar

  11. Meter • Representing scalar measurements or fractional values • Useful for: • User Ratings (e.g. YouTube Videos) • Seach Result Relevance • Disk Quota Usage

  12. Using Meter • <meter>60%</meter> • <meter>3/5</meter> • <meter>6 blocks used (out of 10 total)</meter> • <metervalue="0.6">Medium</meter>

  13. Progress • Show completion progress of a task • Progress bars are widely used in other applications • Works with scripted applications • Useful for: • Indicate loading progress of an AJAX application • Show user progress through a series of forms • Making impatient users wait

  14. Using Progress • <progress>Step 3 of 6</progress> • <progress>50% Complete</progress> • <progressvalue="0.5"> Half way!</progress>

  15. M • Marked or Highlighted text • Not to be confused with <em> • Indicates point of interest or relevance • Useful for: • Highlighting relevant code in a code sample • Highlighting search keywords in a document (e.g. in Google Cache)

  16. Using M • <p>The highlighted part below is where the error lies:</p><pre><code>var i: Integer;begin i := <m>1.1</m>;end.</code></pre>

  17. Datagrid • Interactive tree, list or tabular data • Extensive DOM API • Allows User Input • Editing • Sorting • Useful for: • File or folder lists • Web mail applications

  18. Using Datagrid • <datagrid> <table><!-- Insert tabular data here... --> </table></datagrid>

  19. Embedded Content and Multimedia

  20. Canvas • Dynamic and interactive graphics • Draw images using 2D drawing API • Lines, curves, shapes, fills, etc. • Useful for: • Graphs • Applications • Games and Puzzles • And more…

  21. Canvas Examples: Graphs • PlotKit • http://www.liquidx.net/plotkit/ • JavaScript library • Draws graphs from any data source, such as a table

  22. Canvas Examples: Applications • Yahoo! Pipes • http://pipes.yahoo.com/ • Interactive, drag and drop interface

  23. Canvas Examples: Applications • CanvasPaint • http://canvaspaint.org/ • Clone of MS Paint built with Canvas • Could be used to build a Shared Whiteboard application

  24. Canvas Examples: Games • Canvex • http://canvex.lazyilluminati.com/ • Experimental First-Person Shooter Game • 3D Graphics

  25. Video and Audio • Videos have become very popular • Currently difficult to embed videos in HTML • Flash has become the de facto standard • Adding native support to browsers

  26. Using Video • <videosrc="movie.ogg"id="video">...</video> • <buttononclick="video.play();"> Play</button>

  27. DOM APIs

  28. Server-Sent Events • Allows immediate update notification from server to client • Send any arbitrary data to the client, intended to be processed by a script • Update content without reloading page • Useful for: • Real-time chat or gaming • Stock ticker updates

  29. Server-Sent Events

  30. Forms

  31. Form Controls • HTML 4 controls are too limited • Several new types added

  32. Form Controls: Dates and Times • <inputtype="datetime"> • <inputtype="date"> • <inputtype="time"> • And more…

  33. Form Controls: Numbers • <inputtype="number"> • <inputtype="range">

  34. Form Controls: Email and URIs • <inputtype="email"> • <inputtype="url">

  35. Form Controls: Combo Boxes • <inputlist="title-list"><datalistid="title-list"> <optionvalue="..."></datalist>

  36. Form Validation • New attributes to describe validity constraints for the expected input • required, pattern, min, max, etc. • New DOM APIs allow scripts to detect and deal with user input errors more easily

  37. Repetition Model

  38. Repetition Model • Allows client side processing to repeat sections based on templates • Traditionally required scripts or server side interaction to add additional sections • Useful for: • Adding multiple players to a game • Adding multiple, alternative contact details (e.g. home phone, work phone, mobile phone, etc.)

  39. Colonel Jack O'Neill Remove Major Sam Carter Remove Civilian Daniel Jackson Remove Using the Repetition Model Team Members <trrepeat-template="member"repeat="0"> <td><inputtype="text"name="member0.rank"></td> <td><inputtype="text"name="member0.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trrepeat-template="member"repeat="1"> <td><inputtype="text"name="member1.rank"></td> <td><inputtype="text"name="member1.name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> <trid="member"repeat="template"repeat-start="2"> <td><inputtype="text"name="member[member].rank"></td> <td><inputtype="text"name="member[member].name"></td> <td><buttontype="remove">Remove</button></td> </tr> Rank Name Remove Add Team Member Add Team Member Alien Teal’c Continue Remove <buttontype="add"template="member">Add Team Member</button>

  40. Feedback / QnA • Your Feedback is Important! Please take a few moments to fill out our online feedback form For detailed feedback, use the form at http://www.connectwithlife.co.in/vtd/helpdesk.aspx Or email us at vtd@microsoft.com • Use the Question Manager on LiveMeeting to ask your questions now!

  41. Contact (optional slide) • Web Address www.asthra.net • Email Address praveens@asthra.net

More Related