Presentación Seminario Cleformación HTML5, El lenguaje del futuro

HTML5. El lenguaje del futuro

Nuevos paradigmas y problemas en el desarrollo de aplicaciones Web

7 de Junio 2013Fernando Silvano Gil

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de programación “básico” de la World Wide Web, el HTML

Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que demanda la web de hoy en día

METAS:• Documentos se comporten igual en todos los navegadores• Documentar y estandarizar extensiones útiles• Desarrollar prácticas nuevas características• Asegurar la compatibilidad hacia atrás• Definir un robusto tratamiento de errores

Introducción a HTML5 y CSS3

PRINCIPIOS DE DISEÑO Y DESARROLLO:

Organizado en 3 categorías:• Compatibilidad• Utilidad• Interoperabilidad


Principios de diseño: Compatibilidad• Apoyar el contenido existente• Degradar de forma elegante• No reinventar la rueda• Pavimentar los Cowpaths• Evolución, no revolución


Principios de diseño: Utilidad• Resolver problemas reales• Prioridad a la constitución• Medios independientes• Acceso universal• Apoyo a diferentes idiomas del mundo• Seguro por diseño• La separación de las preocupaciones / conceptos


Principios de diseño: Interoperabilidad• Bien definida por el comportamiento• Evitar una complejidad innecesaria• Controlar los errores


Este seminario presenta los elementos de HTML 5 que estánactualmente siendo implementados por los navegadores:

• FireFox• Chrome• Safari• Opera• Esperemos próximamente IE (a partir de las versiones 9)

HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión, se introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha prestado especial atención a la definición de claros criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad.

Navegadores

http://caniuse.com/

Navegadores LINK DE AYUDA

TABLA DE % DE OPERATIBILIDAD

La declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html.Según el rigor de HTML 4.01 utilizado podemos declararla como:

• Declaración transitoria: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

• Declaración estricta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Ahora con el HTML 5 se simplifica esta sección con la siguiente sintaxis:<!DOCTYPE HTML>

Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la especificación del HTML 5.

Etiquetas de HTML5DOCTYPE

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p>Si vemos el código fuente de esta página veremos la forma de declarar el DOCTYPE en HTML5.</p>

</body>

</html>

Etiquetas de HTML5DOCTYPE

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">

Etiquetas de HTML5META

Script en HTML4:

<script type="text/javascript“ scr="jquery.js"></script>

Script en HTML5:

<script scr="jquery.js"></script>

Etiquetas de HTML5 SCRIPTS

Link stylesheet en HTML4:

<link rel="stylesheet" type="text/css” href="style.css">

Link stylesheet en HTML5:

<link rel="stylesheet" href="style.css">

Etiquetas de HTML5 LINKS

Atributos 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

Etiquetas de HTML5

El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores.Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son: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)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.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. 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.

Etiquetas de HTML5 Elementos HTML Semánticos

footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.

aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa.El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.

article: El elemento article representa una entrada independiente en un blog, revista, periódico etc.Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.

Etiquetas de HTML5 Elementos HTML Semánticos

Etiquetas de HTML5 Elementos HTML Semánticos - NAVEGADORES

Etiquetas de HTML5NUEVAS TAGS

Etiquetas de HTML5 TAGS DEPRECADAS

La estructura de los formularios con HTML 5 no varía en nada con las versiones más antiguas de HTML aunque añadiendo muchas funciones, es decir para crear un formulario con nombre, e-mail, edad y pagina web como el que utilizaremos de ejemplo:

Su código sería:

<form id="form1" name="form1" method="post" action="consultar.php">

Nombre: <input type="text" name="nombre" id="nombre" />

Edad:<input type="text" name="edad" id="edad" />

E-mail:<input type="text" name="email" id="email" />

Web:<input type="text" name="web" id="web" />

</form>

Formularios Web

Como podemos ver en el código todos los campos de texto son type="text" ya sea para numero en caso de edad o para URL en este caso con el nombre de web, también existen otros "types" como password para que el texto se viera con asteriscos.En el caso de HTML5 tiene muchos "type" diferentes, cada uno específico para cada tipo de datos, son los siguientes:

• text: Para introducir texto, simplemente.• search: Específico para input en un buscador.• url: Específico para direcciones de página web. Requiere

http:// o http: simplemente.

Formularios Web

• tel:números de teléfono.• email: El nombre lo dice.• password: Escribe el contenido en asteriscos.• De tiempo: datetime, date, month, week, time y

