Html5: What is it?


Published on

This was a presentation for the NYCSS meetup group on March 21, 2011 outlining HTML 5, by Joey Dehnert.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5: What is it?

  1. 1. Meetup HTML 5 – What is it? Joey Dehnert t:
  2. 2. What is HTML 5? <ul><li>It's still the HTML we all know and love, but better </li></ul><ul><li>It’s smarter </li></ul><ul><li>It’s more intuitive </li></ul>
  3. 3. How it’s smarter. <ul><li>Sweet new features like: </li></ul><ul><ul><li>HTML 5 forms </li></ul></ul><ul><ul><li>Form validations </li></ul></ul><ul><ul><li>Spin Boxes </li></ul></ul><ul><ul><li>Sliders </li></ul></ul><ul><ul><li>Date Pickers </li></ul></ul><ul><ul><li>Color Pickers </li></ul></ul><ul><ul><li>Geolocation </li></ul></ul><ul><ul><li>Editable Content </li></ul></ul><ul><ul><li>Local Storage </li></ul></ul><ul><ul><li>Microdata </li></ul></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><li>Video/Audio </li></ul></ul>
  4. 4. Example of Smarter <ul><li>HTML 5 Forms (Sadly, these aren’t widely supported yet, but are still super cool) </li></ul><ul><ul><li>New input attributes </li></ul></ul><ul><ul><li><input name=&quot;input &quot; placeholder=&quot;I show up in a blank input field”> </li></ul></ul><ul><ul><li><input name=“autofocus&quot; autofocus> </li></ul></ul>
  5. 5. Example of Smarter <ul><li>Now you see it. </li></ul><ul><li>Now you don’t. </li></ul>
  6. 6. Example of Smarter <ul><li>HTML 5 Forms (Sadly, these aren’t widely supported yet, but are still super cool) </li></ul><ul><li>New input types </li></ul><ul><ul><li><input type=&quot;email&quot;> </li></ul></ul><ul><ul><li><input type=&quot;url&quot;> </li></ul></ul>
  7. 7. Example of Smarter
  8. 8. Smart Fringe Features <ul><li>Form Validation </li></ul><ul><li>Spinboxes (IMG) </li></ul><ul><li>Sliders (IMG) </li></ul><ul><li>Date Pickers (IMG) </li></ul><ul><li>Color Picker (IMG) </li></ul>
  9. 9. Other Awesome Things <ul><li>Geolocation </li></ul><ul><li>Editable Content </li></ul><ul><li>Local Storage </li></ul><ul><li>Microdata </li></ul>
  10. 10. It is more intuitive. <ul><li>Simplified doctype, html element and charset </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;;> to <!doctype html> </li></ul><ul><li><html xmlns=&quot;;> to <html lang=&quot;en&quot;> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> to <meta charset=utf-8> </li></ul>
  11. 11. It is more intuitive. <ul><li>A sampling of the major new elements available to us are </li></ul><ul><li>more semantic and named in a straight forward, </li></ul><ul><li>meaningful way that makes markup more intuitive and </li></ul><ul><li>easier to use. </li></ul><ul><li><header> instead of <div id=&quot;header”> </li></ul><ul><li><nav> instead of <ul id=&quot;nav”> </li></ul><ul><li><article> instead of <div id=&quot;post&quot;> or <div id=&quot;article”> </li></ul><ul><li><section> instead of <div id=&quot;content”> </li></ul><ul><li><hgroup> </li></ul><ul><li><time> instead of <div id=&quot;date-time”> </li></ul><ul><li><mark> instead of <span id=&quot;highlight”> </li></ul><ul><li><aside> instead of <div id=&quot;sidebar”> </li></ul><ul><li><footer> instead of <div id=&quot;footer&quot;> </li></ul>
  12. 12. HTML 5 , what it isn't. <ul><li>It's not just canvas, canvas is a part of the HTML </li></ul><ul><li>5 spec. &quot;The canvas element provides scripts </li></ul><ul><li>with a resolution-dependent bitmap canvas, </li></ul><ul><li>which can be used for rendering graphs, game </li></ul><ul><li>graphics, or other visual images on the fly.” </li></ul>
  13. 13. HTML 5 , what it isn't. <ul><li>It's not javascript </li></ul>
  14. 14. What can we use now? <ul><li>New semantic elements <header>, <section>, etc. </li></ul><ul><li>Geolocation </li></ul><ul><li>Editable Content </li></ul><ul><li>Microdata </li></ul><ul><li>Canvas </li></ul><ul><li>Video/Audio </li></ul>
  15. 15. What can we use now? <ul><li>New semantic elements <header>, <section>, etc. </li></ul><ul><li>Geolocation </li></ul><ul><li>Editable Content </li></ul><ul><li>Microdata </li></ul><ul><li>Canvas </li></ul><ul><li>Video/Audio </li></ul>
  16. 16. Real World Example <ul><li> </li></ul>
  17. 17. Real World Example <ul><li><div> vs <section> vs <article> </li></ul><ul><li><div> </li></ul><ul><li>The DIV element, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to </li></ul><ul><li>documents. This element defines content to be block-level (DIV) but impose no other presentational idioms on the </li></ul><ul><li>content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML </li></ul><ul><li>to their own needs and tastes. </li></ul><ul><li><section> </li></ul><ul><li>The section element represents a generic document or application section. A section, in this context, is a thematic </li></ul><ul><li>grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed </li></ul><ul><li>dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, </li></ul><ul><li>news items, contact information. </li></ul><ul><li><article> </li></ul><ul><li>The article element represents a component of a page that consists of a self-contained composition in a document, </li></ul><ul><li>page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This </li></ul><ul><li>could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive </li></ul><ul><li>widget or gadget, or any other independent item of content. </li></ul>
  18. 18. Real World Example <ul><li><section class=&quot;story&quot; id=&quot;story-video&quot; data-controller=&quot;Video&quot; data-videoid=&quot;821835377001&quot; data-scrolloffset=&quot;100&quot; data-nav=&quot;Home&quot; data-align=&quot;center&quot;> </li></ul><ul><li> </li></ul><ul><li> <article data-omniture=&quot;Video&quot;> </li></ul><ul><li> </li></ul><ul><li> <div class=&quot;video&quot;> </li></ul><ul><li> <a href=&quot;#/play&quot; class=&quot;play-button&quot;>Play</a> </li></ul><ul><li> <h1 id=&quot;video-preroll&quot;>This film is made from 100% recycled ads.</h1> </li></ul><ul><li> </div> </li></ul><ul><li> </li></ul><ul><li> </article><!--video--> </li></ul><ul><li> </li></ul><ul><li> <div class=&quot;darkslide&quot;></div> </li></ul><ul><li> <div id=&quot;video-container&quot;></div> </li></ul><ul><li> <a href=&quot;#/close_video&quot; id=&quot;close-video&quot; title=&quot;Close&quot;>Close</a> </li></ul><ul><li></section><!--story--> </li></ul>
  19. 19. Real World Example <ul><li><section class=&quot;story&quot; id=&quot;story-world-championship&quot; data-controller=&quot;StoryWorldChampionshipJersey&quot; data-scrolloffset=&quot;50&quot; data-nav=&quot;8 Plastic Bottles&quot;> </li></ul><ul><li> </li></ul><ul><li> <article> </li></ul><ul><li> <header data-omniture=&quot;World-Championship-Jersey&quot;> </li></ul><ul><li> <h2>Our products are a load of rubbish.</h2> </li></ul><ul><li> <h1>8 Plastic Bottles</h1> </li></ul><ul><li> <p> </li></ul><ul><li> Each Nike 2010 World Championship Football jersey is made entirely from recycled polyester. That's up to eight recycled plastic bottles per jersey. In total, that diverted nearly 13 million plastic bottles from landfills. Yes, you read right. 13 million. Plastic. Bottles. </li></ul><ul><li> </p> </li></ul><ul><li> </header> </li></ul><ul><li> </li></ul><ul><li> <section class=&quot;article-content”></section><!--article-content--> </li></ul><ul><li> </article><!--article--> </li></ul><ul><li><div class=&quot;bg&quot;></div> </li></ul><ul><li> </li></ul><ul><li></section><!--story--> </li></ul>
  20. 20. Real World Example <ul><li><nav class=&quot;more&quot;> </li></ul><ul><li><a href=&quot;#/more&quot;></a> </li></ul><ul><li></nav><!--more--> </li></ul>
  21. 21. Resources <ul><li>Learn: </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Use: </li></ul><ul><li> </li></ul><ul><li> </li></ul>