Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML5: Introduction

Avatar for Guille Paz Guille Paz
November 02, 2012
Programming
370
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
270
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
300
User First
Avatar for Guille Paz pazguille
1
230
#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
210
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
460
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
290
Decoupling your JavaScript
Avatar for Guille Paz pazguille
0
200

Other Decks in Programming

See All in Programming
A2UI for Android: Safely Rendering AI-Generated UI with Jetpack Compose - DroidKaigi 2026
Avatar for JaiChangPark itsmedreamwalker
0
120
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
150
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
2.8k
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
320
cdk deploy JawsSonic #MARATHONしながらAWSリソースをデプロイしてみよう
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
120
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
6.7k
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
230
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
610
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.1k
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
120
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
160
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
420

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
330
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
510
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k

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!