datetimelocal.• number: Específico para números.• range: Sale una barra para elegir un número entre un

rango, el número hay que indicarlo entre un min="10" y un max="12" (los números son de ejemplo.)

• checkbox: Para seleccionar y deseleccionar.• radio button: Para seleccionar, uno obligatorio.

Formularios Web

Formularios Web NAVEGADORES

Las propiedades CSS3 se llaman de manera distinta en cada navegador:

• propiedad-css3 /* Oficial */• -moz-propiedad-css3 /* Mozilla Firefox */• -o-propiedad-css3 /* Opera */• -webkit-propiedad-css3 /* Chrome, Safari */

5 Propiedades de ejemplo:• Box Shadow: Lo que box shadow hace, es añadir una

sombra a un elemento del tipo caja (display: box), su sintaxis es la siguiente:

box-shadow: opcional: inset | desplazamiento-x | desplazamiento-y | desenfoque | expansion | color de sombra

Propiedades de CSS3

• Border Radius: añade bordes redondeados en las esquinas, su sintaxis es la siguiente:

border-radius: radio top | radio right | radio bottom | radio left

• Columns: Esta propiedad/propiedades son bastante útiles para cuando se quiere separar en columnas un texto o un grupo de elementos:

column-count: define el numero de columnas. column-rule: añade un separador entre las columnas,

mismo sintaxis que un borde. column-gap: la distancia que hay entra las columnas. column-width: define el ancho de cada columna, por

defecto es auto.

Propiedades de CSS3

Text Shadows: Esta propiedad añade una sombra paralela al texto, usa la misma sintaxis que box-shadow obviando el valor opcional de inset y el valor de expansión:

text-shadow: desplazamiento-x | desplazamiento-y | desenfoque | color de sombra;

Transitions: La propiedad transition es una animación hecha únicamente con CSS, su sintaxis consiste en seleccionar una propiedad a animar y definir el tiempo de animación:

/* Firefox */ -moz-transition: propiedad a animar | duración de la animación; /* para Safari y Chrome */ -webkit-transition: propiedad a animar | duración de la animación; /* para Opera */ -o-transition: propiedad a animar | duración de la animación; /* Se pueden agrupar transiciones usando comas. */

NOTA: Cabe notar que para que esta propiedad funcione tiene que existir un cambio de estado sobre el elemento, en el siguiente ejemplo voy a definir:hover como activador, cuando el cursor pase por encima del elemento se ejecutara la animación.

Propiedades de CSS3

Propiedades de CSS3 NAVEGADORES

CANVAS es una nueva marca del HTML 5, permite dibujar en dicha área mediante JavaScript.

El objetivo de este elemento es hacer gráficos en el cliente (navegador), juegos, etc.

Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar JavaScript.

Canvas y dibujado

Canvas y dibujado NAVEGADORES

HISTORY

Una de las mejoras que acompaña a HTML 5 nos permitirá trabajar de manera más cómoda con peticiones asíncronas y, yendo más allá, con las ya conocidas Single Page Applications, donde nuestro sitio web nos aporta la gran experiencia de usuario, al no sentir la necesidad de generar peticiones completas para tener la información que el usuario necesita en cada momento.

