Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5: Introduction
Search
Guille Paz
November 02, 2012
Programming
8
340
HTML5: Introduction
Guille Paz
November 02, 2012
Tweet
Share
More Decks by Guille Paz
See All by Guille Paz
The Road to Node
pazguille
0
210
No me robes el Scroll!
pazguille
0
190
User First
pazguille
1
160
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
2.9k
No me hagas esperar!
pazguille
1
120
CSS Sprites vs. Data URIs
pazguille
0
380
Hello, Style Guides!
pazguille
0
200
Decoupling your JavaScript
pazguille
0
140
Other Decks in Programming
See All in Programming
Modernisation Progressive d’Applications PHP
hhamon
0
100
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Securify_エンジニア採用資料
3shake
0
110
Some more adventure of Happy Eyeballs
coe401_
2
190
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
820
Ruby Parser progress report 2024
yui_knk
2
230
GraphQLとGigaViewer for Apps
numeroanddev
2
120
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
XStateでReactに秩序を与えたい
gizm000
0
740
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
The World Runs on Bad Software
bkeepers
PRO
64
11k
KATA
mclloyd
27
13k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
A Philosophy of Restraint
colly
202
16k
Infographics Made Easy
chrislema
239
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Designing the Hi-DPI Web
ddemaree
278
34k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
GitHub's CSS Performance
jonrohan
1030
450k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Transcript
HTML5 Everything 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 CSS JavaScript
Collection of tools • Semantics • Offline & Storage •
Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration
Semantics & Markup
Semantics • More meaningful elements • Better semantic tags and
attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool
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-transitional.dtd">
<!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN""http:/ /www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
Better semantic tags
HTML 4
HTML5
Custom data attribute
Custom data attribute data-* inside HTML elements Parse them using
JavaScript (getAttribute method) * = custom attributes: user, name, phone, id, chico, meli, etc...
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 experience for users
<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>
ARIA
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)
<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 domain) • the data persists (after the browser is shutdown or the session is closed)
<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>
Session Storage = Local Storage
limited to the time span where the current window is
open once the window is shut will be invalid Session Storage = Local Storage
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: text/cache-manifest • 5MB (chrome = unlimitedStorage) • window.applicationCache
<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: *
Device Access
Device Access • Geolocation API • Camera / Microphone •
Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
Device Access • Geolocation API • Camera / Microphone •
Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
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
None
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="red" /> </svg>
Canvas • HTML Element • Draw graphics (with JavaScript) •
Control every pixel
Canvas
WebGL • Web-based Graphics Library • Interactive 3D graphics •
Canvas 3D • JavaScript API
http:/ /helloracer.com/webgl/ 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 domain request)
CSS3
CSS3 • Transitions • Animations • Transforms • Gradients •
Rounded corners • Flexible Box Model • Multi-column Webfonts Text wrapping Columns Opacity Backgrounds CSS selectors Shadows
Transforms, Transitions and Animations http:/ /leaverou.github.com/animatable/ http:/ /cubic-bezier.com/#.17,.67,.83,.67
Gradients btn.primary { background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077); }
Rounded corners btn.primary { border-radius: 5px; }
CSS selectors p:nth-child(3) { } input:checked { } p:first-of-type {
} p ~ ul { }
Thanks!