HTML5 la revolución!

#html5mor | @medinamanu | @maspixel

Píldora formativa HTML5

Marzo 2011


Hashtag de Twitter:

#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


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


HTML5 y el futuro presente

de la web


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!


Í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


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!



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



Script en HTML4:<script type="text/javascript“ scr="jquery.js"></script>

Script en HTML5:<script scr="jquery.js"></script>



Link stylesheet en HTML4:<link rel="stylesheet" type="text/css” href="style.css">

Link stylesheet en HTML5:<link rel="stylesheet" href="style.css">


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!


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…)


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


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)


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.


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


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.


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….


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.


Compatibilidad navegadoresTodo muy bonito pero….

ProblemasIE6, IE7, IE8

Uh!!!!!!!!!!!!!!!!!!

Compatibilidad de navegadorsUsamos el método : Nicolas Gallagher

Dentro del head este script: 

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


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 …


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>


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;}


CSS3Ponemos negrita la última fila:tr:last-child{

font-weight: bolder;

}


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>


Audio y Vídeo

• Ahora:

<audio src="drums.mp3"></audio>

<video src="tutorial.m4v"></video>

Atributos: autoplay, controls, loop, preload...


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


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…


Formularios HTML5

• Autofocus <input type="text" autofocus>

• Placeholder (valor por defecto)

<input id="email" type="email" name="email“ placeholder="[email protected]" >


Formularios HTML5• Creación de barras

de desplazamiento,• campos numéricos

con flechas,• calendarios en el

campo fecha


Formularios HTML5

• Campos editablesTodos los elementos que tengan contenteditable=true se pueden grabar en una base de datos del servidor.


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


Canvas

Empecemos…

<canvas id="mi_canvas" width="150" height="150">Ohh!!! Tu navegador no soporta canvas

</canvas>


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


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


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


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


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


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


Otras novedades

• Nuevas APIs Web Workers (lanzar procesos en segundo plano)

Web Messages (comunicación segura entre dominios)

¡Más chicha!


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


Gracias

@medinamanu

¡¡¡¡A practicar!!!!

HTML5 la revolución!

Documents

Transcript of HTML5 la revolución!