CENTEC CENTEC HTML5 y HTML5 y el Futuro de la Web

CENTECCENTECHTML5 y HTML5 y el Futuro de la Webel Futuro de la Web

www.centeconline.comwww.centeconline.com

Euclides [email protected]

@efigueroah

mailto:[email protected]

HTML5 que veremosHTML5 que veremos

Introducción <!DOCTYPE html> Estructura Básica de un documento en html5 Nuevas etiquetas estructurales en HTML5 Más de los nuevos elementos de HTML5 Compatibilidad de HTML5 con los Navegadores. Creando contenido editable en HTML5. Formularios en HTML5. Nuevos elementos y Nuevos atributos. Videos en HTML5. Etiqueta Audio en HTML5.

HTML5 que veremosHTML5 que veremos

Empecemos a trabajar con canvas en HTML5. Dibujemos formas básicas con canvas Dibujemos el logo de HTML5 solo con Canvas SVG en HTML5 Microdatos en Html5 (Microdata) Geolocalización Obteniendo las coordenadas del usuario

Qué es HTML5?Qué es HTML5?

Bueno antes que todo están las preguntas básicas, ¿que es?, ¿para que es?, ¿En que me beneficio?, y no pueden hacer falta en este mundo del diseño y la estructura web y específicamente en este tema de HTML5

¿Que es html 5? – Simplemente Como su nombre indica, HTML 5 es el sucesor de HTML4. Este trabajo o proyecto de HTML5 se inicio a finales de 2003 con un grupo de trabajo que se propuso a hacer un lenguaje que llegara con un conjunto de tecnologías que permiten construir la nueva Web.

No fue sino hasta 2007 que el HTML5 del W3C acepta la visión mediante la incorporación en ella del grupo de trabajo. Los principios de diseño son claras: para simplificar el uso de HTML, la formalización de las prácticas actuales, y garantizar la máxima compatibilidad con versiones anteriores.


¿Para qué va a servir?

En primer lugar, el HTML 4 se utiliza para estructurar un documento. El html5 no cambia este objetivo, solo que tendremos más oportunidad de hacer las cosas más simplificadas y de una manera más sencilla.

Eso es todo, ahora podemos crear aplicaciones web de una manera menos complicada ya que esta tecnología mejora e incorpora muchos conceptos de programación web, como decir un todo en uno.



Estándar abierto y accesible Elementos nuevos Web Semántica API’s de desarrollo Retrocompatible Nueva filosofía de trabajo Impulsado por los grandes y pequeños


¿Porqué es mejor HTML5?

Esta es una pregunta muy importante que no requiere una cátedra para dar una respuesta,

Porque es una tecnología que supera a la actual HTML, porque es lo nuevo que estandariza la W3C

Porque es nueva tecnología y como toda nueva tecnología siempre viene con cosas que nos van a impresionar

Porque llega de la mano de CSS3, una evolución notable de las hojas de estilo que conocíamos y porque revaloriza el papel de JavaScript en la Web, como el lenguaje que “sabe hablar” con las nuevas APIs que llegan con HTML5.


En resumen, HTML5 conduce a una fusión entre JavaScript como lenguaje de programación, HTML como modelo semántico y css3 que es la evolución del css como el lenguaje de los estilos, que se dedica a dar un mejor aspecto a nuestros proyectos.

¿Qué hay de nuevo entonces en html5?

Hay muchas mejoras y cosas nuevas que nos pueden sorprender por ejemplo el tema de formularios, la forma de estructuración en fin…


A continuación alguna de las reglas establecidas para HTML5:

Las nuevas características debe basarse en HTML, CSS, DOM y JavaScript.

Reducir la necesidad de plugins externos (como Flash).

Mejor manejo de errores.

Más marcado para reemplazar secuencias de comandos.

HTML5 debe ser independiente del dispositivo.

El proceso de desarrollo debe ser visible para el público.

Trabaja sobre…Trabaja sobre…

Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+ IE 9.0+ dicen… iPhone iPod Touch iPad Android OS

Pero siempre es importante hacer pruebas de validación

http://html5test.com/

Tipo de DocumentoTipo de Documento

Tipo de Documento

<!DOCTYPE html> Lenguaje del Documento

<html lang="ES"> Codificación del Documento

<meta charset="UTF-8"> Enlaces a CSS, Favicon y RSS

<link rel="stylesheet" href="estilos.css"> <script src=jquery.js></script>

Estructura Mínima de un DocumentoEstructura Mínima de un Documento

<!DOCTYPE html><html lang="ES"><head> <title>Este es un ejemplo de HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilo.css"></head><body> Este es el cuerpo de la página, donde irá todo el contenido.</body></html>

El nuevo <! DOCTYPE>El nuevo <! DOCTYPE>

Esto es lo primero que encontramos en un documento web.

Te reto a que me nombre la cabeza el tipo de documento de XHTML 1.0 Strict o HTML 4.01.

