Uso avanzado HTML 5

1
Programación HTML 5 y su API
HTML 5 avanzado
• HTML 5 nos proporciona una serie de APIS que nos permite llevar a cabo
tecnicas mas avanzadas no centrandonos solo en el diseño de paginas web.

• Algunas de ellas son:

• API Geolocalizazión
• API Almacenamiento
• API Sockets
• API WebWorkers
• API Eventos

2
Canvas y SVG
Canvas
• Un lienzo permite dibujar en el documento HTML y actualizar dinámicamente
estos dibujos, por medio de JavaScript. También puede disparar acciones a
partir de los eventos generados por el usuario

3
Canvas y SVG
Canvas

Para utilizar el canvas se debe referenciar primero el elemento canvas y adquirir su contexto.

Una vez adquirido, se puede empezar a dibujar en la superficie del canvas usando la API.

4
Canvas y SVG
Canvas

beginPath
Le dice al contexto del canvas que se va a empezar a dibujarse un camino, no tiene ningún
parámetro.
Una vez invocada la función se puede empezar a dibujar el camino añadiendo segmentos para
completarlo con las diferentes funciones.

moveTo
Sirve para definir el punto donde se comienza a dibujar el segmento.
No dibuja nada, recibe como parámetro los puntos x e y donde ha de moverse el puntero para
dibujo.

5
Canvas y SVG
Canvas

lineTo
Dibuja una línea recta desde la posición actual hasta el punto (x,y) que se indique como
parámetro. La posición actual del camino se establece indicado previamente con un moveTo(),
o donde se haya terminado el trazo anteriormente dibujado.

fill
Este método del contexto del canvas sirve para rellenar de color el área circunscrita por un
camino. Para rellenar de color un path, el path tiene que estar cerrado, por lo que, si no lo está,
automáticamente se cerrará con una línea recta hasta el primer punto del camino, es decir,
donde se comenzó a dibujar.

6
Canvas y SVG
Canvas

closePath
Sirve para cerrar un path, volviendo a su punto inicial de dibujo, no recibe ningún parámetro.

fillText
Permite dibujar texto en el canvas:

stroke
Es similar al método fill pero traza solo la silueta y no la rellena.

7
Canvas y SVG
Canvas

8
Canvas y SVG
SVG

SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su
uso online por su flexibilidad y por la capacidad de ofrecer gráficos con calidad.

la sintaxis de esta etiqueta:

9
XMLHttpRequest Nivel 2
Definición
• En febrero del 2008 la W3C publicó el primer borrador de la nueva versión
de este objeto, "XMLHttpRequest Level 2".
• Entre las mejoras que presenta se encuentran
• la gestión del progreso de eventos,
• peticiones entre distintos servidores
• el manejo de flujos de bytes.

• Nos centraremos en esta última característica ya que es la que nos permitirá

subir archivos al servidor.

10
XMLHttpRequest Nivel 2
Realizando la petición

11
Proceso de eventos
Drag & Drop
Es una característica, que permite poder arrastrar elementos de un lado a otro
en la interfaz.

En HTML5 aparecen:
• Nuevos eventos
dragstart, drag, dragenter, dragover,
dragleave, drop, dragend.

• Atributo draggable="true“ para declarar que un elemento se puede arrastrar.

• Posibilidad de establecer la imagen "ghost" mostrada mientras se desplaza.

• Efectos asociados a copiar, mover…

12
Proceso de eventos
Drag & Drop (Eventos)

• dragstart: Comienza el arrastrado. El "target" del evento será el elemento

que está siendo arrastrado.

• drag: El elemento se ha desplazado. El "target" del evento será el elemento

desplazado.

• dragenter: Se activa al entrar un elemento que se está arrastrando, dentro

de un contenedor. El "target" del evento será el elemento contenedor.

• dragleave: El elemento arrastrado ha salido del contenedor. El "target" del evento será el
elemento contenedor.

13
Proceso de eventos
Drag & Drop (Eventos)

•dragover: El elemento ha sido movido dentro del contenedor. El "target" será el contenedor.
Como el comportamiento por defecto es cancelar "drops", la función debe devolver false o
llamar a preventDefault para indicar que se puede soltar dentro de ese contenedor.

• drop: El elemento arrastrado ha sido soltado en un contenedor. El "target" del elemento será
el contenedor.

• dragend: Se ha dejado de arrastrar el elemento, se haya dejado en un contenedor o no. El

"target" del evento es el elemento arrastrado.

14
Proceso de eventos
Drag & Drop

Para utilizar Drag & Drop:

• Definir un objeto como "arrastrable", estableciendo su propiedad draggable="true“(por defecto

"true" en imágenes).

• Definir el comportamiento adecuado cuando se detecta un evento relacionado con Drag &
Drop:

15
Proceso de eventos
Drag & Drop

16
Proceso de eventos
Drag & Drop

El elemento a mover, tiene su propiedad draggable a 'true'.

El contenedor puede recibir información de los elementos arrastrados desde otros navegadores
u otras aplicaciones.

Si utilizamos setData y getData del objeto dateTransfer expuesto en el objeto del evento (Event
Object).

