HTML5: Introduction

HTML5Everything 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


HTML5


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

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>

http://www.saltercane.com

http://www.saltercane.com

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/

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.cssversions/latest/jquery.jsversions/latest/chico.jssrc/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

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>

http://www.w3.org/2000/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!

Technology

HTML5: Introduction