Tiempo atrás, uno de los quebraderos de cabeza para los desarrolladores era encontrar la estrategia más óptima para poder modificar la URL que se mostraba en el navegador, con el objetivo de poder seguir la pista de dónde nos encontrábamos y cómo volver a ese punto tanto a nivel de página cómo mostrar la información pertinente. Hasta ahora se solía hacer uso de hashbangs (#!), aunque ello desembocara en cierta penalización en el rendimiento (Twitter se deshizo de este mecanismo hace relativamente poco tiempo).

HISTORY• History API en versiones anteriores tenía como único cometido

el poder manipular el histórico de la sesión actual vía script. Con HTML 5, disponemos de una ampliación considerablemente útil de esta API:– history.back(): Genera el mismo resultado que el uso del

botón Atrás (Back) del navegador, permitiendo visualizar la página anteriormente visualizada.

– history.forward(): Nos permite avanzar en el histórico de la ventana, siempre y cuando hayamos retrocedido en el mismo

– history.length: A medida que vamos visitando páginas el histórico irá creciendo. La forma de conocer el número de páginas a las que podemos regresar es a través de esta propiedad dentro de history.

HISTORY

– history.go(): Realmente útil ya que nos permite dirigirnos directamente a cualquiera de las páginas almacenadas en el histórico. La forma de indicar a la que nos queremos dirigir es indicando el número relativo desde la posición en la que nos encontramos. (La página actual tiene el valor 0, por lo que usaremos números negativos para retroceder y positivos para avanzar).

– history.pushState(object,title,url): La parte más innovadora que nos ofrece HTML 5 es la posibilidad de añadir de forma manual entradas al histórico y,al mismo tiempo, actualizar la URL actual (No más hashbangs!).

– history.replaceState(object,title,url): En este caso, a diferencia del anterior, nos permite modificar una entrada, en lugar de añadirla (por lo que el tamaño del histórico no se verá alterado).

HISTORY

– window.onpopstate: Este evento a nivel de window trabaja en conjunción con los métodos anteriores. Este evento se lanzará cada vez que avancemos o retrocedamos en el histórico y con ello se refresque la información actual de history.

– history.state: contiene el objeto inyectado a través de pushState o replaceState. Cada página del histórico tendrá su propio objeto, lo cual nos permitirá almacenar los valores necesarios para que la página a la que volvamos sea totalmente funcional, haciendo peticiones AJAX por ejemplo.

HISTORY

• HTML5 proporciona un mecanismo de caché de aplicación que permite que las aplicaciones basadas en la web se ejecuten sin conexión.

Los desarrolladores pueden usar la interface de Caché de aplicaciones (AppCache) para especificar los recursos que el navegador debería guardar en caché y tener disponibles para los usuarios cuando no estén conectados. Las aplicaciones que están en caché se cargan y funcionan correctamente aunque los usuarios hagan clic en el botón recargar cuando no están conectados.

• Usar el caché de aplicaciones le da a la aplicación los siguientes beneficios:– Navegación sin conexión: los usuarios pueden navegar un sitio aún cuando

no estén conectados.– Velocidad: los recursos en caché son locales, y por lo tanto, se cargan más

rápido.– Carga al servidor reducida: el navegador solamente descarga desde el

servidor recursos que han cambiado…

Offline Application Caching API

Habilitando caché de aplicaciones• Para habilitar el caché de aplicaciones, debe incluir el atributo Manifest en el

elemento <html> en las páginas de sus aplicaciones, como se muestra en el siguiente ejemplo:<html manifest="ejemplo.appcache">

...

</html>• El atributo manifest referencia un archivo manifiesto de cache, que es un

archivo de texto que lista los recursos (archivos) que el navegador deberá guardar en caché para la aplicación.

• Debería incluir el atributo Manifest en cada página de la aplicación que quiera guardar en caché. El navegador no guardará páginas que no contengan el atributo Manifest , a menos que esas páginas estén específicamente listadas en el archivo de manifiesto en sí mismo. No es necesario listar todas las páginas que se quieran guardar en caché en el archivo de manfifesto, el navegador implícitamente agrega cada página que el usuario visite y tenga el atributo manifest establecido para caché de aplicación.


Detección de la activación del modo offline– Es bastante habitual que, en algunos navegadores como Firefox, el

almacenamiento de páginas para su uso offline conlleve que se muestre al usuario una alerta especial:

– De igual forma, es necesario en muchos casos saber si el navegador está en modo online a la hora de lanzar o no una operación de sincronización. Aunque podemos conseguir esto de forma directa intentando abrir una conexión y comprobando si ha sido posible establecerla o no, el navegador nos proporciona una forma bastante más elegante de hacerlo.


• El método definido en la especificación a tal efecto consiste en la incorporación del atributo onLine, el cual se define a nivel del objeto JavaScript Navigator:

<script>

function updateIndicator() {

var indicator = document.getElementById("indicator");

indicator.textContent = navigator.onLine ? "online" : "offline";

}

</script>


• Adicionalmente, si queremos detectar cuando el navegador pasa a modo online u offline, existen dos eventos a tal efecto a nivel del objeto Window:

<script>

document.addEventListener("offline", function(e) {

alert("Offline");

});

document.addEventListener("online", function(e) {

alert("Online")

});

</script>

</head>

<body ononline="alert( 'Online');" onoffline="alert('Offline');">


Cargando documentos

• Es uso de caché de aplicaciones modifica el proceso normal de la carga de un documento:– Si existe caché de aplicaciones, el navegador carga el documento y sus

recursos asociados directamente desde ahí, sin acceder a la red. Esto acelera el tiempo de carga del documento.

– El navegador entonces verifica si hubo actualizaciones al manifiesto de caché en el servidor.

– Si el manifiesto de caché fue actualizado, el navegador descarga la nueva versión del archivo y de los recursos listados en él. Esto se realiza en segundo plano y no afecta el rendimiento de forma significativa.


Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlignt o Java.

El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au)

