HTML5Everything changes...
HTML5 is awesome!
HTML 4<h2>Título de un artículo</h2><p>    <strong>Había una vez...<strong>    un ninja que <em>estaba sólo</em>.</p>
HTML5<h2>Título de un artículo</h2><p>    <strong>Había una vez...<strong>    un ninja que <em>estaba sólo</em>.</p>
HTML5<h2>Título de un artículo</h2><p>    <strong>Había una vez...<strong>    un ninja que <em>estaba sólo</em>.</p>
Thanks!
HTML5 is awesome!
HTML5  HTML   CSSJavaScript
Collection of tools• Semantics• Offline & Storage• Devices Access• Connectivity• Multimedia• 3D, Graphics & Effects• Perfor...
Semantics & Markup
Semantics• More meaningful elements• Better semantic tags and attributes• Semantic structure• Microdata / Microformats• AR...
Doctype
Doctype• Switch the content into standards mode• Prevent quirks mode• Case-insensitive
<!DOCTYPE html PUBLIC"-/    /W3C/  /DTD XHTML 1.0  Transitional//EN""http://www.w3.org/TR/xhtml1/            DTD/xhtml1-tr...
<!DOCTYPE html PUBLIC"-/    /W3C/  /DTD XHTML 1.0  Transitional//EN""http://www.w3.org/TR/xhtml1/            DTD/xhtml1-tr...
<!DOCTYPE html>
Better semantic tags
HTML 4
HTML5
Custom data attribute
Custom data attributedata-*inside HTML elementsParse them using JavaScript (getAttributemethod)* = custom attributes: user...
data-* <a id="CATEG:1039" href="/camaras">Cámaras</a>
data-* <a data-id="CATEG:1039" href="/camaras">Cámaras</a>
Mircrodata• Semantic attributes and properties• Search engines, Web crawlers, Browsers• Provide a richer browsing experien...
<p itemscope> I’m going to the <a itemprop="url"href="http://www.saltercane.com/">Salter Cane</a> gig<data itemprop="date"...
ARIA
ARIA attributes• Improve the accessibility of RIAs• JavaScript components• Helps with dynamic content• Semantic attributes...
<a href=”/buy” role=”button”>Comprar</a>
<div role=”tooltip”>For Nerds, by Nerds</div>
Forms
New forms• Semantic types and attributes• Mobile compatibility• Validation engine• Custom patterns• More control
<input type=”email”>   <input type=”tel”>
<input type=”date”>                   <input type=”range”>                      <input type=”color”>
<input type=“text” placeholder=”Search Bookmarks and His”><input type=“text” required=“required”>
Offline & storage
Web Storage• Local storage / Session storage• IndexedDB• Application Cache (offline apps)
Local Storage• JavaScript API• Cliente-side database• Key-value notation (JSON)• Stored in users browsers• 5 MB (per domai...
<ul id="tree1"       role="tree"       tabindex="0"       aria-labelledby="label_1">  <li role="treeitem" tabindex="-1" ar...
Session Storage       = Local Storage
Session Storage               =         Local Storagelimited to the time span where the currentwindow is openonce the wind...
IndexDB
IndexDB• Web SQL database must die!• Object Store• http://www.html5rocks.com/en/  tutorials/indexeddb/todo/
AppCache
AppCache• Offline First• Chache manifest (*.appcache => file)• Load from local cache (HTML, CSS, JS  and images)• mimetype: ...
<html manifest="chico.appcache">CACHE MANIFEST# v0.11CACHE:versions/latest/chico.cssversions/latest/jquery.jsversions/late...
Device Access
Device Access• Geolocation API• Camera / Microphone• Local Data (contacts and events)• Device Orientation• Device Motion• ...
Device Access• Geolocation API• Camera / Microphone• Local Data (contacts and events)• Device Orientation• Device Motion• ...
Connectivity
Connectivity• Web Sockets• Server-sent events• Real time
Web Sockets• JavaScript API• Real time connections• Bi-directional communications
Who is using Web        Sockets?• Facebook (chat, notifications, comments)• Gmail• Twitter
Multimedia
Multimedia• Video• Audio
Who is using          Multimedia?• Youtube• Vimeo• GrooveShark
Video   Audio
3D, Graphics, Effects
3D, Graphics, Effects• SVG• Canvas• WebGL• CSS3 3D
SVG• Scalable Vector Graphic• Language for rich graphical content like  as:  • Pie charts,  • Two-dimensional graphs
<svg id="svgelem" height="200" xmlns="http:/ /www.w3.org/2000/svg">! <circle id="redcircle" cx="50" cy="50" r="50" fill="re...
Canvas• HTML Element• Draw graphics (with JavaScript)• Control every pixel
Canvas
WebGL• Web-based Graphics Library• Interactive 3D graphics• Canvas 3D• JavaScript API
WebGL        http://helloracer.com/webgl/
Performance &  Integration
Performance &       Integration• Web Workers• XMLHttpRequest2
Web Workers• JavaScript API• Load JS file dynamically• Process code in a background• Multi JavaScript thread
XMLHttpRequest2• Ajax• Uploading progress events (progress tag)• Working with files (file system api)• FormData• CORS (cross...
CSS3
CSS3• Transitions           Webfonts                        Text wrapping• Animations                        Columns• Tran...
Transforms, Transitions and Animations       http://leaverou.github.com/animatable/       http://cubic-bezier.com/#.17,.67...
Gradientsbtn.primary{  background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077);}
Rounded cornersbtn.primary{  border-radius: 5px;}
CSS selectorsp:nth-child(3) { }input:checked { }p:first-of-type { }p ~ ul { }
Thanks!
HTML5: Introduction
Upcoming SlideShare
Loading in …5
×

HTML5: Introduction

785 views

Published on

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

No Downloads
Views
Total views
785
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5: Introduction

  1. 1. HTML5Everything changes...
  2. 2. HTML5 is awesome!
  3. 3. HTML 4<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
  4. 4. HTML5<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
  5. 5. HTML5<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
  6. 6. Thanks!
  7. 7. HTML5 is awesome!
  8. 8. HTML5 HTML CSSJavaScript
  9. 9. Collection of tools• Semantics• Offline & Storage• Devices Access• Connectivity• Multimedia• 3D, Graphics & Effects• Performance & Integration
  10. 10. Semantics & Markup
  11. 11. Semantics• More meaningful elements• Better semantic tags and attributes• Semantic structure• Microdata / Microformats• ARIA attributes• New form types• More simple and cool
  12. 12. Doctype
  13. 13. Doctype• Switch the content into standards mode• Prevent quirks mode• Case-insensitive
  14. 14. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
  15. 15. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
  16. 16. <!DOCTYPE html>
  17. 17. Better semantic tags
  18. 18. HTML 4
  19. 19. HTML5
  20. 20. Custom data attribute
  21. 21. Custom data attributedata-*inside HTML elementsParse them using JavaScript (getAttributemethod)* = custom attributes: user, name, phone,id, chico, meli, etc...
  22. 22. data-* <a id="CATEG:1039" href="/camaras">Cámaras</a>
  23. 23. data-* <a data-id="CATEG:1039" href="/camaras">Cámaras</a>
  24. 24. Mircrodata• Semantic attributes and properties• Search engines, Web crawlers, Browsers• Provide a richer browsing experience for users
  25. 25. <p itemscope> I’m going to the <a itemprop="url"href="http://www.saltercane.com/">Salter Cane</a> gig<data itemprop="date" datetime="2010-07-18">nextweek</data>. Excited!</p>
  26. 26. ARIA
  27. 27. ARIA attributes• Improve the accessibility of RIAs• JavaScript components• Helps with dynamic content• Semantic attributes and properties: • roles (tree, navigation, presentation) • properties (aria-selected, aria-hidden)
  28. 28. <a href=”/buy” role=”button”>Comprar</a>
  29. 29. <div role=”tooltip”>For Nerds, by Nerds</div>
  30. 30. Forms
  31. 31. New forms• Semantic types and attributes• Mobile compatibility• Validation engine• Custom patterns• More control
  32. 32. <input type=”email”> <input type=”tel”>
  33. 33. <input type=”date”> <input type=”range”> <input type=”color”>
  34. 34. <input type=“text” placeholder=”Search Bookmarks and His”><input type=“text” required=“required”>
  35. 35. Offline & storage
  36. 36. Web Storage• Local storage / Session storage• IndexedDB• Application Cache (offline apps)
  37. 37. Local Storage• JavaScript API• Cliente-side database• Key-value notation (JSON)• Stored in users browsers• 5 MB (per domain)• the data persists (after the browser is shutdown or the session is closed)
  38. 38. <ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li></ul>
  39. 39. Session Storage = Local Storage
  40. 40. Session Storage = Local Storagelimited to the time span where the currentwindow is openonce the window is shut will be invalid
  41. 41. IndexDB
  42. 42. IndexDB• Web SQL database must die!• Object Store• http://www.html5rocks.com/en/ tutorials/indexeddb/todo/
  43. 43. AppCache
  44. 44. AppCache• Offline First• Chache manifest (*.appcache => file)• Load from local cache (HTML, CSS, JS and images)• mimetype: text/cache-manifest• 5MB (chrome = unlimitedStorage)• window.applicationCache
  45. 45. <html manifest="chico.appcache">CACHE MANIFEST# v0.11CACHE:versions/latest/chico.cssversions/latest/jquery.jsversions/latest/chico.jssrc/assets/ninja.pngNETWORK:*
  46. 46. Device Access
  47. 47. Device Access• Geolocation API• Camera / Microphone• Local Data (contacts and events)• Device Orientation• Device Motion• Vibration• Notification
  48. 48. Device Access• Geolocation API• Camera / Microphone• Local Data (contacts and events)• Device Orientation• Device Motion• Vibration• Notification
  49. 49. Connectivity
  50. 50. Connectivity• Web Sockets• Server-sent events• Real time
  51. 51. Web Sockets• JavaScript API• Real time connections• Bi-directional communications
  52. 52. Who is using Web Sockets?• Facebook (chat, notifications, comments)• Gmail• Twitter
  53. 53. Multimedia
  54. 54. Multimedia• Video• Audio
  55. 55. Who is using Multimedia?• Youtube• Vimeo• GrooveShark
  56. 56. Video Audio
  57. 57. 3D, Graphics, Effects
  58. 58. 3D, Graphics, Effects• SVG• Canvas• WebGL• CSS3 3D
  59. 59. SVG• Scalable Vector Graphic• Language for rich graphical content like as: • Pie charts, • Two-dimensional graphs
  60. 60. <svg id="svgelem" height="200" xmlns="http:/ /www.w3.org/2000/svg">! <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /></svg>
  61. 61. Canvas• HTML Element• Draw graphics (with JavaScript)• Control every pixel
  62. 62. Canvas
  63. 63. WebGL• Web-based Graphics Library• Interactive 3D graphics• Canvas 3D• JavaScript API
  64. 64. WebGL http://helloracer.com/webgl/
  65. 65. Performance & Integration
  66. 66. Performance & Integration• Web Workers• XMLHttpRequest2
  67. 67. Web Workers• JavaScript API• Load JS file dynamically• Process code in a background• Multi JavaScript thread
  68. 68. XMLHttpRequest2• Ajax• Uploading progress events (progress tag)• Working with files (file system api)• FormData• CORS (cross domain request)
  69. 69. CSS3
  70. 70. CSS3• Transitions Webfonts Text wrapping• Animations Columns• Transforms Opacity• Gradients Backgrounds• Rounded corners CSS selectors• Flexible Box Model Shadows• Multi-column
  71. 71. Transforms, Transitions and Animations http://leaverou.github.com/animatable/ http://cubic-bezier.com/#.17,.67,.83,.67
  72. 72. Gradientsbtn.primary{ background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077);}
  73. 73. Rounded cornersbtn.primary{ border-radius: 5px;}
  74. 74. CSS selectorsp:nth-child(3) { }input:checked { }p:first-of-type { }p ~ ul { }
  75. 75. Thanks!

×