html5 para vagos
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/1.jpg)
HTML5 para vagos31.01.2011
Miquel Camps Orteza@miquelcamps
![Page 2: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/2.jpg)
Recordar menos etiquetas
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
<u>
<xmp>
Chuleta HTML5http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet1.pdf
![Page 3: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/3.jpg)
Escribir menos código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="js/script.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="utf-8" />
* la parte roja se elimina en HTML5
![Page 4: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/4.jpg)
Buscar menos javascripts en google
Nuevos inputs:
<input type="text" required />
<input type="email" />
<input type="range" />
<input type="date" />
<input type="color" />
¡Incluso una barra de progreso! <progress value="50" max="100"></progress>
![Page 5: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/5.jpg)
Buscar menos javascripts en google
Nuevos atributos:
<input type="text" required />
<input type="search" autofocus />
<input type="text" name="name" placeholder="Pepe" />
<input type="file multiple" name="uploads[]" />
<input type="text" pattern="[0-9]{8}[A-Z]" />
<input type="number" min="1900" max="2010" />
![Page 6: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/6.jpg)
Menos copiar y pegar
<object width="464" height="376" id="1994321" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" alt="Russian Grandfather Cracks Up At Grandson's Haircut Funny Videos"><param name="movie" value="http://embed.break.com/MTk5NDMyMQ=="></param><param name="allowScriptAccess" value="always"></param><embed src="http://embed.break.com/MTk5NDMyMQ==" type="application/x-shockwave-flash" allowScriptAccess=always width="464" height="376"></embed></object>
<audio id="audio" src="sound.mp3" controls></audio>
<video id="video" src="movie.webm" autoplay controls></video>
![Page 7: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/7.jpg)
Web semantica
El consorcio WC3 dice...
La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida.
Resumen para vagos ;)
La web semantica es una forma de estructurar mejor la información para que el usuario pueda encontrar mejores respuestas.
![Page 8: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/8.jpg)
Estructura mashable.com - Diseño
<header><hgroup><nav>
<aside>
<footer>
![Page 9: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/9.jpg)
Estructura mashable.com - Noticias
<section><article><time>
![Page 10: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/10.jpg)
Nuevas APIs javascript
websockets ¿bye bye ajax?
geolocalización
drag & drop
offline
canvas
Demoshttp://slides.html5rocks.com/
![Page 11: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/11.jpg)
Navegadores compatibles
chrome
firefox
opera
internet explorer 9
![Page 12: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/12.jpg)
Navegadores más usados
Internet Explorer
Firefox
Chrome
Safari
Opera
Otros
61.58%
24.23%
5.61%
4.45%
2.35%
1.77%
usuarios ie nvivo.es8.0 69%7.0 21%6.0 8%9.0 0.47%
vía netmarketshare.comhttp://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpct=4
![Page 13: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/13.jpg)
¿Cuando pasarse a HTML5?
Ya puedes pasarte a HTML5
Utilizar la nueva estructura <section><article><time>va a ser la forma de posicionarse mejor en buscadores.
Pero no podrás aprovechar todas las bondades de HTML5como por ejemplo las validaciones de inputs
Hay un tanto por ciento demasiado alto de gente usando internet explorer, las versiones inferiores de la 9 no soportan HTML5 y lo peor aún IE9 todavía no ha salido oficialmente.
![Page 14: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/14.jpg)
Implementación en IE < 9
Esto es para que la maquetación se vea igual:
1. Existe un script javascript para que internet explorer reconozca las nuevas etiquetas:http://html5shiv.googlecode.com
2. Poner las nuevas etiquetas dentro de div's y asociarles un class:<div class="header"><header>
![Page 15: HTML5 para vagos](https://reader033.vdocuments.site/reader033/viewer/2022061121/546db812af795962298b5482/html5/thumbnails/15.jpg)
Recursos para vagosSitios en HTML5html5gallery.com
Web semanticahttp://www.w3c.es/divulgacion/guiasbreves/websemantica
Canvashttp://devfiles.myopera.com/articles/418/canvasExample.html
HTML5 empieza hoyhttp://www.slideshare.net/Martulina/html5-empieza-hoy