Un ejemplo de disponer el elemento audio dentro de una página sería:

<audio src="sonido.ogg" autoplay controls loop></audio>

Audio y VídeoAUDIO

Las propiedades que podemos utilizar con la marca audio son: src: La URL donde se almacena el archivo de audio. Si no definimos

la URL la busca en el mismo directorio donde se almacena la página. autoplay: En caso de estar presente el archivo se ejecuta

automáticamente luego de cargarse la página sin requerir la intervención del visitante.

loop: El archivo de audio se ejecuta una y otra vez. controls: Indica que se deben mostrar la interface visual del control

en la página (este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)

autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el cliente antes de comenzar a ejecutarse.

Audio y Vídeo AUDIO

Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento audio nos permite agregarle distintas fuentes:

<audio controls autoplay loop>

<source src="sonido.ogg">

<source src="sonido.mp3">

<source src="sonido.wav">

<source src="sonido.au">



</audio>

El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo.

Audio y VídeoAUDIO

El orden que disponemos estas fuentes es importante.

Primero el navegador busca la primera fuente y verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente.

Como vemos si queremos que cualquier navegador reciba un audio podemos inclusive hacer el aplique de Flash respectivo por si el navegador no implementa el elemento AUDIO o no soporta el formato de archivo.

Por el momento no hay un formato con soporte para todos los navegadores, dependerá del sitio que implementemos para ver si tiene sentido duplicar nuestros archivos con distintos formatos de audio.

Audio y VídeoAUDIO

Audio y VídeoAUDIO - NAVEGADORES

El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los navegadores permiten mostrar una cantidad limitada de formatos de video.

Pasará un tiempo hasta que todos los navegadores comiencen a soportar distintos formatos.

FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora).

Luego para visualizar un video con este formato en FireFox tenemos:

<video width="640" height="360" src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"

controls>

Este navegador no permite tag video

</video>

Audio y Vídeo VIDEO

Las propiedades más importantes de la marca video son: src: Dirección donde se almacena el video. controls: Se visualiza el panel de control del video: botón de inicio, barra de

avance del video etc. autoplay: El video se inicia inmediatamente luego que la página se carga en

el navegador. width: Ancho en píxeles del video. height: Alto en píxeles del video. Como no hay un formato de video universalmente adoptado por todos los

navegadores el elemento video nos permite agregarle distintas fuentes:<video width="640" height="360" controls>

<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv">

<source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4">

</video>

Audio y Vídeo VIDEO

Audio y VídeoVIDEO - NAVEGADORES

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bidireccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet.

El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesados en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Web Sockets

Web SocketsNAVEGADORES

La Geolocalización es una de las características principales de HTML5, la cual empieza a tener un gran empuje en todos los ámbitos de la web, redes sociales y más.

Veremos con solamente un poco de código cómo podremos obtener la ubicación de un usuario con HTML5, que en realidad estaremos usando la API de Geolocalización de la W3C (Consorcio World Wide Web), que es el organismo internacional que dicta lo estándares Web.

Podremos observar que obtener la información de esta manera es aún más rápida.

Geolocalización

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {

var lat = position.coords.latitude;

var lng = position.coords.longitude;

var options = { position: new google.maps.LatLng(lat, lng) }

var marker = new google.maps.Marker(options);

marker.setMap(map);

});

} Con el objeto navigator.geolocation es con el que detectamos si el

navegador tiene las capacidades necesarias para detectar la Geolocalización

Geolocalización

El método navigator.geolocation.getCurrentPosition es el que hace la labor de recuperación de la ubicación del usuario mediante el objeto position que se envía a la función. Una vez que se ha llamado a este método, por medio de una función que permita su ejecución, el navegador nos preguntará si le permitimos usar la información de nuestra ubicación, lo hará de esta manera:

Geolocalización

Las instrucciones position.coords.latitude y position.coords.longitude extraen la información de latitud y longitud correspondiente de la posición obtenida.

Las últimas 3 líneas del código son las que dibujan el mapa y nos colocan el pin en las coordenadas obtenidas.