No es fácil ¿eh?.

El <! DOCTYPE> para la version HTML 4.01:

<!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//ES" » "http://www.w3.org/TR/html4/strict.dtd">


Esto es lo primero que encontramos en un documento web.

De nuevo...

Aqui el <! DOCTYPE> para la version HTML 1.0:

<!DOCTYPE html PUBLIC »

"-//W3C//DTD XHTML 1.0 Strict //ES" »

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En realidad todo lo que dice en los anteriores codigo es “este documento está escrito en HTML 4.01,” o “Este documento está escrito en XHTML 1.0.”, eso es todo.


Ahora en HTML5 El encabezado o la primera línea se ha simplificado considerablemente. Ahora podemos mantener este Doctype en la memoria, sin tener que copiar y pegar. Es solo esto:

<!DOCTYPE html>

Es tan corto que todo el mundo lo puede memorizar.

El <! DOCTYPE> debe ser lo primero que debe ir en un documento HTML 5, antes de la etiqueta <html>.

¡¡Ojo!! <DOCTYPE!>, no es una etiqueta, esto es una instrucción para el navegador que declara la versión de html que se está usando.


En HTML 4.01, todo la declaración del <! DOCTYPE> requieren una referencia a una DTD, HTML 4.01, porque se basa en SGML.

HTML5 no se basa en SGML, y por lo tanto no requiere una referencia a una DTD.

Importante: Siempre agregue la declaración <DOCTYPE! html> a los documentos HTML, para que el navegador sepa qué tipo de documento debe de esperar.

CompatibilidadCompatibilidad


Hoy día ya en el futuro hablado desde hace años es increíble que hablemos de compatibilidad, pero es la realidad, hoy día vemos una gran avanzada en las grandes empresas que controlan la web para mejorar este asunto.

Desafortunadamente existen todavía residuos del pasado, viejos navegadores que podrían dar algún dolor de cabeza de vez en cuando, cuando ejecutamos HTML5 Y CSS3

Vamos a tener que dar soporte a algunas versiones de internet explorer de pronto no la 6 aunque no faltara quien lo use pero si tratar de lidiar con la versión 7, 8 y 9 que no soportan todas las nuevas etiquetas y elementos.


Ranking por Versiones, Navegadores de Escritorio Mayo 2012:

Internet Explorer 8: 26.92% Internet Explorer 9: 17%

Firefox 12: 11.15%

Chrome 18: 9.10%

Chrome 19: 7.41%

Internet Explorer 6: 17%

Safari 5.1: 3.48%

Internet Explorer 7: 3.43%

Firefox 11: 2.24%

Firefox 3.6: 1.81%

Opera 11: 1.40%


RHerramientas que te ayudaran a trabajar correctamente con HTML5 aun en los navegadores antiguos.

1 – HTML5 Test. nos indica el soporte de HTML5, ítem por ítem, del navegador que estamos usando para pasar el test


2 – html5shiv Esta herramienta nos ayuda muchísimo ya que hará que los navegadores viejos obsoletos puedan entender los nuevos elementos de HTML5, basta incluir un pequeño código de enlace en la etiqueta <head> y podremos trabajar con la nueva versión de HTML libremente sin preocuparnos de los navegadores de antaño.

Seria algo mas o menos asi:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>

http://html5shiv.googlecode.com/svn/trunk/html5.js


3 – Modernizr esta libreria le permite ofrecer “respaldo” de estilo en los navegadores que no soportan HTML5 ciertas características de CSS3.

Esta libreria puedes detectar si el navegador tiene soporte para multiples capacidades HTML5, Modernizr.

De una forma sencilla, nos permite incluirla en nuestras páginas y comprobar la compatibilidad con el navegador.


4 – y por ultimo HTML5 Cross Browser Polyfills.

Estas librerías están basadas generalmente en HTML, CSS y especialmente en JavaScript.

Dentro de las soluciones que encontraremos se destacan alternativas para audio, video, formularios, geolocalización, SVG, Canvas, Web Storage, Web Sockets, Web Workers, entre otras.


Bueno y tenemos más herramientas disponibles en la web, solo te quería dar esta información y hacerte saber que puedes hacer compatible HTML5 con todos los navegadores, muy pronto ya inetrnet explorer 7 y 8 dejaran de ser usados por las personas, mientras nos toca hacer trucos para sacar proyectos adelantes.

En conclusión. Podemos entrar en este mundo de HTML5 confiadamente, estamos en era de cambio y no sería posible que nos quedemos en el pasado trabajando con antiguas tecnologías.

Estructura SemánticaEstructura Semántica

AntesAntes

AhoraAhora

Elementos estructuralesElementos estructurales

Bueno vamos a definir una estructura más completa de un documento web utilizando las nuevas etiquetas estructurales.

<header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.

Vamos a definir el documento y luego vamos a examinar las etiquetas más a fondo y conocer como las podemos utilizar en nuestros propios proyectos.


