HTML5 easy if you know how

Move to HTML5 is easy if you know how

Jorge del Casar @jorgecasarCo-founder Frontend Spain @FrontendSpainCo-founder ShoTools.com @ShoToolsProfessional proﬁle: linkedin.com/in/jorgecasar

What is NOT HTML5? CSS3 JS APIs (GEOlocation, workers, Drag&Drop, Web storage...) Web Apps

What is NOT HTML5? All that is out of markup

What is HTML5?Markup lenguageWeb FormsVideo & AudioCanvasSVG

What is HTML5? The basis forweb applications

CSS2.1 GEO location CSS1Storage CSS JS APis web CSS3 forms Drag & Drop SVG Web Apps HTML5 video canvas audio Silverlight Flash

AdvantagesSemantic elementsBackwards compatibilityWeb application orientedFaster rendering

Progressive Enhancement

Graceful Degradation

Where to start?

!DOCTYPE XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Strict/ /EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5<!DOCTYPE html>

Encoding XHTML 1.0 Strict<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> HTML5<meta charset="utf-8" />

Links XHTML 1.0 Strict<link rel="stylesheet" type="text/css" href="style.css"/> HTML5<link rel=stylesheet href=style.css>

Script XHTML 1.0 Strict<script type="text/javascript" src="jquery.js"></script> HTML5<script src=jquery.js></script>

Polyﬁlls html5shim

Old structure <div id=”header”> <div id=”nav”><div id=”main”> <div <div <div id=”sidebar”> class=”post”> class=”post”> <div id=”footer”>

New structure <header> <nav><section> <aside> <article> <article> <footer>

header nav headernav section figure figure video figcaption figcaption header section header headerarticle article article aside footer

New tags v t im me a e ter n audio st fo oter ry put i ke o ut l m a ta um yg d a s deta e ar ﬁgur ils n vi e ti de cl command er e e o ad can dsource he a si u p ﬁg va g ro cap t io s h n

Thanks!Jorge del Casar @jorgecasar

http://paper.li	4
http://forum-alice.info	2
http://us-w1.rockmelt.com	1
http://www.mongodb.org	1
http://jucagi.wordpress.com	1

HTML5 easy if you know how

by Jorge del Casar on Mar 22, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 9

Statistics

HTML5 easy if you know how — Presentation Transcript