Si quieres dibujar el mapa con estas instrucciones no olvides agregar el siguiente script dentro de las etiquetas head:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" > </script>

Geolocalización

Geolocalización NAVEGADORES

Web storage

Con el método "key(index)" se obtiene el nombre de la clave para un índice dado. Este método puede resultar un poco extraño de entrada, pero es útil para recorrer todas las claves que actualmente se encuentran almacenadas. Si en el almacén hay N claves, entonces se pueden recuperar sus nombres iterando entre 0 y N-1.

for (var i= 0; i < localStorage.length; ++ i){

hacerAlgoCon( localStorage.key(i) ); }

Finalmente, comentar que si lo que se quiere almacenar son objetos más complejos de JavaScript, siempre se puede utilizar las utilidades de conversión entre objetos JSON y String.

var user = {

name: "Holmes", friend: "Watson"};

...

localStorage.setItem("user", JSON.stringify(user) );

… user = JSON.parse( localStorage.getItem("user") );

Web storage

En la especificación oficial se indica además que cualquier tipo de cambio en el almacén debe disparar un evento de tipo "StorageEvent", de forma que cualquier ventana con acceso al almacén pueda responder al mismo.

window.addEventListener("storage", onStorage, false);

function onStorage(event){

//Evento recibido de tipo StorageEvent

}

El evento tiene los atributos "key", "oldValue", "newValue", "storageArea" y "url", para indicar la clave afectada, el valor anterior, el nuevo valor, el almacén afectado, y la url desde la que se realizó el cambio.

Si la clave es nueva el valor anterior llega como null. Si la clave está siendo borrada el nuevo valor llega como null. Si el almacén entero está siendo borrado la clave y los dos valores llegan a null.

Web storage

Web workers

HTML5 aparte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker

var worker = new Worker("worker.js");

// Envía un mensaje al worker

worker.postMessage(0);

// Recibe los mensajes del Worker

worker.onmessage = function (evt) {

// evt.data es el valor devuelto por el Worker

alert(evt.data);

}

// Trata los errores

worker.onerror = function (evt) {

alert(evt.data);

}

Web workers

Y el worker.js sería el siguiente:

// Ejemplo de Worker

onmessage = function (evt) {

// evt.data es el valor enviado desde el javascript

for (var i=evt.data, il=1000001; i<il; i++) {

// Envía datos continuamente

postMessage(i);

}}

Los Workers también admiten el evento onconnect, aunque tan sólo funciona en Webkit:

onconnect = function(evt) {

postMessage('Hola, acabas de conectarte al Worker');

}

Web workers

Web workers NAVEGADORES

WebGL

WebGL es una tecnología capaz de recrear animaciones 3D en un navegador web sin necesidad de utilizar plugins adicionales, sino haciendo uso de su propio estándar.

Flight of the Navigator es una demostración, realizada por Mozilla y publicada en su sitio web videos.mozilla.org , donde se han hecho uso de las nuevas tecnologías para la web HTML5 y WebGL:

http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/

Después de ver una demo como esta, Microsoft ha tomado la decisión de no incorporar WebGL en Internet Explorer; por supuestos motivos de seguridad, cuando en realidad todo el mundo sospecha que el verdadero motivo es defender sus tecnologías propias DirectX y Silverlight.

WebGLNAVEGADORES

Drag & Drop

http://html5demos.com/drag

Drag & DropNAVEGADORES

• JSON es un acrónimo de JavaScript Object Notation, un formato ligero originalmente concebido para el intercambio de datos en Internet. Se considera un subconjunto de la notación literal para representar objetos, Arrays, cadenas, booleanos y números en Javascript.

• Su popularización llegó sobre 2001 gracias al apoyo incondicional de Douglas Crockford. Yahoo! ayudó en gran manera a su difusión a raíz de la inclusión de este formato en algunos de sus servicios web más innovadores.

• En diciembre de 2006, Google comenzaría a ofrecer sus feeds en JSON para su protocolo web GData.

• Pese a que JSON se basa en la notación Javascript, está considerado como un lenguaje independiente de formato de datos cuya especificación es descrita en RFC4627.

JSON

• NOTA: Para comprobar la validez de un marcado JSON existen un par de herramientas online de gran valor: JSONFormatter y JSONLint. En ambos sitios, podemos pegar nuestro código para que sea validado y reformateado.

JSON - Anatomía

