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 2013
Fernando 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án
actualmente 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

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 HTML5
DOCTYPE

<!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 HTML5
DOCTYPE

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 HTML5
META

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 HTML5
NUEVAS 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

 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

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.

• 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.
Offline Application
Caching API

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.
Offline Application
Caching API

• 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>
Offline Application
Caching API

• 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');">
Offline Application
Caching API

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.
Offline Application
Caching API

Offline Application
Caching API

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ídeo
AUDIO

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ídeo
AUDIO

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ídeo
AUDIO

Audio y Vídeo
AUDIO - 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/overv
iew/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/overv
iew.ogv">
<source
src="http://videos.mozilla.org/firefox/3.5/overview/overv
iew.mp4">
</video>
Audio y Vídeo
VIDEO

Audio y Vídeo
VIDEO - 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

 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(fu
nction(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

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

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.

Drag & Drop
http://html5demos.com/drag

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

• 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

• 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 !
cursos@cleformacion.com
http://gplus.to/cleformacion

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

Más contenido relacionado

La actualidad más candente (19)

Similar a Presentación Seminario Cleformación HTML5, El lenguaje del futuro (20)

Más de CLEFormación (20)

Último (20)

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