Bueno comencemos a definir

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8"/>

<meta name="description" content="Curso html5" />

<title>Mi primera pagina web en html5</title>

</head>



<body>

<header>

<hgroup>

<h1>Mi curso de html5</h1>

<h2>Aprende desde una nueva tecnica</h2>

</hgroup>


Hemos utilizado estos elementos <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.

Para marcar y así formar la estructura casi que completa de nuestra página, ahora es evidente notar los nuevos nombres, es el momento para estudiar en detalle un poco más de esas nuevas etiquetas que llamamos estructurales.

<header>: Esta etiqueta hace el mismo trabajo que esta <div id=”header”>, esta etiqueta <header> la utilizamos para contener información adicional como logos y ayudas a la navegación, iconos de redes sociales etc. Esta etiqueta tiene su cierre de esta manera </header>.


<header>: Esta etiqueta hace el mismo trabajo que esta <div id=”header”>, esta etiqueta <header> la utilizamos para contener información adicional como logos y ayudas a la navegación, iconos de redes sociales etc.

Esta etiqueta tiene su cierre de esta manera </header>

El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc).

El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página).


<hgroup>: Muchos headers de las páginas web podrán contener múltiples títulos representados con la etiqueta h1, y de pronto un subtitulo formando con la etiqueta h2.

Bueno esta nueva etiqueta <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.

Esta etiqueta tiene su cierre de la siguiente forma, </hgroup>.



<body>

<header> ..... mas etiquetas

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">quienes somos</a></li>

<li><a href="#">portafolio</a></li>

<li><a href="#">contacto</a></li>

</ul>

</nav>


<nav>: El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación.

La etiqueta <nav> está diseñada para colocar la botonera o navegación principal los normales (Home, quienes somos, portafolio, contáctenos, blog). Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> con sus respectivos <li>, su cierre es </nav>.

No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación..



<body>....

<article>

<h2>Aquí va un post, con su titulo en h2</h2>

<p>Aqui puede ir los contenidos del post</p>

</article>

<article>

<h2>Aquí va un post, con su titulo en h2</h2>

<p>Aqui puede ir los contenidos del post</p>

</article>


<section>: Esta etiqueta Define un área de contenido única dentro del sitio.

Esta es una de las etiquetas mas genéricas de los elementos estructurales ya que podemos agrupar contenidos relacionados por el tema.

Ejemplo: En un blog, esta etiqueta sería la zona donde están todos los posts, el cierre de esta etiqueta es </section>.

El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado.

Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.


<article>: Esta etiqueta especifica un contenido independiente y autónomo.

Define zonas únicas de contenido independiente.

Ejemplo: En el home de un blog, cada post sería un <article> y el post y cada uno de sus comentarios serían varios <article>, el cierre respectivo de esta etiqueta es </article>..



<body>....

<aside>

<h2>Titulo del sidebar</h2>

<p>alguna informacion que se muestra en la barra lateral </p>

<ul>

<li><a href="#">enlace A</a></li>

<li><a href="#">enlace B</a></li>

</ul>

</aside>


<aside>: Esta etiqueta es creada para contener información no relevante para el sitio web como da a sospechar su nombre que se traduciría algo así como “a un lado”.

En un blog, obviamente el <aside> es la barra lateral de información donde se muestra las categorías, blogroll etc.

Esta etiqueta puede contener cualquier cosa desde un reproductor multimedia hasta una galería de imágenes.

El cierre de esta etiqueta es </aside>.



<body>....

<footer>

<p>Aqui va el Pie de pagina, copyright, el menu otra vez, etc.</p>

</footer>

</body>

</html>


<footer>: Esta etiqueta lo que define es un pie de página con la información del copyright, autor un menú o lo queramos colocar en el pie de la web, el cierre de esta etiqueta es </footer>.

NOTA: Algo muy importante: el caso de ver nuevas etiquetas estructurales no significa que desaparecieron los divs, los podemos seguir utilizando en cuestiones de contenido interno, porque para el tema de la estructura y semántica las nuevas etiquetas nos pueden venir my bien, y es bueno que comencemos a basarnos en ellas.


Distribución SemánticaDistribución Semántica

HEADERHEADER

HEADERHEADER

NAVNAV

NAVNAV ARTICLEARTICLE ARTICLEARTICLE VIDEOVIDEO

SECTIONSECTION

SECTIONSECTIONASIDEASIDE

FOOTERFOOTER

FIGUREFIGURE FIGUREFIGURE

Mas de los elementos estructuralesMas de los elementos estructurales


Además de los elementos estructurales vistos. HTML 5 introduce una serie de nuevos elementos semánticos que son elementos que sin ninguna duda mejoran la estructura de cualquier sitio.

Las etiquetas semánticas, son claves para posicionamiento en buscadores y el buen desarrollo web.

Vamos a examinarlas y a ver algunos detalles de ellas y también HTML5 incluye nuevos elementos para el manejo de las forma, el dibujo y para el contenido de los medios de comunicación.

