Embed Size (px)
DESCRIPTION
Taller realizado en la Campus Party Valencia 2011
Citation preview
Programación Web con HTML5 Campus Party 2011
#CPES15 - #CPINParte 1
Jorge del Casar@jorgecasar
Madrid Google Technology User GroupGTUG Madrid
·Frontend Spain
·ShoTools.com
¿Qué NO es HTML5?
CSS3JS 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 marcadoWeb FormsVideo & AudioCanvasSVG
¿Qué es HTML5?La base de las aplicaciones web
Web Apps
HTML5
JS APis
canvasvideo
audio
web forms
SVG
GEOlocation
Drag & Drop
Storage CSSCSS1
CSS2.1
CSS3
Silverlight Flash
Historia reciente
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
2004 - WHATWG
Se forma el grupo de trabajo HTML para trabajar conjuntamenteAmbos grupos trabajaron juntos en el desarrollo de la especificación HTML5
2007 - WHATWG + W3C
Reconociendo el valor del grupo de trabajo de XHTML 2 la W3C decide abandonar el desarrollo
2009 - R.I.P. XHTML
2011 - Logo HTML5http://www.w3.org/html/logo/
Semántica
Dar significado a la estructura
Set de etiquetas más ricas
RDFa
Microdatos
Microformatos
sectionnav
section
header nav
asidearticle article article
footer
figure figurevideo
figcaptionfigcaption
header header header
header
Nuevas etiquetas
articleasid
e
audio
canvasdata
list
commanddetailsfigure
figcaption
footer
header
hgroup
keygen
nav meter
outputvideo
time
source
summary
wbr
mark
progress
rubyrt
rp
Offline & almacenamiento
Aplicaciones web sin conexión
Caché
Local storage
Indexed DB
File API
Web storage
Pares etiqueta/valorEtiqueta: stringValor: 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 offlineRecursos cacheados cargan más rápidoSolo 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
Notificaciones 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’);}
Multimedia
Audio
Video
3D, gráficos 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.148z"/><path d="m259.51,0h24.063l14.81,24.26,14.78-24.26h24.072v69.044h-22.977v-34.222l-15.877,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.jsvar worker = new Worker(‘tarea.js’);worker.onmessage = function(e) { alert(e.data);};worker.postMessage(‘data’);
// tarea.jsself.onmessage = function(e) { // Algunas tareas... self.postMessage(‘recibido: ’ e.data);}
Estilos CSS3
Estilos
Efectos
Web Open Font
Insignias
Progressive Enhancement
Graceful Degradation
¿Cómo empezar?
XHTML 1.0 Strict
HTML5
!DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
XHTML 1.0 Strict
HTML5
Encoding
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
XHTML 1.0 Strict
HTML5
Links
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel=stylesheet href=style.css>
XHTML 1.0 Strict
HTML5
Script
<script type="text/javascript" src="jquery.js"></script>
<script src=jquery.js></script>
Polyfills
html5shim
<!-- [if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
DemoConvertir una web cualquiera a HTML5
Programación Web con HTML5 Campus Party 2011
#CPES15 - #CPINParte 2
Concurso GTUGConvertir una web a HTML5
versiones tablet y smartphone
Premio del concurso
Características Chrome Book
12,1 pulgadas1,48KgIntel® AtomTM Dual-CoreWebcam HD2 USBRanura tarjetas 4 en 1Minipuerto VGA
HTML5 ★ BOILERPLATE
Todos los navegadores (IE6)Preparado para HTML5.Recomendaciones sobre caché y compresiónConfiguración por defecto basada en buenas prácticasOptimizaciones para navegadores móvilesMejora progresiva con degradación gradual … sí, lo conseguimos!Clases específicas para IEClases .no-js y .jsCompleta e interconectada test suite
HTML5 ★ BOILERPLATE
Medir el rendimiento de Javascriptconsole.logCSS para impresiónMarcado y estructura CSS adaptables a Smartphones y tabletsAjuste pngfix para IE6 incluído.Clases .clearfix, .visuallyhidden.htaccess para HTML5 y mayor velocidadAlojamiento CDN de jQuery con sistema de anticaídas
<html>
Detectar el navegadorDetectar capacidades
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="es"> <![endif]--><!--[if IE 7 ]> <html class="no-js ie7" lang="es"> <![endif]--><!--[if IE 8 ]> <html class="no-js ie8" lang="es"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
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 (Minified and Gzipped)Soporta selectores CSS3 y másIE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome
QUnit
Unit testing para javascript
test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equals( "hello", value, "We expect value to be hello" );});module("Module A");test("first 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
Formularios
Nuevos atributos
placeholder
autofocus
required
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 field cannot be left blank");}</script>
Imágenes
http://www.w3.org/html/logo/
http://jayinreallife.files.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
