Introduction toHTML5
Who Are You?
What is“HTML5”?
“HTML5” is anmarketing termthat companies   use to mean  “cool shit that   works on an
“HTML5”•   HTML5•   CSS 3•   JavaScript•   CSS 2•   JavaScript Frameworks•   Canvas (Actually part of HTML5)•   Video tag ...
What is HTML5?
We’ll come back  to that in a    second.
Review
What is HTML?
HTML is alanguage that   provides  structure to    content
Start with ContentwhichElement?Trying to answer that ageold question:Should that be a div, aspan, or something else?HomeCo...
Add Structure<h1>whichElement?</h1><h2>Trying to answer that age oldquestion:</h2><h2>Should that be a div, a span, orsome...
What is CSS?
CSS is a language that    providesstyle to content
Add Style<h1>whichElement?</h1><style type="text/css"><h2>Trying to answer that age old     h1{question:</h2><h2>Should th...
HTML/CSS  results inseparation ofcontent from   display
Why?
Why separate content anddisplay?• Helps SEO• Makes work more portable or changeable• Allows for multiple ways of display
Change Style<style type="text/css"><style type="text/css">      h1{      h1{ color: red;            font-size: 16px;      ...
What isJavaScript?
JavaScript is alanguage that   provides  behavior to   content
Behavior<html><head><script type="text/javascript">    function createAlertMessage(){    alert("Stop what youre doing!"); ...
ContentStructure  StyleBehavior
Content - Database Structure - HTML    Style - CSS    Behavior -    JavaScript
Content - HTMLStructure - HTML   Style - CSS   Behavior -   JavaScript
What is HTML5?
The 5 thand most  recent publicspecification for HTML from the public groups     that….
The 5 thand most  recent publicspecification for HTML from the public groups     that….
The most recentspecification for    HTML
The most     recent* specification**  for HTML***   * It’s not technically the most recent ** It’s actually a standard*** ...
New in HTML5• New semantic elements  – article, section, aside, header, footer, etc• New multimedia elements  – audio, vid...
What is CSS3?
A series ofrecommendation  s modules to  the standards  committees…
Can’t we just say “The latestofficial version of      CSS?”
It’s not official.
It’s not the   latest.
It’s not aversion.
Let’s just say  “HMTL5” foreverything? Ok?
What can you  do with “HTML5”?
SEMANTICS
Semantic HTML     means your markup describesit’s content without     presenting it
What do we mean by SemanticHTML• HTML where proper elements are used  – <p> denotes paragraph  – <ul> denotes an list of i...
Semantic HTML is a moving target• Not Boolean• Not always objective• A continuum
Semantic HTMLRELATIVELY UNSEMANTIC                                RELATIVELY SEMANTIC<body background="css/bg.png"><font f...
HTML5?         What does this         have to do with         HTML5?
HTML5 adds moresemantics<body>    <header>           <h1>The Awesome Blog of Awesome</h1>           <p>Awesome is a State ...
Outlines• Outlines seem really important to the  people who push semantic HTML 5• Are they really important?  – Today: No ...
Header
HeaderPREVIOUSLY<div id="header">  <h1>The Awesome Blog of Awesome</h1>   <p class="tagline">Awesome is a State of Mind</p...
Footer
FooterPREVIOUSLY<div id="footer”>  <p>Copyright 2011 - Terry Ryan</p></div>HTML 5<footer>    <p>Copyright 2011 - TerryRyan...
Navigation
NavigationPREVIOUSLY                           HTML 5<div id="nav">                                     <nav> <ul>        ...
Articles
ArticlesPREVIOUSLY                                       HTML5<div class="post”>                                          ...
An article is apiece of content    that canstand on it’s own
Content          57
ContentPREVIOUSLY              HTML5<div class=”content”>                        <div class=”content”><div class="post”>  ...
Also can be correctPREVIOUSLY              HTML5<div class=”content”>                        <section class=”content”><div...
Umm      That’s great, but      frankly not that      much of a different,      how is that better?
Benefit 1BEFORE THESE ELEMENTS   AFTER  </div>                  </div> </div>                  </article></div>           ...
Benefit 2• Less monkeying with content hierarchies
<article> <header>  <h1><a href="">I Made a Post Thingie</a></h1>                                                         ...
Benefit 3• No longer bound to one header or one nav  can have multiple.
New elements work across   modern  browsers without fail
What’s  you’redefinition of Modern?
Use the HTML 5Shiv  http://code.google.com/p/html5shiv/
FORM
HTML5 includes        lots of      new <input>         types69
They aren’t     supported      on every      browser70
All browsers     default to     showing     unknown input     types as text71
Search<input type=“search” name=“search” />• Support is spotty• Browser vendors tend to  round, add magnifying  glass, etc.
Email<input type=“email” name=“email” />• Provides validation• Provides email keyboard on iOS devices.
Url<input type=“url” name=“url” />Provides validationProvides url keyboard on iOS devices.
Number<input type=“number” name=“cost” />Provides keypad on iOS andAndroid devices.Provides a stepper on desktopsTakes att...
Tel<input type=“tel” name=“cell” />• Provides keypad on iOS  and Android devices.
Not wellsupported, but have potential
Range<input type=“range” name=“volume” />•   Provides a set of values•   The slider allows you to pick one•   Not terribly...
Date<input type=“date” name=“dob” />•   Provides validation•   On Opera     •   Displays a data picker•   On Safari/Chrome...
FOR
Output<output />Semantically correct placeholder forcalculated values.Can also be used a label for inputtype=“slider”
Output in Action<form class="order">   <label for="quantity">Quantity:</label>   <input id="quantity" name="quantity" type...
meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results
progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progress througha multistep formCould be pr...
For Future Reference• HTML 5 General  – http://diveintohtml5.org  – http://html5doctor.com• HTML5 Semantics  – http://dive...
MULTIMEDIA
Canvas
Canvas• A drawing surface for  – Manipulating images  – Drawing  – Saving Content
Demo
More resources forCanvas• http://www.html5rocks.com/en/tutorials/canvas/integrating/• http://dev.opera.com/articles/view/h...
Video
<Image>for movies
Audio
<image>for sounds
Web Audio API
<canvas>for sounds
OTHERS
Others• Offline Storage• Drag and Drop
CSS3
RememberCSS3 is a series of modules…
CSS Modules• Transforms    – Origins•   Shadows•   Gradients•   Transitions•   Animations
Demo       Various CSS       Coolness
Why CSS3?
Reasons• Hardware Accelerated• Philosophically a display issue• Hardware Accelerated
CONCLUSIONS
“HTML5” vs  HTML5
Follow up?• Preso will be up at  – http://slideshare.net/tpryan• Feel free to contact me  – terry.ryan@adobe.com  – http:/...
Upcoming SlideShare
Loading in...5
×

Introduction to HTML5

5,776

Published on

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,776
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
218
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • Designer?Developer?Both?jQuery?jQuery Mobile?PhoneGap?TypeKit?Adobe Edge?
  • Not all parts of it have been accepted
  • There is already work on CSS4
  • It’s a collection of modules.
  • Introduction to HTML5

    1. 1. Introduction toHTML5
    2. 2. Who Are You?
    3. 3. What is“HTML5”?
    4. 4. “HTML5” is anmarketing termthat companies use to mean “cool shit that works on an
    5. 5. “HTML5”• HTML5• CSS 3• JavaScript• CSS 2• JavaScript Frameworks• Canvas (Actually part of HTML5)• Video tag (Actually part of HTML5)• Anything the speaker wants it to mean
    6. 6. What is HTML5?
    7. 7. We’ll come back to that in a second.
    8. 8. Review
    9. 9. What is HTML?
    10. 10. HTML is alanguage that provides structure to content
    11. 11. Start with ContentwhichElement?Trying to answer that ageold question:Should that be a div, aspan, or something else?HomeContributeAboutOne of the main challengeswe see in building semanticcontent is picking what tagto use when.
    12. 12. Add Structure<h1>whichElement?</h1><h2>Trying to answer that age oldquestion:</h2><h2>Should that be a div, a span, orsomething else?</h2><ul><li>Home</li><li>Contribute</li><li>About</li></ul><p>One of the main challenges we seein building semantic content ispicking what tag to use when. Thissite seeks to help with that. Now,before we get all judgy and preachylet me get a few tenants outthere:</p>
    13. 13. What is CSS?
    14. 14. CSS is a language that providesstyle to content
    15. 15. Add Style<h1>whichElement?</h1><style type="text/css"><h2>Trying to answer that age old h1{question:</h2><h2>Should that red;a div, a span, or color: besomething else?</h2> } h2{<ul> color: blue;<li>Home</li> font-style: italic;<li>Contribute</li> }<li>About</li></ul> p{<p>One ofcolor:main challenges we see the white;in building semantic content is background-color: black;picking what tag to use when. Thissite }seeks to help with that. Now,before we get all judgy and preachylet me get a few tenants out</style>there:</p>
    16. 16. HTML/CSS results inseparation ofcontent from display
    17. 17. Why?
    18. 18. Why separate content anddisplay?• Helps SEO• Makes work more portable or changeable• Allows for multiple ways of display
    19. 19. Change Style<style type="text/css"><style type="text/css"> h1{ h1{ color: red; font-size: 16px; color: red; } } h2{ h2{ color: blue; font-size: 26px; } color: blue; ul{ font-style: italic; } list-style: none; clear: both; display: block; p{ width: 100%; height: 30px; color: 0; padding: white; background-color: black; } } li{ float: left; padding-right: 20px;</style> }</style>
    20. 20. What isJavaScript?
    21. 21. JavaScript is alanguage that provides behavior to content
    22. 22. Behavior<html><head><script type="text/javascript"> function createAlertMessage(){ alert("Stop what youre doing!"); }</script></head><body><button onclick="createAlertMessage()">Alert!</button></body></html>
    23. 23. ContentStructure StyleBehavior
    24. 24. Content - Database Structure - HTML Style - CSS Behavior - JavaScript
    25. 25. Content - HTMLStructure - HTML Style - CSS Behavior - JavaScript
    26. 26. What is HTML5?
    27. 27. The 5 thand most recent publicspecification for HTML from the public groups that….
    28. 28. The 5 thand most recent publicspecification for HTML from the public groups that….
    29. 29. The most recentspecification for HTML
    30. 30. The most recent* specification** for HTML*** * It’s not technically the most recent ** It’s actually a standard*** While we’re at it, there is no HTML5 only HTMLThis is why pragmatic people hate standards bodies sometimes
    31. 31. New in HTML5• New semantic elements – article, section, aside, header, footer, etc• New multimedia elements – audio, video, canvas• New API’s for manipulation in JavaScript – Offline data, drag and drop, web storage
    32. 32. What is CSS3?
    33. 33. A series ofrecommendation s modules to the standards committees…
    34. 34. Can’t we just say “The latestofficial version of CSS?”
    35. 35. It’s not official.
    36. 36. It’s not the latest.
    37. 37. It’s not aversion.
    38. 38. Let’s just say “HMTL5” foreverything? Ok?
    39. 39. What can you do with “HTML5”?
    40. 40. SEMANTICS
    41. 41. Semantic HTML means your markup describesit’s content without presenting it
    42. 42. What do we mean by SemanticHTML• HTML where proper elements are used – <p> denotes paragraph – <ul> denotes an list of items, where the order is not important – <address> contains address information – <div> and <span> are used to describe information• HTML where extraneous elements are not misused – No <p> for line breaking – No <blockquote> for indentation – No <h1> for big text• HTML without presentation information – No <font>, <b>, <i> tags – No inline styles
    43. 43. Semantic HTML is a moving target• Not Boolean• Not always objective• A continuum
    44. 44. Semantic HTMLRELATIVELY UNSEMANTIC RELATIVELY SEMANTIC<body background="css/bg.png"><font face="Calibri”><center> <body><table width="800" bgcolor="#FFFFFF" border="10"bordercolor="#FFFFFF"><tr><td> <div id="header"><table width="100%" bgcolor="#f0f0f0" border="0“><tr> <h1>The Awesome Blog of<td><h1> Awesome</h1><font face="Palatino Linotype">The Awesome Blog ofAwesome</font> <p class="tagline"></h1></td> Awesome is a State of</tr><tr> Mind<td align="right"><p><i>Awesome is a State ofMind</i></p></td> </p></tr></table> </div>
    45. 45. HTML5? What does this have to do with HTML5?
    46. 46. HTML5 adds moresemantics<body> <header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p> </header> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav>
    47. 47. Outlines• Outlines seem really important to the people who push semantic HTML 5• Are they really important? – Today: No – Tomorrow: Who knows?• But this is a semantically correct way of reducing classes and extraneous divs
    48. 48. Header
    49. 49. HeaderPREVIOUSLY<div id="header"> <h1>The Awesome Blog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p></div>HTML 5<header> <h1>The Awesome Blog of Awesome</h1> <h2>Awesome is a State of Mind</h2></header>
    50. 50. Footer
    51. 51. FooterPREVIOUSLY<div id="footer”> <p>Copyright 2011 - Terry Ryan</p></div>HTML 5<footer> <p>Copyright 2011 - TerryRyan</p></footer>
    52. 52. Navigation
    53. 53. NavigationPREVIOUSLY HTML 5<div id="nav"> <nav> <ul> <ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> </ul> </ul></div> </nav>
    54. 54. Articles
    55. 55. ArticlesPREVIOUSLY HTML5<div class="post”> <article><div class="postheader"> <header> <h3><a href="">I Scream My Thoughts</a></h3> <h1><a href="">I Scream My Thoughts</a></h1> <p class="date">August 10, 2011</p> <time>August 10, 2011</time></div> </header><p>You probably havent heard of them duis</p> <p>You probably havent heard of them duis </p></div> </article>
    56. 56. An article is apiece of content that canstand on it’s own
    57. 57. Content 57
    58. 58. ContentPREVIOUSLY HTML5<div class=”content”> <div class=”content”><div class="post”> <article>... ...</div> </article><div class="post”> <article>... ...</div> </article><div class="post”> <article>... ...</div> <article></div> </div>
    59. 59. Also can be correctPREVIOUSLY HTML5<div class=”content”> <section class=”content”><div class="post”> <article>... ...</div> </article><div class="post”> <article>... ...</div> </article><div class="post”> <article>... ...</div> <article></div> </section>
    60. 60. Umm That’s great, but frankly not that much of a different, how is that better?
    61. 61. Benefit 1BEFORE THESE ELEMENTS AFTER </div> </div> </div> </article></div> </div><div id=“footer”> <footer></div> </footer></body> </body>
    62. 62. Benefit 2• Less monkeying with content hierarchies
    63. 63. <article> <header> <h1><a href="">I Made a Post Thingie</a></h1> article header h1 <time datetime="2011-09-02">September 2, 2011</time> </header> <img src="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /> <p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester. Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda, wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson 3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda hipster tofu mcsweeneys master cleanse.</p></article>
    64. 64. Benefit 3• No longer bound to one header or one nav can have multiple.
    65. 65. New elements work across modern browsers without fail
    66. 66. What’s you’redefinition of Modern?
    67. 67. Use the HTML 5Shiv http://code.google.com/p/html5shiv/
    68. 68. FORM
    69. 69. HTML5 includes lots of new <input> types69
    70. 70. They aren’t supported on every browser70
    71. 71. All browsers default to showing unknown input types as text71
    72. 72. Search<input type=“search” name=“search” />• Support is spotty• Browser vendors tend to round, add magnifying glass, etc.
    73. 73. Email<input type=“email” name=“email” />• Provides validation• Provides email keyboard on iOS devices.
    74. 74. Url<input type=“url” name=“url” />Provides validationProvides url keyboard on iOS devices.
    75. 75. Number<input type=“number” name=“cost” />Provides keypad on iOS andAndroid devices.Provides a stepper on desktopsTakes attributes: – Min/Max – Step
    76. 76. Tel<input type=“tel” name=“cell” />• Provides keypad on iOS and Android devices.
    77. 77. Not wellsupported, but have potential
    78. 78. Range<input type=“range” name=“volume” />• Provides a set of values• The slider allows you to pick one• Not terribly precise• Takes attributes: • Min/Max • Step
    79. 79. Date<input type=“date” name=“dob” />• Provides validation• On Opera • Displays a data picker• On Safari/Chrome • Displays ticker• IE • Dashes your hopes and dreams the way only IE can
    80. 80. FOR
    81. 81. Output<output />Semantically correct placeholder forcalculated values.Can also be used a label for inputtype=“slider”
    82. 82. Output in Action<form class="order"> <label for="quantity">Quantity:</label> <input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /> <br /> <label for="price">Price: </label> <input id="price" name="price" type="number" value="19.99" disabled /> <br /> <label for="total">Total: </label> <output id="total" name="total" /> <br /></form><script type="application/javascript">function calc(){ var quantity = document.getElementById("quantity").value; var price = document.getElementById("price").value; var total = document.getElementById("total"); total.value = Math.round(quantity * price * 100)/100;}</script>
    83. 83. meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results
    84. 84. progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progress througha multistep formCould be programmatically changed toindicate progress of program
    85. 85. For Future Reference• HTML 5 General – http://diveintohtml5.org – http://html5doctor.com• HTML5 Semantics – http://diveintohtml5.org/semantics.html• HTML 5 Forms – http://wufoo.com/html5 – http://diveintohtml5.org/forms.html
    86. 86. MULTIMEDIA
    87. 87. Canvas
    88. 88. Canvas• A drawing surface for – Manipulating images – Drawing – Saving Content
    89. 89. Demo
    90. 90. More resources forCanvas• http://www.html5rocks.com/en/tutorials/canvas/integrating/• http://dev.opera.com/articles/view/html-5-canvas-the-basics/• http://www.slideshare.net/bebraw/intro-to-html5-canvas-8312015
    91. 91. Video
    92. 92. <Image>for movies
    93. 93. Audio
    94. 94. <image>for sounds
    95. 95. Web Audio API
    96. 96. <canvas>for sounds
    97. 97. OTHERS
    98. 98. Others• Offline Storage• Drag and Drop
    99. 99. CSS3
    100. 100. RememberCSS3 is a series of modules…
    101. 101. CSS Modules• Transforms – Origins• Shadows• Gradients• Transitions• Animations
    102. 102. Demo Various CSS Coolness
    103. 103. Why CSS3?
    104. 104. Reasons• Hardware Accelerated• Philosophically a display issue• Hardware Accelerated
    105. 105. CONCLUSIONS
    106. 106. “HTML5” vs HTML5
    107. 107. Follow up?• Preso will be up at – http://slideshare.net/tpryan• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×