HTML5: Introduction

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>

Thanks!

HTML5 is awesome!

HTML5 HTML CSS JavaScript

Collection of tools • Semantics • Ofﬂine & 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>

Better semantic tags

HTML 4

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

Ofﬂine & storage

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

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

Device Access • Geolocation API • Camera / Microphone •
Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notiﬁcation

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, notiﬁcations, 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

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 ﬁ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 • 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:ﬁrst-of-type {
} p ~ ul { }

Thanks!

HTML5: Introduction

HTML5: Introduction

More Decks by Guille Paz

Other Decks in Programming

Featured

Transcript