Y también vamos a ver algunas etiquetas que fueron eliminadas en esta nueva versión de HTML.


Etiqueta Descripción

<article> Define un artículo

<aside> Define el contenido aparte del contenido de la página

<bdi> Aísla una parte del texto que pueda ser formateada en una dirección distinta de otro texto fuera de ella

<command> Define un botón de comando que un usuario puede invocar

<details> Define los detalles adicionales que el usuario pueda ver u ocultar

<summary> Define un título visible para un elemento <details>

<figure> Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listas de códigos, etc

<figcaption> Define un título para un elemento <figure>



<footer> Define un pie de página de un documento o sección

<header> Define un encabezado de un documento o sección

<hgroup> Agrupa un conjunto de etiquetas desde los <h1> hasta los <h6> cuando un título tiene varios niveles

<mark> Define el texto marcado / resaltado

<meter> Define una medida escalar dentro de una gama.

<nav> Define vínculos de exploración



<progress> Representa el progreso de una tarea

<ruby> Define una anotación de rubí (para el Este de la tipografía de Asia)

<rt> Define una explicación / pronunciación de los caracteres (para el Este de la tipografía de Asia)

<rp> Define lo que se muestra en los navegadores que no son compatibles con anotaciones de rubí

<section> Define una sección de un documento

<time> Define una fecha / hora

<wbr> Define una posible ruptura del verso

Elementos eliminados de la version Elementos eliminados de la version anterior de HTMLanterior de HTML

Los siguientes elementos o etiquetas DE LA VERSION HTML4 fueron eliminados y su uso no sera correcto para la nueva versión de HTML5

<acronym> <applet>

<basefont> <big>

<center> <dir>

<font> <frame>

<frameset> <NOFRAMES>

<strike> <tt>


Controles de FormulariosControles de Formularios


Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios.

En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manejo en si para verse más atractivos.

Vamos a ver una pequeña muestra a las nuevas características de los formularios en HTML5. Y entenderemos que sus nuevas características son muy importantes para la web de hoy.



<datalist> Especifica una lista de opciones predefinidas para los controles de entrada

<keygen> Define un campo generador de par de claves (para las formas)

<output> Define el resultado de un cálculo

Nuevos Controles de Formularios - InputNuevos Controles de Formularios - Input

Telephone Url Email Password Datetime Date Month Week Number Range Color

Formularios <input>Formularios <input>

Todos sabemos que La etiqueta <input> especifica un campo de entrada donde el usuario puede introducir datos. Bueno, en HTML5 vemos que tiene varios tipos de entrada o <input>. Estas nuevas características permiten un mejor control de entrada y validación. Ejemplos, tenemos:

<input type=text>: especifica que el usuario debe de llenar el campo con texto

<input type=email>: especifica que el usuario debe de llenar el campo con un email valido

<input type=url>: especifica que el usuario debe de llenar el campo con url

<input type=color>: especifica que el usuario debe de llenar el campo con un color

Formularios <input>Formularios <input>

Todos sabemos que La etiqueta <input> especifica un campo de entrada donde el usuario puede introducir datos. Bueno, en HTML5 vemos que tiene varios tipos de entrada o <input>. Estas nuevas características permiten un mejor control de entrada y validación. Ejemplos, tenemos:

<input type=date>: especifica que el usuario debe de llenar el campo con una fecha

<input type=month>: especifica que el usuario debe de llenar el campo con unos de los meses

para ver mas opciones ve aquí: http://www.w3schools.com/html5/html5_form_input_types.asp

Formularios <datalist>Formularios <datalist>

Además de los nuevos tipos de entrada, este tiene varios atributos nuevos para especificar el comportamiento y las limitaciones: Autocomplete, min, max, pattern, múltiple, y step.

También para las listas hay un nuevo atributo, es el elemento <datalist>, que especifica una lista de opciones predefinidas para un elemento <input>

- Hablemos de los nuevos atributos para <input> y para <form>

Formularios Los nuevos atributosFormularios Los nuevos atributos

Este elemento proporcionar un “autocompletar” en funciones de los <input>. Es decir cuando el usuario se situé dentro del campo y comience a escribir este campo va a desplegar una cantidad de opciones predefinidas anteriormente en su configuración. Ejemplo:

<input list="Paises-europeos" />

<datalist id="Paises-europeos">

<option value="España"> <option value="Francia">

<option value="Alemania"> <option value="Portugal">

<option value="Holanda">

</datalist>

Si comienzas a escribir con la letra e, el por supuesto te autocompletara españa. Asi funciona.


El atributo autocomplete:

Que vendría siendo “Autocompletar” La mayoría de los navegadores tienen algún tipo de funcionalidad de autocompletar. El atributo autocomplete permite controlar cómo funciona esto. El atributo autocomplete específica si un campo de formulario o de entrada debe tener autocompletado de encendido o apagado, es decir On o Off.

