2022 HTML5: The future is now

1,870 views
1,671 views

Published on

The final spec of html5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,870
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • HTML 4.01 has remained largely the same for over a decade. During this time, the markup has been used and misused in so many ways that it is evident a new markup is needed to support the current demands of page development.\n\nCSS 2.1 has gone from a working draft to candidate recommendation within the W3C, and back to working draft over the last six years. Nevertheless, CSS 2.1 has merely served as an update fixing minor errors within the CSS 2 specification. The major features of CSS have largely remained unchanged since 1998.\n\nECMAScript underwent 3 revisions from 1997 until 1999. After that, little occurred in the specification. Other features, such as the XMLHttpRequest, have appeared since, but these are a result of widespread adoption by numerous browser vendors and not as a result of updates to any specifications. Disagreements as to how ECMAScript 4 should look led to the formation of ECMAScript Harmony and the now abandoned ECMAScript 4. ECMAScript 5 was released in December of 2009. It is beginning to pick up support within the current generation of browsers.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - This triggers standards mode even in ie6\n
  • \n
  • - Use only when server is unable to set the charset via headers.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Because a <header> should not contain a header or footer element, a complex page header might require a section instead.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Pretty convenient, it replaces JS to set default text.\n
  • \n
  • JavaScript validation will still be necessary when form validation is needed\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 2022 HTML5: The future is now

    1. 1. 2022 HTML5: The future is now Gonzalo Cordero F2E Summit 2011
    2. 2. Looking back• The front-end has lacked major updates for over a decade CSS 2 HTML 4.01 ECMASCript 3 (1998) (1999) (1999)
    3. 3. Looking back...We’ve been working on 10 years old Technology
    4. 4. Got Milk? You wouldn’t drink a 9 years old milk would you?
    5. 5. HTML5 To Save the day
    6. 6. So what’s HTML5?HTML5~=Buzz + HTML5 Tags + CSS3 + New JS Apis
    7. 7. can I haz HTML5?The W3C and WHATWG are currently working on the specs
    8. 8. can I haz HTML5?...And then there is this whole thing about 2022...
    9. 9. in the year 2022...We will have floating skateboards... (And awesome looking nike shoes)
    10. 10. In the year 2022...Skynet will be ruling the world...or not.
    11. 11. besides...
    12. 12. and...
    13. 13. and...The HTML5 spec will be ready...
    14. 14. and...The HTML5 spec will be ready...
    15. 15. ishtml5readyyet.com
    16. 16. Plus Crockford says we gotta start from scratch...
    17. 17. can I haz html5?So just when you thought your problems were going away...
    18. 18. can I haz HTML5?Browser vendors still deciding what and how
    19. 19. Welcome to the life of a Front End engineer
    20. 20. This concludes this presentation....
    21. 21. Go see a therapist and come back in 10 years...
    22. 22. Ok, It’s really not that bad... I promise
    23. 23. The future is now
    24. 24. The future is now
    25. 25. The future is now
    26. 26. The future is now
    27. 27. The future is now
    28. 28. HTML5• Is here to stay.• You can start using it today.• No need to throw away your previous code.
    29. 29. So what’s new?• Page level changes• New HTML Elements
    30. 30. Doctype: Before<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    31. 31. Doctype: now <!DOCTYPE html>
    32. 32. Meta: Before<meta http-equiv="Content-Type" content="text/ html; charset=utf-8">
    33. 33. Meta: Now<meta charset="utf-8">
    34. 34. Types No-More Assumes text/css<link rel="stylesheet" href="main.css"> Assumes text/javascript <script>....</script>
    35. 35. <link> & <a> relations• Examples: <a rel="archives" href="http://myblog.com/archives">old posts</a> <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
    36. 36. <link> & <a> relations• Other values: alternate, author, bookmark, first, help, icon, index, last, next, noreferrer, pingback, prefetch, prev, search...
    37. 37. HTML5 Elements• HTML5 provides new structural block-level elements: - Header - Nav - Section - Footer - Article Aside
    38. 38. HTML5 Elements• HTML5 provides new structural block-level elements: - Header <header> - Nav <nav> <sec$on> - <ar$cle> <aside> Section <ar$cle