Particularidades de JSON sobre Javascript

• Algunas de las particularidades o reglas del formato JSON a tener en cuenta son:

• Los pares nombre-valor van siempre delimitados por comillas, independientemente de si se tratan de nombres válidos en Javascript que podrían aparecer sin ellas.

• JSON puede representar seis tipos de valores: objetos, Arrays, números, cadenas, booleanos y null.

• Las fechas no son reconocidas como un tipo de objeto propio.• Los números en JSON no pueden ir precedidos de ceros salvo en el

caso de notación decimal ( Ejem: 0.001 ).• En definitiva, como JSON es considerado un lenguaje independiente,

sus objetos deben ser considerados como cadenas Javascript, no como objetos nativos.

JSON

Usando JSON en Javascript

• El verdadero potencial de JSON es su integración con Javascript. Esto permite un fácil intercambio de datos entre aplicaciones mediante peticiones XHR al servidor a la vez que abre posibilidades ilimitadas a nuevos paradigmas de gestión como los emergentes sistemas No-SQL.

• Para permitir que un objeto JSON sea utilizado por Javascript, debemos parsearlo (interpretarlo) mediante el uso del comando eval() tal y como se muestra a continuación:

var myCakes = eval('(' + cakeJSON + ')'); alert(myCakes.name); // donut alert(myCakes.image.width); // 200

JSON

Usando JSON en Javascript• A través de eval(), interpretamos el objeto JSON y lo convertimos

en una entidad (objeto) Javascript; esto permite acceder a sus propiedades directamente como con cualquier otro objeto.Obsérvese que es necesario un doble paréntesis para evitar la ambigüedad con la que Javascript interpreta las llaves con las que comienza el objeto JSON.

NOTA: Para acceder a las propiedades del objeto, utilizamos la notación con punto en lugar de corchetes tal y como recomiendan los expertos:

alert( myCakes[thumbnail][height] ); // Peor

alert( myCakes.thumbnail.height ); // Mejor

JSON

Usando JSON en Javascript

• Las transacciones XHR, por seguridad, están limitadas únicamente al ámbito del dominio que hace la petición, por lo tanto, cuando se recibe una respuesta, podemos estar 100% seguros de que ésta, proviene del propio dominio. Sin embargo, eso no tiene por que librarnos de un error del servidor o de una redirección maliciosa que nuestro eval() a ciegas puede convertir en desastre.

• Siempre es útil recordar ese mantra que inunda foros y artículos y que suele ser lo primero que se graba a fuego en la conciencia de un programador Javascript: eval is evil. Para evitar todos los problemas derivados de una incorrecta interpretación de nuestro código, podemos hacer uso de algunas herramientas de terceros.

JSON

Parseando JSON de forma segura• Existen diversas formas que permiten prescindir de eval() delegando la

tarea en métodos más seguros.• En JQuery, tenemos por ejemplo el método parseJSON que

comprueba la integridad del marcado antes de evaluarlo.Mootols ofrece también su propio método, JSON.encode(), que realiza una tarea similar al anterior ejemplo de jQuery.

• Sin embargo, con la llegada del ECMAScript 5, se ha implementado un nuevo objeto JSON basado en la API programada por el propio Douglas Crockford. Sus métodos más interesantes son parse() y stringify().

JSON

• JSON.parse ofrece un eval() seguro a través de su filtrado mediante expresiones regulares. Si la cadena no es un objeto JSON válido, devuelve un error de sintaxis y el eval no es llamado.

• La sintaxis de este comando es la siguiente:

JSON.parse( string $JSONString [, function $reviver ] );

• El primer parámetro recoge la cadena JSON mientras que el segundo, opcional, acepta una función para el tratamiento de dicha cadena. Esta función recoge dos parámetros (clave y valor) y por cada registro del objeto Javascript que estamos componiendo, se evalúan sus pares según el criterio definido.

JSON – parse( )

• Este método resulta muy práctico para, por ejemplo, convertir las cadenas de fechas en objetos Javascript:

function dateReviver(key, value) { if (typeof value === 'string') { var a = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value); if (a) { return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3])); } } return value;}; var myObj = JSON.parse( myStringJSON, dateReviver);myObj.dateEntry; //Sat Dec 04 2010 16:00:00 GMT-0800 (Pacific Standard Time)

JSON – parse( )

• JSON.stringify hace la operación contraria. Su sintaxis es la siguiente:JSON.stringify( obj $value [, $replacer] [, @space] );