<form action="form.php" autocomplete="on">

Nombre:<input type="text" name="fname" /><br />

Apellido: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>


El atributo autofocus:

El autofocus o enfoque automático proporciona una forma declarativa para enfocar un control de formulario durante la carga de la página. Anteriormente, un desarrollador necesita para escribir JavaScript utilizando control.focus (). La nueva forma permite al navegador hacer cosas inteligentes como no centrar el control si el usuario ya está escribiendo en otro.

<form action="form.php">

Nombre:<input type="text" name="fname" autofocus="autofocus"/><br />

Apellido: <input type="text" name="lname" autofocus="autofocus"/><br />

E-mail: <input type="email" name="email" autofocus="autofocus" /><br />


</form>


El atributo multiple:

El atributo multiple especifica que el usuario puede introducir más de un valor en el elemento <input>. Ej: <input type=email múltiples> permite al usuario introducir varias direcciones de correo electrónico.

Seleccione varias imagenes:

<input type="file" name="img" multiple="multiple" /><br/>

Entre varios Email:<input type="email" multiple="multiple">

Anteriormente solo se soportaba en navegadores que implementan WebKit como Chrome.


El atributo required:

El atributo required o requerido en un elemento se establecerá en un <input>, y automáticamente hace que el usuario se vea obligado a llenar el campo para continuar, es decir el navegador no permitirá que se envié la forma sin que el input con este atributo este vacío.

<form action="demo_form.asp">

Nombre: <input type="text" name="name" required="required" />


</form>

El atributo requerido trabaja con los tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.


El atributo required:

El atributo required o requerido en un elemento se establecerá en un <input>, y automáticamente hace que el usuario se vea obligado a llenar el campo para continuar, es decir el navegador no permitirá que se envié la forma sin que el input con este atributo este vacío.

<form action="demo_form.asp">

Nombre: <input type="text" name="name" required="required" />


</form>

El atributo requerido trabaja con los tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.


El atributo min y max:

El atributo min and max o mínimo y máximo nos hace especificar el valor mínimo y máximo para un elemento <input>.

Escoja de 1 a 5: <input type="number" name="quantity" min="1" max="5" />

El atributo min a max funciona con los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time and week.

Formularios <output>Formularios <output>

El elemento <output> es para mostrar los resultados de un cálculo o de otro tipo con la escritura.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50" />100 +

<input type="number" name="b" value="50" /> =

<output name="x" for="a b"></output>

</form>

Por ejemplo aquí se realiza un cálculo del atributo step que nos genera un resultado y el del atributo range que nos presenta un slider que podemos graduar para dar un resultado. Y el resultado total lo sacamos utilizando el elemento <output>

Nuevos Controles de FormulariosNuevos Controles de Formularios

Puedes ver una relación oficial del borrador del estándar en:

http://dev.w3.org/html5/spec/

www.whatwg.org/specs/web-apps/current-work/multipage/



Controles EditablesControles Editables

Atributos de Controles EditablesAtributos de Controles Editables

contenteditable Hace elementos HTML editable. Puede tener 3 valores: true, false é inherit.

designmode Hace editable un documento completo elemento. Puede tomar 2 valores: ON ú OFF.

designmode Habilita la corrección ortográfica. Funciona en Firefox y hay que descargar los diccionarios. Puede tomar 2 valores: True o False.

Contenido editableContenido editable

HTML5 abre una vía nueva para poder interactuar con los usuarios que visiten el sitio web.

Se trata de el nuevo elemento contentEditable, que nos da la posibilidad de crear partes en un documento HTML5 que sea completamente editable.

Esta propiedad (contentEditable) sólo permite editar ya sean los textos que tengan este atributo asignado dentro de un elemento del documento HTML5, veamos como funciona:


<h2>texto no editable</h2>

<section id="editable" contenteditable="true"> <h3>este titulo si es editable</h3> <p>Al igual que este parrafo</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </section>


Bueno en el código anterior tenemos un documento HTML5

Tengo una etiqueta h2 y luego tengo una sección con un id editable para darle algún estilo y a esa section le asocio la el atributo contenteditable con la propiedad true, es decir todo lo que hay en esta sección con será editable.

El h3, el parrafo y la lista desordenada las voy a poder editar y agregar texto del lado del cliente o navegador.

El h2 que está afuera de la sección, será imposible editar.

Controles CanvasControles Canvas

Contenido en el LienzoContenido en el Lienzo

Una de las grandes novedades de HTML5 es el elemento canvas que en español la podemos llamar “lienzo”, que lo podemos utilizar para dibujar gráficos en el documento web utilizando secuencias de comando (generalmente javascript).

Vamos a poder dibujar cualquier cosa que nos podamos imaginar claro esta (utilizando javascript), esto es realmente buenos para nuestros proyectos web, por que mejorara el rendimiento de las misma ya que no vamos a tener que cargar muchas imágenes como antes, ya que con Canvas vamos a crear formas, líneas, degradados, textos, arcos, patrones y muchas cosas más, como el manipular pixeles de las imágenes y manipular videos.



