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

HTML5: Introduction

Avatar for Guille Paz Guille Paz
November 02, 2012
Programming
8
350

HTML5: Introduction

Avatar for Guille Paz

Guille Paz

November 02, 2012
Tweet

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
Avatar for Guille Paz pazguille
0
220
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
220
User First
Avatar for Guille Paz pazguille
1
180
#OfflineFirst
Avatar for Guille Paz pazguille
3
5.9k
ES6 in Production
Avatar for Guille Paz pazguille
10
3.1k
No me hagas esperar!
Avatar for Guille Paz pazguille
1
140
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
410
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
240
Decoupling your JavaScript
Avatar for Guille Paz pazguille
0
150

Other Decks in Programming

See All in Programming
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
800
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
910
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
390
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
Avatar for Tomohiro Inoue tomoino
0
160
FormFlow - Build Stunning Multistep Forms
Avatar for Yonel Ceruto González yceruto
1
190
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
500
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
770
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
1.5k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
0
280
コード書くの好きな人向けAIコーディング活用tips #orestudy
Avatar for Hiromi Hishida 77web
3
320

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
43
2.4k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
660

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!