17
Proceso de eventos
Drag & Drop

Tipos para almacenar la Información:

• Texto: Utilizamos text/plain.

event.dataTransfer.setData("text/plain", "Este es el texto a arrastrar");

• Link: Utilizamos text/plain o text/uri-list.

event.dataTransfer.setData("text/plain", "http://www.online.imaginaformacion.com");
event.dataTransfer.setData("text/uri-list", "http://www.online.imaginaformacion.com");

• HTML/XML: Utilizamos text/plain, text/xml o text/html.

event.dataTransfer.setData("text/html", "Hola <strong>alumnos</strong>");
event.dataTransfer.setData("text/plain", "Hola alumnos");

18
Proceso de eventos
Drag & Drop

Arrastrando archivos

• Un archivo local es arrastrado con el tipo application/x-moz-file.

• Las páginas web sin ciertos privilegios, no son capaces de recuperar o modificar datos de
este tipo.

• Debido a que un archivo no es una cadena, debe utilizar el

método mozSetDataAt (en firefox) para asignar los datos.

• Del mismo modo,cuando se recuperan los datos, debe utilizar el

método mozGetDataAt (en firefox).

19
Proceso de eventos
Drag & Drop

Imágenes:

La mayoría de los navegadores no soportan actualmente arrastrar imágenes.

Por lo general lo que se arrastra es la url de la propia imagen.

Se Utiliza text/plain o text/uri-list. event.dataTransfer.setData("text/plain", imagenURL);

event.dataTransfer.setData("text/uri-list", imagenURL);

En chrome podemos utilizar: event.dataTransfer.setData("image/png", stream, 0);

Para saber más acerca de la url de Datos, https://developer.mozilla.org/en/dataURIs

20
Sockets Web
Definicion
• Los WebSockets nos ofrecen una conexión bidireccional entre el servidor y
el navegador. Esta conexión se produce en tiempo real y se mantiene
permanentemente abierta hasta que se cierre de manera explícita. Esto
significa que cuando el servidor quiere enviar datos al servidor, el mensaje
se traslada inmediatamente.

21
Sockets Web
Abrir una conexión

Para abrir una conexión WebSocket, sólo tenemos que ejecutar el constructor WebSocket, que
toma como parámetro la URL del socket a abrir. Hay que tener en cuenta que el protocolo a
utilizar es ws://:

22
Web Workers
Ejecución en segundo plano

• Los navegadores ejecutan las aplicaciones en un único thread, lo que

significa que si JavaScript está ejecutando una tarea muy complicada, que
se traduce en tiempo de procesado, el rendimiento del navegador se ve
afectado.

• Los Web workers se introdujeron con la idea de simplificar la ejecución

de threads en el navegador.

• Un worker permite crear un entorno en el que un bloque de código

JavaScript puede ejecutarse de manera paralela sin afectar
al thread principal del navegador.

• Los Web workers utilizan un protocolo de paso de mensajes similar a los

utilizados en programación paralela.
23
Web Workers
Ejecución en segundo plano

Estos Web workers se ejecutan en un subproceso aislado. Como resultado, es necesario que el
código que ejecutan se encuentre en un archivo independiente.

Sin embargo, antes de hacer esto, lo primero que se tiene que hacer es crear un nuevo
objeto Worker en la página principal:

24
Web Workers
Ejecución en segundo plano

La comunicación entre un Worker y su página principal se realiza mediante un modelo de

evento y el método postMessage().

En función del navegador o de la versión, postMessage() puede aceptar una cadena o un

objeto JSON como argumento único.

Las últimas versiones de los navegadores modernos son compatibles con la transferencia de
objetos JSON.

De todas maneras, siempre podemos utilizar los métodos JSON.stringify y JSON.parse para la
transferencia de objetos entre el thread principal y los Worker.

25
Web Workers
Ejecución en segundo plano

A continuación, se muestra un ejemplo sobre cómo utilizar una cadena para transferir "Hello
World" a un Worker en doWork.js. El Worker simplemente devuelve el mensaje que se le
transfiere.
Secuencia de comandos principal:

Cuando se ejecuta postMessage() desde la página principal, el Worker es capaz de obtener

este mensaje escuchando al evento message.

Se puede acceder a los datos del mensaje (en este caso "Hello World") a través de la
propiedad data del evento.

26
Geolocalización
Definición
En HTML5 podemos obtener la posición geográfca del usuario. Sin embargo
dado que ésto puede comprometer la privacidad del usuario, éste debe de dar
siempre su permiso para poder obtenerla.

La mayoría de los navegadores modernos soportan la geolocalización, si bien

es posible que pueda haber algún fallo de disponibilidad en encontrar el
sistema de localización.

La geolocalización da una situación mucho más exacta si el usuario se conecta

con algún dispositivo con GPS, el cual será usado por el navegador para la
localización. Caso de no haber dispositivo GPS la localización viene dada por
la red de telefonía o por la configuración del ordenador.

27
Geolocalización
Obtener la geolocalización
• Para obtener la geolocalización, se crea un nuevo objeto javascript que
depende del navegador, el objeto navigator.geolocation. Este objeto tiene a
su vez una serie de métodos que nos permitirán manejar la localización.

