Programación web con HTML5

Programación Web con HTML5
Campus Party 2011
#CPES15 - #CPIN
Parte 1

Jorge del Casar
@jorgecasar
Madrid Google Technology User Group
GTUG Madrid
·
Frontend Spain
·
ShoTools.com

¿Qué NO es HTML5?

CSS3
JS APIs (GEOlocation, workers, Drag&Drop, Web storage...)
Web Apps

¿Qué NO es HTML5?
Todo lo que esté fuera del lenguaje de marcado

¿Qué es HTML5?

Lenguaje de marcado
Web Forms
Video & Audio
Canvas
SVG

¿Qué es HTML5?
La base de las aplicaciones web

CSS2.1
GEO
location CSS1
Storage CSS
JS APis CSS3
web forms
Drag & Drop SVG
HTML5
video
canvas

audio
Silverlight
Flash
Web Apps

2004 - WHATWG

Formada por gente de Mozilla, Opera y
Apple para trabajar en avanzar HTML
en respuesta a la decisión de la W3C de
abandonar HTML en favor de
tecnologías basadas en XML

2007 - WHATWG + W3C

Se forma el grupo de trabajo HTML
para trabajar conjuntamente
Ambos grupos trabajaron juntos en el
desarrollo de la especiﬁcación HTML5

2009 - R.I.P. XHTML

Reconociendo el valor del grupo de
trabajo de XHTML 2 la W3C decide
abandonar el desarrollo

2011 - Logo HTML5
http://www.w3.org/html/logo/

Semántica

Dar signiﬁcado a la
estructura

Set de etiquetas más
ricas

RDFa

Microdatos

Microformatos

header nav
header

nav section

figure figure
video
figcaption figcaption
header section
header header

article article article
aside

footer

Nuevas etiquetas

av
tim
e gr ess met
er
n pro
rp

audio
ou tput list ary

key
ta f ooter su mm
da

gen
ﬁgure details
art

mark

vid
icl

command

eo
e

ad er de
he si
source canv a
oup ﬁgc as wb
rt hgr ruby apti
on r

Ofﬂine & almacenamiento

Aplicaciones web sin
conexión

Caché

Local storage

Indexed DB

File API

Web storage

Pares etiqueta/valor
Etiqueta: string
Valor: cualquier objeto Javascript

var input = document.querySelector(‘input[name=‘nombre’]’);
storageSaveButton.addEventListener(‘click’, function(){
window.localStorage.setItem(‘nombre’, input.value);
}, false);
input.value = window.localStorage.getItem(‘nombre’);

Offline web aplications

Navegación offline
Recursos cacheados cargan más rápido
Solo descarga los recursos que cambian

<html manifest=”cache.appcache”>
window.applicationCache.addEventListener(‘updateready’, function(e){
if(window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if(confirm(‘Una nueva versión está disponible. ¿Descargar?’)) {
window.location.reload();
}
}
}, false);

Acceso al dispositivo

Geolocalización API

Micrófono

Cámara

Datos locales
(contactos y eventos)

Orientación

Drag & Drop

document.addEventListener(‘dragstart’, function(e){
event.dataTransfer.setData(‘text’, ‘Texto personalizado’);
event.dataTransfer.effectAllowed = ‘copy’;
}, false);

API de Geolocalización

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, handlePositionError);
}
function showPosition(position) {
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map });
map.setCenter(latLng);
}

Conectividad

Chats en tiempo real

Juegos más rapidos

Mejor comunicación

Notiﬁcaciones Push
(Web Sockets, Server-Sent Events)

WebSockets

var socket = new WebSocket(url);
socket.onopen = function(e) {
socket.send(‘Hola, socket’);
}
socket.onmessage = function(e) {
alert(e.data);
}
socket.close = function(e) {
alert(‘Adios’);
}

3D, gráﬁcos y efectos

SVG

Canvas

WebGL

CSS3 3D

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
height="100%" width="100%" viewBox="0 0 512 512" version="1.1">
<polygon points="74.633,100.62 437.37,100.62 404.32,470.82 255.78,512
107.64,470.88" fill="#E44D26"/>
<polygon points="376.03,447.25 404.27,130.89 256,130.89 256,480.52"
fill="#F16529"/>
<polygon points="195.91,268.22 191.76,221.72 256,221.72 256,176.3 255.84,176.3
142.13,176.3 143.22,188.49 154.38,313.63 256,313.63 256,268.22" fill="#EBEBEB"/>
<polygon points="255.8,386.21 205.23,372.55 201.99,336.33 177.42,336.33
156.41,336.33 162.77,407.63 255.79,433.46 256,433.4 256,386.15" fill="#EBEBEB"/>
<path
d="m108.38,0h23.077v22.8h21.11v-22.8h23.078v69.044h-23.08v-23.12h-21.11v23.12h
-23.077v-69.044z"/>
<path
d="M205.99,22.896h-20.312v-22.896h63.72v22.896h-20.327v46.148h-23.078v-46.148
z"/>
<path
d="m259.51,0h24.063l14.81,24.26,14.78-24.26h24.072v69.044h-22.977v-34.222l-15.8
77,24.549h-0.397l-15.89-24.549v34.222h-22.58v-69.044z"/>
<path d="m348.72,0h23.084v46.222h32.453v22.822h-55.53v-69.044z"/>
<polygon points="255.84,313.63 311.76,313.63 306.49,372.52 255.84,386.19
255.84,433.44 348.94,407.63 349.62,399.96 360.29,280.41 361.4,268.22 349.16,268.22
255.84,268.22" fill="#FFF"/>
<polygon points="255.84,204.51 255.84,221.6 255.84,221.72 365.38,221.72
365.38,221.72 365.53,221.72 366.44,211.51 368.51,188.49 369.6,176.3 255.84,176.3"
fill="#FFF"/>
</svg>