> - Footer <ar$cle
> - Article <footer> Aside
    39. 39. The Semantic of semantics• Better organized, easier to maintain.• Screen readers.• Open to future applications: Advanced rss readers, widgets, etc.
    40. 40. Header blocks : before <div id="header">...</div>
    41. 41. Headers blocks: Now <header>...</header>
    42. 42. Headers• ...represents a group of introductory or navigational aids.• can have multiple header elements on a page• it is defined by its content, not its position• Should not exist within another <header> or within <footer>
    43. 43. Header
    44. 44. Header <header><header>
    45. 45. Headers: Example <div id="header"> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving Machine</h2> </div><header> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving Machine</h2></header>
    46. 46. hgroups• Related headings (h1-h6) may be grouped together (wrapped) and treated as a single structure in the document outline<header> <hgroup> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving ßMachine</h2> </hgroup></header>
    47. 47. Nav : Before<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul></div>
    48. 48. Nav : after<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul></nav>
    49. 49. Nav
    50. 50. Nav <nav><nav>
    51. 51. Nav• ...represents a section of a page that links to other pages or to parts within the page• only sections that consist of major navigation blocks are appropriate for the <nav> element
    52. 52. Sections• "...represents a generic section of a document or application. ...is a thematic grouping of content, typically with a heading."• It allows to reset the document outline
    53. 53. Sections<article> <hgroup> <h1>My Title</h1> <h2>My Subtitle</h2> </hgroup> <section> <h1>Section Title</h1> <p>Article content</p> <section> <h1>Sub-content title</h1> <p>Article sub-content</p> </section> </section></article>
    54. 54. Sections: Rule of thumb• Dont use it just as hook for styling or scripting; thats a <div>• Dont use it if <article>, <aside> or <nav> is more appropriate• Dont use it unless there is naturally a heading at the start of the section
    55. 55. Articles: before<div class="entry"> <h2> <a href="something.html" rel="bookmark" title="link to this post"> Travel day </a> <p class="post-date">October 22, 2009</p> </h2> ...</div>
    56. 56. Articles: now<article> <header> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> <p class="post-date">October 22, 2009</p> </header> ...</article>
    57. 57. Articles• used for self-contained related content• useful for blog posts, news stories, comments, reviews, forum posts• can also be used for widget types of content, e.g. stock ticker• can be nested, as well as <section>
    58. 58. Aside• <aside> is another specialized form of section• Provides tangentially related content• May be used for • advertisements • pull quotes or sidebar content
    59. 59. Aside<article> <div class="article"> <h1>Blog 2</h1> <p>I discovered a new planetwhile...</p> <aside> <p>The number of potential planets that can support life are...</p> </aside> </div></article>
    60. 60. Aside: example <aside>
    61. 61. Footer: before<div id="footer">...</div>
    62. 62. Footer: now<footer>...</footer>
    63. 63. Footer• Indicate concluding content in a section• May be used to contain copyright info, author info, links to additional references, etc.
    64. 64. Footer
    65. 65. Footer<footer>
    66. 66. Other Notable Elements• <figure>, <figcaption>• <mark>• <time>, <meter>• <details> & <summary>• <b>, <i>, <small> revisited• Custom attributes• Global attributes
    67. 67. HTML5 Forms: now• New input types• Use of required fields, placeholders, and autofocus• Validation capabilities• Form elements outside of the <form> tag
    68. 68. PlaceHolders<input type="email" placeholder="Enter your email"></input>
    69. 69. Autofocus • Sets an element to be the default starting element in the form (can only be used once in the form)<input type="text" name="yahoo-search" autofocus>
    70. 70. Required fields<input type="password" name="password" required>
    71. 71. New input types• tel • search• number • range• url • color• email • date(month, week...)` For
the
input
types
that
perform
valida4on,
visual
 feedback
should
be
provided
as
to
the
validity
of
the
 data
by
using
the
:valid
and
:invalid
CSS
pseudo‐classes
    72. 72. HTML5 Forms- validation• Opera and FF4 offer form validations.
    73. 73. Media: Audio&Video• A <source> must be specified in a format supported by that browser• Video formats:• Audio: Browsers support WAV, MP3, Ogg Vorbis
    74. 74. Media: Audio&Video<video id="movie" width="320" height="240" controls> <source src="pr6.mp4"> <source ...></video><audio controls> <source src="intro.mp3"></audio>
    75. 75. Graphics: Canvas&SVG
    76. 76. Canvas• It gives you a "drawing" surface• You manipulate it via JS• Accessibility is an challenge. <canvas id="myCanvas" width="300" height="150"> Default fallback text </canvas> var mycanvas = document.getElementById("myCanvas").getContext(" 2d"); //draws a rectangle filled with the current fill style mycanvas.fillrect(x, y, width, height);
    77. 77. SVG• XML-based vector graphics format• You can also style SVG with CSS and add dynamic behavior to it using the SVG DOM• relatively accessible.
    78. 78. SVG: Example<svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> <animate attributename="rx" values="0%;50%;0%" dur="2s" repeatcount="indefinite"> <animate attributename="ry" values="0%;50%;0%" dur="2s" repeatcount="indefinite"> </animate></svg>
    79. 79. Playing nice with the elders• Different workarounds have emerged • Shivs(Javascript DOM injection) • Wrapping with HTML4 Elements
    80. 80. Pre-HTML5<style> article,aside,details,figcaption,figure,footer, header,hgroup,menu,nav,section { display: block; }</style>
    81. 81. HTML4 Wrapping<section> <div class="section"> <!-- content --> </div></section>
    82. 82. Pre-html5• Don’t rely on html5 elements for styling or DOM manipulation• Avoid using css child selector rules.
    83. 83. Conclusion• HTML5 is here to stay• Use it today. Don’t be afraid.• Get excited and blog about it!
    84. 84. Q&Atwitter.com/goonieiam

    ×