HTML5: Introduction

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

HTML

CSS

JavaScript

Collection of tools
• Semantics
• Ofﬂine & Storage
• Devices Access
• Connectivity
• Multimedia
• 3D, Graphics & Effects
• Performance & Integration

Semantics
• More meaningful elements
• Better semantic tags and attributes
• Semantic structure
• Microdata / Microformats
• ARIA attributes
• New form types
• More simple and cool

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">

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 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>

New forms
• Semantic types and attributes
• Mobile compatibility
• Validation engine
• Custom patterns
• More control

Web Storage

• Local storage / Session storage
• IndexedDB
• Application Cache (ofﬂine 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

Session Storage
=
Local Storage

limited to the time span where the current
window is open
once the window is shut will be invalid

IndexDB

• Web SQL database must die!
• Object Store
• http://www.html5rocks.com/en/
tutorials/indexeddb/todo/

AppCache
• Ofﬂine First
• Chache manifest (*.appcache => ﬁle)
• 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
• Geolocation API
• Camera / Microphone
• Local Data (contacts and events)
• Device Orientation
• Device Motion
• Vibration
• Notiﬁcation

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, notiﬁcations, comments)
• Gmail
• Twitter

Multimedia

• Video

• Audio

Who is using
Multimedia?

• Youtube
• Vimeo
• GrooveShark

3D, Graphics, Effects

• SVG
• Canvas
• WebGL
• CSS3 3D

SVG
• Scalable Vector Graphic
• Language for rich graphical content like
as:
• Pie charts,
• Two-dimensional graphs

Canvas

• HTML Element
• Draw graphics (with JavaScript)
• Control every pixel

WebGL
• Web-based Graphics Library
• Interactive 3D graphics
• Canvas 3D
• JavaScript API

WebGL

http://helloracer.com/webgl/

Performance &
Integration

• Web Workers
• XMLHttpRequest2

Web Workers

• JavaScript API
• Load JS ﬁle dynamically
• Process code in a background
• Multi JavaScript thread

XMLHttpRequest2

• Ajax
• Uploading progress events
(progress tag)
• Working with ﬁles (ﬁle system api)
• FormData
• CORS (cross domain request)

CSS3
• Transitions Webfonts
Text wrapping
• Animations
Columns
• Transforms
Opacity
• Gradients
Backgrounds
• Rounded corners
CSS selectors
• Flexible Box Model Shadows
• Multi-column

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:ﬁrst-of-type { }

p ~ ul { }

HTML5: Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5: Introduction

Similar to HTML5: Introduction (20)

More from Guillermo Paz

More from Guillermo Paz (7)

Recently uploaded

Recently uploaded (20)

HTML5: Introduction