<canvas> Se utiliza para dibujar gráficos sobre la marcha a través de secuencias de comandos (normalmente JavaScript)


Bueno antes de empezar ten en cuenta que usar el elemento <canvas> no es muy difícil, pero sí es necesario un conocimiento básico de HTML y JavaScript . Ahora si, a Comenzar

Creación de un elemento Canvas

El primer paso para la utilización de canvas es añadir su etiqueta <canvas> y su cierre </canvas>.

<canvas>

Perdon, tu navegador no soporta la etiqueta Canvas.

</canvas>


En el código anterior podemos ver la apertura y cierre de el elemento canvas, dentro de estas etiquetas podemos colocar un mensaje que solo será leído o solo se interpretara si el navegador no soporta canvas.

Podemos colocar cualquier mensaje incluso un link para invitar a actualizar su navegador.

<canvas id="lienzo" width="350" height="350"> Perdon, tu navegador no soporta canvas.</canvas>

A este elemento le podemos aplicar 2 atributos width, height (ancho y alto) estos atributos son opcionales es decir podemos especificar o no. Ahora, al no especificar el ancho ni el alto el valor inicial será 300px de alto * 150px de alto.


Ahora, también le podemos identificarlo por medio de un ID o una Clase para poder personalizarlo mejor por medio de CSS y manipularlo o identificarlo mejor con Javascript.


<canvas id="tutorial" width="350" height="350" style="border: 1px solid #000000;"> Perdon, tu navegador no soporta canvas.</canvas> <script type="text/javascript"> var c=document.getElementById("tutorial"); var cxt=c.getContext("2d"); cxt.fillStyle="blue"; cxt.fillRect(10,10,100,50);</script>




Dibujar Rectángulos con canvas

Vamos a comenzar viendo cómo podemos hacer para crear rectángulos, que viene a ser lo más básico que podemos hacer con canvas.

Métodos simples con la cual vamos a crear rectángulos:



<canvas id="curso" width="150" height="150" style=" border: 2px solid #000000"></canvas> <script type="text/javascript"> var c=document.getElementById('tutorial'); var ctx=c.getContext('2d'); // Formas rectangulares ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); </script> </canvas>




Los tres métodos toman cuatro argumentos (x,y,w,h) que son los

desplazamientos desde la esquina superior del elemento, el ancho y alto,

bueno en al cuadro anterior te explico cómo funcionan las coordenadas de

desplazamiento y el lienzo del elementos en canvas

En resumen esto fue lo que hicimos:

1º – se crea un cuadro negro de 100*100px con la función FillRect

2º – se elimina un cuadro de 60*60px con la función ClearRect

3º – se crea un contorno rectangular de 50*50px con StrokeRect


Trazar una línea con canvas

cxt.moveTo(20,10);= Creamos un punto de partida para la línea en el punto (x,y) de acuerdo a las coordenadas partiendo del eje 0.

cxt.lineTo(130,100);= Creamos un punto de llegada para la línea en el punto (x,y) de acuerdo a las coordenadas partiendo del eje 0.

cxt.lineWidth = 7; =Establecemos un ancho para la línea de 7px.

cxt.strokeStyle = “blue”; = Asignamos un color a la línea, en este caso será azul.

cxt.stroke(); = hacemos que la línea sea visible con el color del trazo



Dibujar Circulos con canvas

Hay métodos en canvas que nos permite dibujar círculos y en su defecto

arcos. Se trata de cxt.arc, vamos a ver cómo crear un circulo.


