#html5mor | @medinamanu | @maspixel
Píldora formativa HTML5
Marzo 2011
#html5mor | @medinamanu | @maspixel
Hashtag de Twitter:
#HTML5mor
@medinamanu@maspixel
#html5mor | @medinamanu | @maspixel
Un poco de historia…
• 1995 Netscape introduce JavaScript
• 1999 Microsoft introduce XML
• 2001-2006 XHTML1 y CSS2.1 • 2004-2007 WHATWG Web Hypertext Application Technology
Working Group (grupo de Opera, Mozilla y Apple). Quieren potenciar aplicaciones web.
• 2007- ahora W3C World Wide Web Consortium Empizan a desarrollar: HTML5 y CSS3
#html5mor | @medinamanu | @maspixel
Situación actual• HTML5 todavía no es un estandar.• HTML5 es un lenguaje estable. • El 95% es estandar.
Mayo 2011HTML5 = se presenta como
borrador, etapa estandar
2014HTML5 = recomendación
Finales 2011HTML5 = se considerará estandar
Oficialmente se podrá utilizar
Datos obtenidos de W3C
#html5mor | @medinamanu | @maspixel
HTML5 y el futuro presente
de la web
#html5mor | @medinamanu | @maspixel
Ventajas del HTML5• Etiquetas más claras. Más con menos código• Vídeo y audio sin flash/Quicktime • Webs más interactivas sólo con HTML.(menos JS y CSS)• Mejora para trabajar Offline• Mayor efectos visuales (canvas y SVG)• Más vídeo y audio• Otras ventajas
¡crea mejores aplicaciones web!
#html5mor | @medinamanu | @maspixel
Índice• Nuevas etiquetas• Diferencias en el código• Estructura de la web• Compatibilidad de navegadores• CSS3• Audio y Vídeo• Formularios• Canvas• SVG• Drag and Drop• Geolocalización
#html5mor | @medinamanu | @maspixel
Diferencias en el código
Doctype en XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"
"http://www.w3.org/MarkUp/...">
Doctype en HTML5: <!Doctype html>
¡Menos es más!
#html5mor | @medinamanu | @maspixel
Diferencias en el código
Meta en XHTML 1.1<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
Meta en HTML5:(sólo codificación de caracteres) <meta charset="UTF-8">
La vida es más fácilCon HTML5
#html5mor | @medinamanu | @maspixel
Diferencias en el código
Script en HTML4:<script type="text/javascript“ scr="jquery.js"></script>
Script en HTML5:<script scr="jquery.js"></script>
#html5mor | @medinamanu | @maspixel
Diferencias en el código
Link stylesheet en HTML4:<link rel="stylesheet" type="text/css” href="style.css">
Link stylesheet en HTML5:<link rel="stylesheet" href="style.css">
#html5mor | @medinamanu | @maspixel
Nuevas etiquetasAtributos que desaparecen• align• link, vlink, alink, (enlaces)• bgcolor• height and width• scrolling (dentro de los iframes)• valign• hspace y vspace • cellpadding, cellspacing, y border de las tablas• Target• Font• marquee
¡Hasta la vista!
#html5mor | @medinamanu | @maspixel
Nuevas etiquetas
Etiquetas redefinidas
• em y i: em denota énfasis, mientras que i es para fines estéticos• Strong y b: Strong denota importancia, mientras que b es negrita
para fines estéticos, sin una importancia especial• Small: sirve para marcar la letra pequeña (copyrights, avisos
legales…)
#html5mor | @medinamanu | @maspixel
Nuevas etiquetas
Nueva estructura de la webAhora aparecen etiquetas más Semánticas:
• <header>• <nav>• <section>• <article>• <aside>• <footer>
Adios a la divitis y tablitis
#html5mor | @medinamanu | @maspixel
Estructura de la web<header>• Es la cabecera. Es donde se inserta el logo y el título de nuestra web. Esta etiqueta se
puede repetir en más sitios del código (hay más encabezados)
#html5mor | @medinamanu | @maspixel
Estructura de la web<nav>• Menú de nuestro site, también puede haber varios “nav” a lo largo del código. En esta
etiqueta también estaría el bread crumbs o migas de pan del site.
#html5mor | @medinamanu | @maspixel
Estructura de la web<footer>• es el pie de página, donde se pone el copyright, enlaces, etc…. Puede haber varios en
cada página
#html5mor | @medinamanu | @maspixel
Estructura de la web<section>• Sección genérica de un documento, normalmente tiene un encabezado y luego un
contenido. puede contener uno o más artículos. Elemento genérico que agrupa elementos.
#html5mor | @medinamanu | @maspixel
Estructura de la web<article>• Se encuentra el contenido principal de la página y es lo que se va sindicar (RSS,
buscadores). Tiene encabezado, descripción, comentarios….
#html5mor | @medinamanu | @maspixel
Estructura de la web<aside>• Se incluye contenido que no está relacionado con el contenido del artículo, por
ejemplo, elementos publicitarios, widgets de un blog, suele ser el contenido del sidebar.
#html5mor | @medinamanu | @maspixel
Compatibilidad navegadoresTodo muy bonito pero….
ProblemasIE6, IE7, IE8
Uh!!!!!!!!!!!!!!!!!!
#html5mor | @medinamanu | @maspixel
Compatibilidad de navegadorsUsamos el método : Nicolas Gallagher
Dentro del head este script: <!--[if lt IE 9]>
<script type="text/javascript" >
document.createElement("nav" );
document.createElement("header" );
document.createElement("footer" );
document.createElement("section" );
document.createElement("aside" );
document.createElement("article" );
</script>
<![endif]-->
Añadimos entre estos comentarios que sólo funcionan
en IE y creamos estos elementos para que los reconozca IE
Magia, funciona en todos los navegadores
#html5mor | @medinamanu | @maspixel
CSS3
Mejoras• Esquinas redondeados• Degradados• Enfocar campos en formularios
Menos imágenesMenos JavascriptMenos Flash
Pseudoclases: son clases definidas propiamente por CSS3. Ejemplo: hover, visited…. Ahora hay más: nth-child, nth-of-type …
#html5mor | @medinamanu | @maspixel
CSS3• Los "tr" tenga cada uno un efecto, según
sea par: even o impar: odd
tr:nth-of-type(even){background-color: #F3F3F3;}
tr:nth-of-type(odd){background-color:#ddd;}
<th>
#html5mor | @medinamanu | @maspixel
CSS3• Alineamos todos los td a la derecha salvo el
primero que lo alineamos a la izquierda.nth-child table tr:nth-child(n) : Todas las filastable tr:nth-child(n+2) : Todas las filas menos la primeratr:nth-child(2n) : Cada 2 filas
En nuestro caso:td:nth-child(n+2){text-align: right;}
#html5mor | @medinamanu | @maspixel
CSS3Ponemos negrita la última fila:tr:last-child{
font-weight: bolder;
}
#html5mor | @medinamanu | @maspixel
Audio y Vídeo• Antes…
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/_fO6Sm2E6vo?fs =1&hl=es_ES" /><param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/vf" allowscriptaccess ="always" allowfullscreen="true"></embed>
</object>
#html5mor | @medinamanu | @maspixel
Audio y Vídeo
• Ahora:
<audio src="drums.mp3"></audio>
<video src="tutorial.m4v"></video>
Atributos: autoplay, controls, loop, preload...
#html5mor | @medinamanu | @maspixel
Audio y Vídeo
• Guerra de formatos Pero no es todoTan fácil<video height="270px" width="480px" controls > <source src="Holamundo.mp4" type="video/mp4"> <source src="Holamundo.webm" type="video/webm"> <source src="Holamundo.ogv" type="video/ogg"></video>
Usamos 3 formatos qe se ven en todos los navegadores:
mp4,webm, ovg
#html5mor | @medinamanu | @maspixel
Formularios HTML5
• Etiqueta input Pones el atributo type=”email”, “url”, “tel”, “date”
<input type="email" >
- Mejor accesibilidad
- Más rápido llegar a teclas de: @, .com…
#html5mor | @medinamanu | @maspixel
Formularios HTML5
• Autofocus <input type="text" autofocus>
• Placeholder (valor por defecto)
<input id="email" type="email" name="email“ placeholder="[email protected]" >
#html5mor | @medinamanu | @maspixel
Formularios HTML5• Creación de barras
de desplazamiento,• campos numéricos
con flechas,• calendarios en el
campo fecha
#html5mor | @medinamanu | @maspixel
Formularios HTML5
• Campos editablesTodos los elementos que tengan contenteditable=true se pueden grabar en una base de datos del servidor.
#html5mor | @medinamanu | @maspixel
Canvas• JavaScript y HTML, sin plugins• Canvas es bitmap, no vectorial• Soportado en todos los browsers menos IE
¡mi parte favorita!
¿Para qué sirve?
Gráficas Animaciones Juegos
#html5mor | @medinamanu | @maspixel
Canvas
Empecemos…
<canvas id="mi_canvas" width="150" height="150">Ohh!!! Tu navegador no soporta canvas
</canvas>
#html5mor | @medinamanu | @maspixel
Canvas• A dibujar…
<script type="text/javascript" charset="utf-8"> //creamos una referencia para el elemento var canvas = document.getElementById(‘mi_canvas'); //comprobamos el soporte del navegadorif (canvas.getContext){ //accedemos al contexto 2d para que funcione canvas
var context = canvas.getContext('2d'); context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 100, 100); }else{ // muestra algo si el navegador no soporta canvas <canvas>}</script>
X=10
Y=10
100x100
Picasso
#html5mor | @medinamanu | @maspixel
Canvas
<canvas width="500" height="250" id="test"> No soporta canvas</canvas> <script type="text/javascript" charset="utf-8"> var bar = new RGraph.Bar('test', [50,25,15,10]); bar.Set('chart.gutter', 50); bar.Set('chart.colors', ['red']); bar.Set('chart.title', "Mis lenguajes favoritos"); bar.Set('chart.labels', ["Ruby on rails", "PHP", "JavaScript", "ASP"]); bar.Draw(); </script>
• Creemos una gráfica..
Previamente he llamado a 2 ficheros RGraph.common.js, RGraph.bar.js que son las librerías para crear gráficas
#html5mor | @medinamanu | @maspixel
SVGScalable Vector Graphic• No necesita Plugin• Imágenes escalables (diseños líquidos)• Ejemplos de etiquetas:
• Elementos estructura (<svg>, <defs>, <desc>, <title>, <metadata>, <symbol>, <use>,<g>, <switch>, <a>, <view>).
• Formas (<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>, <cursor>). • Texto (<text>, <tspan>, <tref>, <textPath>, <altGlyph>, <font>). • Estilo (<style>, <marker>, <linearGradient>, <radialGradient>, <stop>, <pattern>). • Efectos (<clipPath>, <mask>, <filter> and filter effects). • Animación (<animate>, <set>, <animateMotion>, <animateTransform>).
AbrirFreehand
#html5mor | @medinamanu | @maspixel
Drag and drop• Rescatado de Internet Explorer 5 y nos permite
arrastrar y soltar elementos del navegador
• API bastante irregular
• Crear un elemento draggable y otro dropable y ejecutamos un código para que esto ocurra
•Ejemplo:http://html5demos.com/drag
#html5mor | @medinamanu | @maspixel
Geolocalización
• Basado en GPS
• El usuario debe autorizar el acceso a esta información
• Soporte en F,S,C
Encuéntrate a ti mismo
#html5mor | @medinamanu | @maspixel
Offline• Nueva caché nos permite acceder sin estar conectados• Mejora la velocidad de carga y alivia el servidor• Archivo .manifest declaramos que archivos se pueden
almacenar
CACHE MANIFEST# v = 1.0.0/style.css/javascripts/notes.js/javascripts/jquery.min.js
En nuestro HTML:<html manifest="notes.manifest" >
Cuando cambiemos elCódigo hay que cambiarEl fichero
#html5mor | @medinamanu | @maspixel
Otras novedades
• Nuevas APIs Web Workers (lanzar procesos en segundo plano)
Web Messages (comunicación segura entre dominios)
¡Más chicha!
#html5mor | @medinamanu | @maspixel
ExtrasChuleta de HTML5:http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
Modernizr: Librería de javascript que ayuda a utilizar la nueva tecnología y hacerla compatible con antiguos navegadoreshttp://www.modernizr.com/
HTML5doctorhttp://html5doctor.com/
Dive into HTML5http://diveintohtml5.org/
Charlas de HTML5, que va a ver y que ha habido:http://www.w3c.org/talks
Paso a Paso HTML5: En Español http://html5pasoapaso.blogspot.com/
Maspixel: Revista independiente de diseño y programación web.http://www.maspixel.com
#html5mor | @medinamanu | @maspixel
Gracias
@medinamanu
¡¡¡¡A practicar!!!!
Top Related