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

HTML5: Introduction

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
270
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
450
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
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
300
Exploring RuboCop with MCP
Avatar for Koichi ITO koic
0
330
今年もTECHSCOREブログを書き続けます！
Avatar for 平奥真一（ひらおくしんいち） hiraoku101
0
250
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
230
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
250
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
310
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
130
mruby on C#: From VM Implementation to Game (RubyKaigi 2026)Scripting
Avatar for hadashiA hadashia
1
130
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
Avatar for yasunori yasunori0418
1
120
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
380

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
200
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
520
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
110
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k

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!