• El primer parámetro $value suele ser un objeto Javascript (o un array) y es a partir del cual, obtenemos la cadena JSON correspondiente.

• El segundo parámetro, $replacer, si es una función, actúa básicamente como el $reviver anterior pero de modo inverso. Sin embargo, si le proporcionamos un array, actúa como una lista blanca de aquellas propiedades del objeto que serán serializadas.

• El tercer parámetro, $space, puede ser un número o una cadena. En el primer caso, representa el número de espacios en blanco con el que será indentado cada nivel de nuestro JSON. Si usamos una cadena, cada uno de los pares aparecerá indentado con el carácter que hayamos definido. Por lo general, usaremos los caracteres de escape Javascript para indicar tabulaciones o saltos de línea (el más común será ‘\t’ para indicar una tabulación horizontal).

JSON – stringify( )

• Como podemos ver, el uso de un $replacer resulta interesante para filtrar aquellos pares clave-valor que no nos interesan en un momento dado.

• Podemos encontrar ambas funciones en la mayoría de navegadores modernos con la excepción de IE7. Asen Bozhilov ha compilado una tabla comparativa con las diferentes formas en que los fabricantes han implementada JSON.parse.

JSON.stringify(myObj, ['id','type','name'], '\t')/*'{ "id" : "0001", "type" : "donut", "name" : "Cake"}'*/

87

JSON – stringify( )

MODERNIZR

Modernizr: librería Javascript para detectar HTML5, CSS3 y más Es una librería que permite detectar las nuevas características de

HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular.

MODERNIZR

Las características que detecta son: @font-face Canvas, Canvas Text HTML5 Audio HTML5 Audio formats HTML5 Video HTML5 Video formats Rgba(), hsla() Border-image, border-radius Box-shadow, opacity Multiple backgrounds CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms

CSS Transitions Geolocation API Input Types Input Attributes localStorage SessionStorage Web Workers applicationCache SVG, SVG Clip paths SMIL Web SQL Database IndexedDB Web Sockets Cross-window Messaging hashchange Event History Management Drag and Drop

JQUERY

• ¿Qué es jQuery? jQuery es considerado un Framework de Javascript, o ambiente de

desarrollo. Lo que no es más que un conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de una manera muy simplificada.

En otras palabras, podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar una funcionalidad completamente.

• ¿Qué puedo hacer con jQuery? jQuery nos permite agregar efectos y funcionalidades complejas a

nuestro sitio web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación.

Javascript & Jquery - JQUERY

• ¿Por qué utilizar jQuery? Muchas veces nos planteamos si es mejor utilizar cosas ya hechas o

desarrollarlas por nuestra propia cuenta. Bueno… este es totalmente relativo dado que cuando programamos, muchos de los lenguajes utilizados no son de bajo nivel, es decir estamos utilizando funciones pre-desarrolladas y simplificadas.

Con jQuery ocurre lo mismo, por ejemplo: el detectar que tipo de explorador utiliza un visitante tendríamos que escribir una cuentas líneas de código en Javascript. Dado que jQuery es totalmente compactible con la mayoría de los exploradores, Internet Explorer, Firefox, Opera, Apple Safari etc. En definitiva, nosotros no necesitamos preocuparnos por los asuntos de compactibilidad, jQuery lo hace automáticamente.

Javascript & Jquery - JQUERY

• ¿Por qué utilizar jQuery? El soporte es otra de las razones por la cual la utilización de jQuery en

nuestros sitios es totalmente recomendada. Esta fantástica librería ha tenido una aceptación muy grande por los programadores, lo que ha generado que muchos desarrolladores se dediquen a la creación de plugins o complementos que utilizan jQuery. Esto nos permite agregar galerías dinámicas, calendarios, sistemas de votación, formularios dinámicos y muchas otras cosas tan solo agregando los plugins.

Otra razón, que es muy importante es que es gratis, y el código fuente puede ser modificada y adaptado a nuestras necesidades siguiendo las políticas de las licencias (MIT y GPL2)

JQUERY

• ¿Cómo comenzar a utilizar jQuery? Para hacer uso de esta fabulosa Librería tienes que bajarla

directamente desde el sitio oficial. Haz clic http://jquery.com/ para bajar jQuery.

Conceptos Básicos:En tu página HTML agrega lo siguiente dentro del tag HEAD.

<script type="text/javascript" src="jquery.js"></script>

