3. HTML5. Utilidades
Modernizr
Librería JavaScript
Detecta si CSS3 y HTML 5
están o no soportadas.
Open Source
modernizr.com
maspixel.com | #html5ciball + @medinamanu + @maspixel
4. HTML5. Utilidades
w3schools. HTML5 Tutorial
Los nuevos tags de HTML5
Etiquetas que caen en desuso
Ejemplos de atributos
Tryit Editor (live code)
w3schools.com/html5
maspixel.com | #html5ciball + @medinamanu + @maspixel
5. HTML5. Utilidades
Cheat Sheets
Compilación de tags para
uso como guía referencia rápida
PDF, formato gráfico
webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets
testking.com/techking/infographics/ultimate-html5-cheatsheat
maspixel.com | #html5ciball + @medinamanu + @maspixel
6. HTML5. Utilidades
HTML5 Doctor
Glosario de tags HTML5
Ofrece snippets de cada
etiqueta listos para aplicar
html5doctor.com/glossary
maspixel.com | #html5ciball + @medinamanu + @maspixel
7. HTML5. Un par de ejemplos
Geolocalización
Inserción de vídeo
maspixel.com | #html5ciball + @medinamanu + @maspixel
8. HTML5. Un par de ejemplos
Pasos en cada ejemplo
Replica tú mism@ estos ejemplos para comprobar
cómo surten efecto:
1. Crea dos documentos HTML con etiquetado básico
2. Busca y pega o añade el código específico
3. Cárgalos con un navegador preparado para HTML5
(comprueba si tu navegador lo está: html5test.com)
maspixel.com | #html5ciball + @medinamanu + @maspixel
9. HTML5. Un par de ejemplos
Etiquetado básico
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=utf-8 />
<title>Ejemplo HTML5</title>
</head>
<body>
<section> [Añade el resto de código
para cada ejemplo anidado en section]
</section>
</body>
</html>
maspixel.com | #html5ciball + @medinamanu + @maspixel
10. HTML5. Un par de ejemplos
Código específico: geolocalización
Tienes un ejemplo en phpguru.org/geolocation.html
En cuanto cargues la página, verás cómo funciona.
El código de dicha página contiene un único script
Para replicarlo, basta copiarlo en tu ejemplo.
maspixel.com | #html5ciball + @medinamanu + @maspixel
11. HTML5. Un par de ejemplos
Código específico: geolocalización
<body>
<section>
<script>
/**
* This function is the callback which is passed the result from the .getCurrentPosition() function
[resto de código del script]
alert(“Sorry, your browser doesn’t appear to support GeoLocation”);
}
<script>
</section>
</body>
maspixel.com | #html5ciball + @medinamanu + @maspixel
12. HTML5. Un par de ejemplos
Código específico: vídeo
La especificación indica 3 alternativas de formato
para insertar un mismo vídeo: .mp4, .ogv y .webm.
<video>
<source src=”nombreArchivo.mp4” />
<source src=”nombreArchivo.ogv” />
<source src=”nombreArchivo.webm” />
</video>
El que veas depende de qué navegador uses...
maspixel.com | #html5ciball + @medinamanu + @maspixel
13. HTML5. Un par de ejemplos
Código específico: vídeo
Para ver sencillamente cómo funciona la etiqueta
<video> emplearemos sólo un formato
Crea o descarga un vídeo
Un par de opciones:
File_Big_Buck_Bunny_small.ogv (http://en.wikipedia.org/wiki/Ogg#File_format)
gizmo.webm (http://www.808.dk/?code-html-5-video)
maspixel.com | #html5ciball + @medinamanu + @maspixel
14. HTML5. Un par de ejemplos
Código específico: vídeo
<body>
<section>
<video controls=”controls” autoplay=”autoplay”>
<source src=”gizmo.ogv” width=”558” height=”332” type=”video/ogg” />
</video>
</section>
</body> ¡Ojo! Si optas por
www.808.dk, el formato
que descargues
dependerá de qué
navegador utilices...
Es probable que aquí
tengas que cambiar el
formato de vídeo.
maspixel.com | #html5ciball + @medinamanu + @maspixel
16. HTML5. Utilidades
Joli OS / Jolicloud
Basado en Ubuntu-Linux
Interfaz de usuario en HTML5:
lanzador de aplicaciones
instalables y borrables con un-clic <div class=”clear”></div>
social activity stream </section>
</div>
<footer>
<div id=”links”>
jolicloud.com <section>
<h4>Company</h4>
maspixel.com | #html5ciball + @medinamanu + @maspixel
17. HTML5. Utilidades
MugTug
Software de edición de imagen
Basado en el propio navegador
mugtug.com
maspixel.com | #html5ciball + @medinamanu + @maspixel