Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5: Introduction

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Guille Paz Guille Paz
November 02, 2012
Programming
360
8

HTML5: Introduction

Avatar for Guille Paz

Guille Paz

November 02, 2012

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
Avatar for Guille Paz pazguille
0
260
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
280
User First
Avatar for Guille Paz pazguille
1
220
#OfflineFirst
Avatar for Guille Paz pazguille
3
6k
ES6 in Production
Avatar for Guille Paz pazguille
10
3.2k
No me hagas esperar!
Avatar for Guille Paz pazguille
1
200
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
460
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
280
Decoupling your JavaScript
Avatar for Guille Paz pazguille
0
190

Other Decks in Programming

See All in Programming
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
260
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
160
ソフトウェア設計の結合バランス #phperkaigi
Avatar for Takuma Kajikawa kajitack
0
500
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
150
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
3
1k
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
0
150
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
340
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
Avatar for Toranosuke Minamikawa tigertora7571
0
200
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
3
330
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
810
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
400
From Formal Specification to Property Based Test
Avatar for Masato Ohba ohbarye
0
2.4k

Featured

See All Featured
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
530
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
910
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
270
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
140
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
130

Transcript

  1. HTML5 Everything changes...

  2. HTML5 is awesome!

  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. 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. 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. Thanks!

  7. HTML5 is awesome!

  8. HTML5 HTML CSS JavaScript

  9. Collection of tools • Semantics • Offline & Storage •

    Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration

  10. Semantics & Markup

  11. Semantics • More meaningful elements • Better semantic tags and

    attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool

  12. Doctype

  13. Doctype • Switch the content into standards mode • Prevent

    quirks mode • Case-insensitive

  14. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN""http:/ /www.w3.org/TR/xhtml1/

    DTD/xhtml1-transitional.dtd">

  15. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN""http:/ /www.w3.org/TR/xhtml1/

    DTD/xhtml1-transitional.dtd">

  16. <!DOCTYPE html>

  17. Better semantic tags

  18. HTML 4

  19. HTML5

  20. Custom data attribute

  21. Custom data attribute data-* inside HTML elements Parse them using

    JavaScript (getAttribute method) * = custom attributes: user, name, phone, id, chico, meli, etc...

  22. data-* <a id="CATEG:1039" href="/camaras">Cámaras</a>

  23. data-* <a data-id="CATEG:1039" href="/camaras">Cámaras</a>

  24. Mircrodata • Semantic attributes and properties • Search engines, Web

    crawlers, Browsers • Provide a richer browsing experience for users

  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">next week</data>. Excited!</p>

  26. ARIA

  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. <a href=”/buy” role=”button”>Comprar</a>

  29. <div role=”tooltip”>For Nerds, by Nerds</div>

  30. Forms

  31. New forms • Semantic types and attributes • Mobile compatibility

    • Validation engine • Custom patterns • More control

  32. <input type=”email”> <input type=”tel”>

  33. <input type=”date”> <input type=”range”> <input type=”color”>

  34. <input type=“text” placeholder=”Search Bookmarks and His”> <input type=“text” required=“required”>

  35. Offline & storage

  36. Web Storage • Local storage / Session storage • IndexedDB

    • Application Cache (offline apps)

  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. <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. Session Storage = Local Storage

  40. limited to the time span where the current window is

    open once the window is shut will be invalid Session Storage = Local Storage

  41. IndexDB

  42. IndexDB • Web SQL database must die! • Object Store

    • http://www.html5rocks.com/en/ tutorials/indexeddb/todo/

  43. AppCache

  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. <html manifest="chico.appcache"> CACHE MANIFEST # v0.11 CACHE: versions/latest/chico.css versions/latest/jquery.js versions/latest/chico.js

    src/assets/ninja.png NETWORK: *

  46. Device Access

  47. Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification

  48. Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification

  49. Connectivity

  50. Connectivity • Web Sockets • Server-sent events • Real time

  51. Web Sockets • JavaScript API • Real time connections •

    Bi-directional communications

  52. Who is using Web Sockets? • Facebook (chat, notifications, comments)

    • Gmail • Twitter

  53. Multimedia

  54. Multimedia •Video •Audio

  55. Who is using Multimedia? • Youtube • Vimeo • GrooveShark

  56. Video Audio

  57. None

  58. 3D, Graphics, Effects

  59. 3D, Graphics, Effects • SVG • Canvas • WebGL •

    CSS3 3D

  60. SVG • Scalable Vector Graphic • Language for rich graphical

    content like as: • Pie charts, • Two-dimensional graphs

  61. <svg id="svgelem" height="200" xmlns="http:/ /www.w3.org/2000/ svg"> ! <circle id="redcircle" cx="50"

    cy="50" r="50" fill="red" /> </svg>

  62. Canvas • HTML Element • Draw graphics (with JavaScript) •

    Control every pixel

  63. Canvas

  64. WebGL • Web-based Graphics Library • Interactive 3D graphics •

    Canvas 3D • JavaScript API

  65. http:/ /helloracer.com/webgl/ WebGL

  66. Performance & Integration

  67. Performance & Integration •Web Workers •XMLHttpRequest2

  68. Web Workers •JavaScript API •Load JS file dynamically •Process code

    in a background •Multi JavaScript thread

  69. XMLHttpRequest2 •Ajax •Uploading progress events (progress tag) •Working with files

    (file system api) •FormData •CORS (cross domain request)

  70. CSS3

  71. CSS3 • Transitions • Animations • Transforms • Gradients •

    Rounded corners • Flexible Box Model • Multi-column Webfonts Text wrapping Columns Opacity Backgrounds CSS selectors Shadows

  72. Transforms, Transitions and Animations http:/ /leaverou.github.com/animatable/ http:/ /cubic-bezier.com/#.17,.67,.83,.67

  73. Gradients btn.primary { background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077); }

  74. Rounded corners btn.primary { border-radius: 5px; }

  75. CSS selectors p:nth-child(3) { } input:checked { } p:first-of-type {

    } p ~ ul { }

  76. Thanks!