Podemos adjuntar la librería en dos modos, el reducido que es ideal para agilizar y acelerar la carga de las páginas o la versión extendida, la cual tiene más tamaño y es ideal para los desarrolladores.

jQuery lo hace más fácil, para demostrarlo vamos a tomar como ejemplo una de las acciones más utilizadas cuando trabajamos con Javascript, que es la de seleccionar un elemento con “getElementById()”

JQUERY

EXTRAIDO DE LA PÁGINA OFICIAL DE JQUERY:

Bases de datos locales

Otra de las grandes novedades de HTML5 es las nuevas alternativas respecto a la forma de guardar información en el cliente por parte de una web. Hasta ahora, la única alternativa que se tenia desde una web era usar cookies. HTML5 introduce tres nuevas formas, “local” y “session” storage y por otro lado la posibilidad de manejar toda una base de datos relacional que reside en cada cliente. A diferencia del localstorage o sessionstorage, que son mas similares a las cookies, el hecho de manejar una base de datos totalmente funcional es una novedad bastante importante que puede ayudar a nuestras webs a guardar información de una forma mucho mas estructurada.

Como hemos dicho, la base de datos es de tipo relacional, por lo que el lenguaje para “hablar” con ella será enteramente SQL.

Aunque expresamente la W3 desaconseja ligar el estándar a una implementación concreta, en la practica, prácticamente la totalidad de navegadores han usado SQL lite para implementar la gestión de la base de datos.

Como sabemos, no el SQL que entiende todas las bases de datos es igual, existen lo que se denominan “dialectos”, debido a que SQL lite es casi la opción “de-facto” podremos usar el “dialecto” del SQL lite en las sentencias. Aunque, al igual que el estándar desaconsejaba ligarse a una implementación, no es buena idea ligar el código a un dialecto, pues puede ser que en algún momento uno de los navegadores decida utilizar otro “backend” de bases de datos, y haga nuestro código incompatible. Lo ideal es usar, en la medida de lo posible, el SQL mas cercano al estándar.

Pese a todo esto, de momento y hasta que no se plantee una implementación independiente, el estándar de HTML5 respecto al “WebSQL” apunta a que el dialecto a seguir es del SQL lite.

Pasando ya a como usar la base de datos desde javascript, el primer paso es obtener una referencia a la base de datos para poder operar con ella. Para ello usaremos la función openDatabase() donde le pasaremos, el nombre de la base de datos, la versión del esquema y el tamaño estimado.


Una vez tenemos la referencia de la base de datos, vamos a ver que, prácticamente la totalidad de los métodos son asíncronos, por lo que típicamente los argumentos serán callbacks. En este caso Javascript sale a nuestra ayuda, como seguramente sabremos, en Javascript podemos encapsular en una variable la declaración de una función, por lo que la forma mas común de pasar los parámetros a las funciones que operan en la base de datos es incluir la declaración de los propios callbacks, ya que habitualmente, no será muy útil reutilizar dichos callbacks.

Las dos funciones más usadas sin duda van a ser “transaction” y “executeSql”, con la primera crearemos una transacción que se ejecutará contra la base de datos de forma atómica (bueno, esa es la definición de transacción, no?), mientras que con la segunda, como su nombre indica ejecutaremos las propias sentencias sql.

A continuación veremos un simple ejemplo en el que creamos una base de datos de usuarios en el cliente, donde guardamos cosas como su nombre de usuario o password.


• Empresa creada en el año 2003 con capital 100% español. 10 años dedicados a la formación de profesionales TIC.

• Facturación sostenida superior al millón de euros/año

• Más de 25.000 alumnos han pasado por nuestras aulas.

• El número de cursos impartidos supera los 3.000, recibiendo una excelente valoración de los alumnos.

• Calendario público abierto y estable

• Gestión de las bonificaciones de la Fundación Tripartita para la formación

• ISO-9001. Certificamos nuestro compromiso con la calidad.

• Redes sociales como nuevo canal de comunicación de CLEFormación.

¡Estamos en las Redes Sociales!

http://www.facebook.com/cleformacion

http://www.linkedin.com/company/cleformaci-n

https://twitter.com/CLEFormacion

¡ Síguenos [email protected]

http://gplus.to/cleformacion

Presentación Seminario Cleformación HTML5, El lenguaje del futuro

Technology

Transcript of Presentación Seminario Cleformación HTML5, El lenguaje del futuro