28
Geolocalización
Obtener la geolocalización
• Ahora para que esto funcione debemos poner el código en HTML que llame
a la función y devuelva el resultado:

29
Geolocalización
Obtener las coordenadas
Nos falta encontrar las coordenadas del usuario. Para ello se utiliza el
método getCurrentPosition(showPosition), el cual lo aplicamos sobre el
elemento geolocation.

Como argumento se le pasa una funcion showPosition que tenemos que crear
después.

En esta función ponemos un argumento showPosition(position), que es con el

que obtenemos las coordenadas mediante las propiedades: coords.latitude
y coords.longitude.

30
Geolocalización
Obtener las coordenadas

31
Geolocalización
Control de errores
Si por algún motivo no se pueden obtener las coordenadas, podemos indicar el
motivo mediante un control de errores.

Para ello en el método getCurrentPosition añadimos un segundo argumento:

navigator.geolocation.getCurrentPosition(showPosition,showError)

Con este segundo argumento crearemos una función showError(error). el

argumento de esta función nos dirá cual es el error que se ha producido.

32
Geolocalización
Control de errores

33
Geolocalización
Control de errores
En la función showError mediante el argumentoerror obtenemos el posible error
que pueda producirse.

Para localizarlo utilizamos una estructura switch en la que pasamos como

variable error.code. los tipos de error que podemos obtener, y que indicamos
como posibles opciones son:

• PERMISION_DENIED : El usuario ha denegado el permiso para acceder a

la geolocalización.
• POSITION_UNAVAILABLE : No se ha podido obtener la posición geográfica
del usuario.
• TIMEOUT : El tiempo de espera para obtener los datos ha expirado.
• UNKNOWN_ERROR : Hay un error desconocido.

34
Geolocalización
Localización en el mapa
Para ver la localización en un mapa necesitamos tener acceso a un servicio de
mapas que utilicen la latitud y la longitud. Lo más cómodo es utilizar el servicio
de Google Maps, de acceso abierto y gratuito.

35
Geolocalización
Localización en el mapa
Una vez hallada la longitud y la latidud buscamos el mapa en Google Maps y lo
ponemos en nuestra página.

El código que mandamos a Google Maps es siempre el mismo.

En la variable latlon le mandamos la longitud y la latitud, separados por una

coma. Sin embargo podemos variar algunos datos.

Podemos ampliar o reducir el mapa mediante el dato &zoom, a mayor número

el contenido del mapa se reduce.

También podemos indicar el tamaño del mapa que queremos obtener (en
pixeles) en el dato &size

36
Geolocalización
Localización en el mapa

37
Geolocalización
Obtener más información.
Mediante el argumento position de la función showPosition hemos obtenido la latidud y la
longitud. Sin embargo pueden obtenerse también otros datos, siempre que éstos estén
disponibles.
En la función show position(position), podemos obtener también los siguientes datos:
• position.ooords.accuracy: Precisión en la localización del mapa.
• position.coords.altitude: Altitud sobre el nivel del mar.
• position.coords.altitudeAccuracy: Precisión en el dato de altitud sobre el nivel del mar.
• position.coords.heading: Dirección en la que nos movemos. Expresada en grados
respecto al norte.
• position.coords.speed: Velocidad a la que nos movemos.
• position.timestamp: Fecha y hora de la consulta (expresada en tiempo Unix).

Algunos de estos datos (como la dirección y la velocidad) sólo están disponibles en

dispositivos con GPS.

38
Almacenamiento
Web Storage

HTML5 introduce dos mecanismos para almacenar información estructurada en

el lado del cliente.

• sessionStorage
permite guardar información en el lado del cliente.
es un comportamiento similar a las variables de sesión.

• localStorage
permite guardar información sobre un sitio web.
esta información puede ser compartida entre ventanas y/o pestañas distintas.
La información permanece aunque se termine la sesión.

39
Almacenamiento
Web Storage

A pesar de tener un comportamiento similar a las cookies, tiene varias ventajas adicionales:

• las cookies están limitadas a 4 KB de espacio, mientras que con SessionStorage se pueden
guardar varios MB (depende de cada navegador).

• las cookies se envían en cada petición al servidor, lo cual aumenta la sobrecarga, mientras
que la información guardada con SessionStorage no se envía automáticamente (aunque se
puede configurar si es necesario).

40
Almacenamiento
Web Storage

Los sitios pueden agregar datos al objeto sessionStorage, y se podrá acceder desde cualquier
pestaña del mismo sitio abierto en esa ventana.

41
Almacenamiento
Web Storage

42
Almacenamiento
Web Storage

El mecanismo LocalStorage de almacenamiento está diseñado para que el almacenamiento

sea accesible desde ventanas distintas (que tengan abierto el mismo sitio web), y se prolongue
más allá de la sesión actual.

• Las aplicaciones web pueden almacenar megabytes de datos.

• Las cookies no son aconsejables en este caso, ya que se transmiten con cada solicitud.

• El funcionamiento es el mismo que con sessionStorage, pero usando el objeto localStorage

en su lugar.

43
Almacenamiento
Web Storage

44