Canvas

function draw() {
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);

ctx.fillStyle = “rgb(40,0,0)”;
ctx.fillRect (20, 20, 65, 60);

ctx.fillStyle = “rgba(0, 0, 160, 0.5)”;
ctx.fillRect (40, 40, 65, 60);
}
}

Rendimiento e integración

Web Workers

XMLHttpRequest 2

Web Workers

// main.js
var worker = new Worker(‘tarea.js’);
worker.onmessage = function(e) {
alert(e.data);
};
worker.postMessage(‘data’);

// tarea.js
self.onmessage = function(e) {
// Algunas tareas...
self.postMessage(‘recibido: ’ e.data);
}

Estilos CSS3

Estilos

Efectos

Web Open Font

!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

Demo
Convertir una web cualquiera a HTML5

Programación Web con HTML5
Campus Party 2011
#CPES15 - #CPIN
Parte 2

Concurso GTUG
Convertir una web a HTML5
versiones tablet y smartphone

Características Chrome Book

12,1 pulgadas
1,48Kg
Intel® AtomTM Dual-Core
Webcam HD
2 USB
Ranura tarjetas 4 en 1
Minipuerto VGA

HTML5 BOILERPLATE

Todos los navegadores (IE6)
Preparado para HTML5.
Recomendaciones sobre caché y compresión
Conﬁguración por defecto basada en buenas prácticas
Optimizaciones para navegadores móviles
Mejora progresiva con degradación gradual … sí, lo
conseguimos!
Clases especíﬁcas para IE
Clases .no-js y .js
Completa e interconectada test suite

HTML5 BOILERPLATE

Medir el rendimiento de Javascript
console.log
CSS para impresión
Marcado y estructura CSS adaptables a Smartphones y
tablets
Ajuste pngﬁx para IE6 incluído.
Clases .clearﬁx, .visuallyhidden
.htaccess para HTML5 y mayor velocidad
Alojamiento CDN de jQuery con sistema de anticaídas

<html>

Detectar el navegador
Detectar capacidades




 <html class="no-js" lang="es">

Chrome Frame

Google Chrome en IE

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Librerías que usa

jQuery · http://jquery.com/
QUnit · http://docs.jquery.com/Qunit
modernizr · http://www.modernizr.com/
DD_belatedPNG · http://www.dillerdesign.com/experiment/DD_belatedPNG/

jQuery

31KB (Miniﬁed and Gzipped)
Soporta selectores CSS3 y más
IE 6.0+, FF 2.0+, Safari 3.0+, Opera
9.0+, Chrome

QUnit

test("a basic test example", function() {
Unit testing ok( true, "this test is ﬁne" );
var value = "hello";

para javascript equals( "hello", value, "We expect value to be hello" );
});
module("Module A");
test("ﬁrst test within module", function() {
ok( true, "all pass" );
});
test("second test within module", function() {
ok( true, "all pass" );
});
module("Module B");
test("some other test", function() {
expect(2);
equals( true, false, "failing test" );
equals( true, true, "passing test" );
});

Modernizr

compatibilidad con HTML5 y CSS3

Modernizr

soporte PNG transparentes en IE6

Nuevos atributos

placeholder required

autofocus novalidate

<input id="buscar" placeholder=”Buscar” autofocus required>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("buscar").focus();
}
var elements = document.getElementsByTagName("INPUT");
for (var i=0; i<elements.length; i++) {
elements[i].setCustomValidity("This ﬁeld cannot be left blank");
}
</script>

Imágenes

http://www.w3.org/html/logo/

http://jayinreallife.ﬁles.wordpress.com/2010/06/evolution.jpg

http://blogidol.ca/wp-content/uploads/2010/04/html.jpg

http://swwweet.com/presentaciones/viajartiempo/

<mark>Gacias</mark>

@jorgecasar
#CPES15 - #CPIN

Programación web con HTML5

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (12)

Similar a Programación web con HTML5

Similar a Programación web con HTML5 (20)

Último

Último (20)

Programación web con HTML5