Dibujar Circulos con canvas <canvas id="tutorial" width="120" height="120" style="border: 1px solid gray;"> Tu navegador no soporta canvas. Actualizalo </canvas> <script type="text/javascript"> var c=document.getElementById("tutorial"); var cxt=c.getContext("2d"); cxt.fillStyle ="red"; cxt.beginPath(); cxt.arc(60,60,50,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>



Dibujar Circulos con canvas

cxt.fillStyle =”red”; = Creamos un tipo de relleno rojo al elemento que se creara.

cxt.beginPath(); = Sirve para empezar un recorrido, no se le añadió ningún parámetro.


cxt.arc(60,60,50,0,Math.PI*2,true); = Esta función es la más importante ya que nos crea un arco y nos sirve para hacer el circulo, y los parámetros son:

60 en su centro en X

60 en su centro en Y,

50px radio en desde el centro, que es el punto que creamos con las coordenadas X, Y, luego empezamos un circulo desde 0 hasta el final del arco expresado en radianes por que no soporta grados, (1 vuelta completa de circulo es igual a 2 PI Radianes),

y sacamos a PI de la librería Math, entonces obtenemos Math.PI*2

por ultimo true para decir que queremos ver la parte positiva del arco es decir se hace el recorrido de acuerdo a como giran las manecillas del reloj.


cxt.closePath(); = Cerramos el recorrido.

cxt.fill(); = Rellenamos el recorrido

y asi obtenemos un circulo sencillo con canvas.

Audio y VideoAudio y Video

Formato de <video>Formato de <video>

HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso.

Una de estas mejores es la de poder incluir directamente video y audio en el código, para depender de el mismo HTML y no de flash como lo veníamos haciendo (bueno ahora tenemos otra alternativa para elegir)

Una buena razón para utilizar videos en nuestro HTML5 es por la decisión de Apple de no soportar Flash en el iPhone y el IPAD. IOS, el sistema operativo que se ejecuta en estos teléfonos, tiene soporte para vídeo MP4.



<audio> Define el contenido de sonido

<video> Define un vídeo o una película

<source> Define los recursos de medios múltiples para <video> y <audio>

<embed> Define un contenedor para una aplicación externa o de contenido interactivo (un plug-in)

<track> Define las pistas de texto para <video> y <audio>

Formato de <video> - AntesFormato de <video> - Antes

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" 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/oHg5SJYRHA0&hl=en&fs=1&" />

<param name="allowfullscreen" value="true" />

<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">

</embed>

</object>

Formato de <video> - AhoraFormato de <video> - Ahora

CON HTML5

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>

</video>


Comencemos por lo básico, para añadir un video vamos a necesitar el siguiente código:

<video src=”video.mp4”></video>

bueno para tener mas control a esta etiqueta podemos agregar width and height es decir alto y ancho como lo hacemos con las imagenes, quedaria asi el codigo mas completo:

<video src="video.mp4" width="375" height="280"></video>

El atributo src curso define la dirección del archivo de vídeo, así como para la etiqueta img. También estamos especificando las dimensiones con los atributos width y height .

Atributos de <video>Atributos de <video>

autoplay Para que el video se reproduzca automáticamente. Puede tener valor TRUE o FALSE.

controls Para que se muestre barra de control debajo del video.


Src: El atributo src especifica la ubicación (URL) del archivo de vídeo.

<source src="video.ogg" type="video/ogg" />

Este atributo src tiene un atributo que es type, que especifica los recurso de los medios de comunicación. La forma correcta de incluir el atributo src seria este:

<video controls="controls" width="375 height="280">

<source src="sintel.ogg" type="video/ogg"/>

<source src="sintel.mp4" type="video/mp4"/>

<source src="sintel.webm" type="video/webm"/>

</video>


Width and Height: especificamos la altura y alto del video, lo hacemos en pixeles

<video width="320" height="240" controls="controls">

*Loop: el atributo loop o bucle especifica que el video comenzará otra vez, cada vez que se haya terminado.

<video controls="controls" loop="loop"> o <video loop>


*Muted: este atributo especifica que la salida de audio del vídeo debe ser silenciado.

<video controls="controls" muted="muted"> o <video muted>

*Preload: empezará a precargar el video independientemente de las acciones del usuario sobre el player.

<video preload="auto|metadata|none">


*poster: este atributo especifica una imagen que se muestra mientras el vídeo se descarga, o hasta que el usuario pulsa el botón de reproducción.

Si este atributo no está incluido, el primer fotograma del vídeo se utilizará en su lugar.

<video poster="URL"> 

<video poster="href="imagenes/poster-video.jpg">


Puede tener las propiedades:

Auto: el navegador debe cargar todo el video cuando se carga la página

Metadata: el navegador debe cargar los metadatos sólo cuando se carga la página

None: el navegador no se debe cargar el vídeo cuando se carga la página

Este atributo no se utiliza mucho..


IMPORTANTE A la fecha los navegadores comerciales sólo soportan el formato de video Vorbis OGG y MP4.


Multiples Fuentes para mostrar el video

Bueno como no hay un formato estándar para los videos en HTML5 debemos de incluir varios archivos de videos con diferentes fuentes de formatos ya que no todos los navegadores leen el mismo formato, y así nos aseguraremos que el video se muestre en todos los navegadores modernos.

Esto es lo que hay que hacer hoy en día por que no sabemos si los navegadores o sus fabricante se pondrán de acuerdo para elegir un solo formato que rija la web con la etiqueta video.










Lo que hacemos es quitar el src dentro de la etiqueta video y crear varios src apuntando a cada video independientemente dentro de los tags <video></video>. Seria algo asi:

<video controls="controls" width="375 height="280">

<source src="sintel.ogg" type="video/ogg"/>

<source src="sintel.mp4" type="video/mp4"/>

<source src="sintel.webm" type="video/webm"/>

Tu navegador no soporta video HTML5

</video>

Frameworks para VideoFrameworks para Video

http://www.html5video.org/kaltura-html5/http://www.html5video.org/kaltura-html5/

http://sublimevideo.nethttp://sublimevideo.net//

Formato de <audio>Formato de <audio>

Añadir sonido o archivos de audio a nuestras páginas web suele ser muy importante para algunos proyectos en especifico, pero resultaba un poco incomodo que dichos archivos de audios solo eran reproducido si el navegador en cuestión tenia instalado algún plugin (por ejemplo flash).

Por suerte ahora en HTML5 contamos con una nueva etiqueta o un nuevo elemento que especifica un estándar para incluir archivos de audio en nuestras páginas web sin necesidad de plugins que hagan este trabajo.

Se trata de la etiqueta <audio> y en este tutorial vamos a hablar de ella, sus atributos y ajustes y compatibilidad con los diferentes navegadores web.

Esta etiqueta funciona igual a su hermano la etiqueta video, claro con diferentes formatos, pero su estructura es parecida.


Para reproducir un archivo de audio en HTML 5 bastaria con abrir la etiqueta audio colocarle le fuente por medio de src que nos dice la ubicacion del archivo y cerramos la etiqueta audio, el código básico que necesitaremos es el siguiente:

<audio src=”Audio.wav”></audio>


Multiples Fuentes para la etiqueta audio

Al igual que la etiqueta de video y de los diferentes formatos, aca en audio tenemos que especificar lo mismo, multiples formatos ya que no hay una definida que implemente todos los navegadores. Para esto vamos a utilizar estos formatos WAV, Ogg Vorbis y MP3.

<audio controls><source src="Audio.mp3" type="audio/mpeg" /><source src="Audio.ogg" type="audio/ogg" /><source src="Audio.wav" type="audio/wav" /></audio>

De esta forma triplicamos el espacio preparado para el archivo pero garantizamos su perfecta compatibilidad.


Atributos para la etiqueta audio

La etiqueta audio en HTML5 cuenta con varios atributos para ampliar su funcionamiento, vamos a ver cuales son:

* atributo autoplay: Bueno este atributo booleano es bastante intuitivo, lo que básicamente hace es cargar y ejecutar el sonido cuando cargue la pagina.

<audio src=”Audio.wav” autoplay></audio>



<audio src=”Audio.wav” autoplay="autoplay"></audio>


* atributo controls: Lo que hace este atributo booleano es hacer que el reproductor de audio de cada navegador muestre los respectivos controles de: reproducir, pausa, volumen etc… esta sería la forma de utilizarlo:

<audio src=”Audio.wav” controls></audio>


<audio src=”Audio.wav” controls="controls"></audio>

Hay que tener en cuenta las diferentes formas de mostrase el reproductor en los diferentes navegadores, recuerda que no son iguales y que podemos ajustarlos con css.


*atributo loop: Otro atributo booleano, que indica que el audio es ser repetido continuamente, es decir que funcione como bucle, se termina y vuelve a comenzar.

<audio src=”Audio.wav” loop></audio>


<audio src=”Audio.wav” loop="loop></audio>


*atributo preload: empezará a precargar el video independientemente de las acciones del usuario sobre el player. al igual que en la etiqueta video este atributo generalmente no es utilizado, esta atributo tiene tres parametros: auto, metadata y none.

auto: el navegador debe cargar todo el audio cuando se carga la página

metadata: el navegador debe cargar los metadatos sólo cuando se carga la página

none: informa al navegador que no hay necesidad de realizar la precarga.

<audio preload="auto|metadata|none">


*atributo src: Este atributo src especifica la ubicación (URL) del archivo de audio, ya sea una url interna o externa.

<audio src="URL">

Este atributo src tiene un atributo que es type, que especifica los recurso de los medios de comunicación.


una forma correcta para utilizar este atributo es asi:

<audio controls>

<source src=”Audio.wav” type=”audio/wav" />

<source src=”Audio.ogg” type=”audio/ogg" />

<source src=”Audio.mp3” type=”audio/mpeg" />

</audio>


una forma correcta para utilizar este atributo es asi:

<audio controls>

<source src=”Audio.wav” type=”audio/wav" />

<source src=”Audio.ogg” type=”audio/ogg" />

<source src=”Audio.mp3” type=”audio/mpeg" />

</audio>

Que más puedes hacer con HTML5Que más puedes hacer con HTML5

http://www.thewildernessdowntown.com/http://www.thewildernessdowntown.com/

http://www.jolicloud.com/producthttp://www.jolicloud.com/product

http://wordmark.it/http://wordmark.it/

http://www.phoboslab.org/ztype/http://www.phoboslab.org/ztype/

http://www.nikebetterworld.com/http://www.nikebetterworld.com/

http://www.klowdz.com/http://www.klowdz.com/

http://www.effectgames.com/demos/canvascycle/http://www.effectgames.com/demos/canvascycle/

Y muchas cosas más…..te animas???Y muchas cosas más…..te animas???

CENTECCENTECHTML5 y HTML5 y el Futuro de la Webel Futuro de la Web

www.centeconline.comwww.centeconline.com

Euclides [email protected]

@efigueroah

mailto:[email protected]

CENTEC CENTEC HTML5 y HTML5 y el Futuro de la Web

Documents