PROGR AM ACION WEB
INVESTIGACION
A R IS TIDE S C A B A LLE R O A LFA R O J OR G E A LB E R TO J UR A DO ME DIN A TEMAS: DRANG AND DROP GEOLOCALIZACION WEB WORKERS
Contenido CREACION DE CONTENIDO ARRASTRABLE (DRANG AND DROP) ........................................................ 3 Detección de la función ........................................................................................................... 3 Creación de contenido arrastrable............................................................................................. 3
Eventos de arrastre ............................................................................................................................. 4 1. Comienzo de la operación de arrastre.............................................................................. 5 2. dragenter, dragover y dragleave........................................................................................ 6 3. Finalización de la operación de arrastre ........................................................................... 8
El objeto DataTransfer ........................................................................................................................ 9 Propiedades de arrastre ........................................................................................................ 11
Arrastre de archivos ...................................................................................................................... 12 Arrastre de archivos del escritorio al navegador ............................................................... 12 Arrastre de archivos del navegador al escritorio ............................................................... 12 Ejemplos ...................................................................................................................................... 12
GEOLOCALIZACION ............................................................................................................................ 13 METODOS DEL API ......................................................................................................................... 14 MÉTODOS DEL API ..................................................................................................................... 15 WEB WORKERS .................................................................................................................................. 16 UTILIZACION .................................................................................................................................. 17 BIBLIOGRAFIA .................................................................................................................................... 18
1
Contenido de Ilustraciones Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración Ilustración
2
1 ......................................................................................................................................... 3 2 ......................................................................................................................................... 4 3 ......................................................................................................................................... 4 4 ......................................................................................................................................... 5 5 ......................................................................................................................................... 6 6 ......................................................................................................................................... 6 7 ......................................................................................................................................... 7 8 ......................................................................................................................................... 8 9 ......................................................................................................................................... 9 10 ....................................................................................................................................... 9 11 ..................................................................................................................................... 10 12 ..................................................................................................................................... 10 13 ..................................................................................................................................... 11 14 ..................................................................................................................................... 11 15 ..................................................................................................................................... 12 16 ..................................................................................................................................... 13 17 ..................................................................................................................................... 13 18 ..................................................................................................................................... 13 19 ..................................................................................................................................... 14 20 ..................................................................................................................................... 16
CREACION DE CONTENIDO ARRASTRABLE (DRANG AND DROP) La función de arrastrar y soltar(Drag and Drop, DnD) tiene una gran importancia en HTML5. En la especificación se define un mecanismo basado en eventos, el API de JavaScript y elementos de marcado adicionales para indicar que prácticamente cualquier tipo de elemento de una página se pueda arrastrar. Es difícil tener algo en contra de la compatibilidad nativa de un navegador con una determinada función. La compatibilidad nativa del navegador con la función DnD permite ofrecer aplicaciones web más interactivas. Detección de la función La calidad de muchas aplicaciones que utilizan la función DnD se vería bastante afectada sin esa función. En aquellos casos en los que la función DnD no esté disponible, se puede recurrir al plan B de la biblioteca para que la aplicación funcione adecuadamente. Si hay que utilizar un API, se debe emplear siempre la detección de funciones en lugar de rastrear el user-agent del navegador. Una deestablece las mejores de detección de funciones es Modernizr. Modernizr unabibliotecas propiedad booleana para cada una de las funciones que comprueba. Por tanto, la comprobación de la disponibilidad de la función DnD es así de fácil:
Ilustración 1
Creación de contenido arrastrable Hacer que un objeto se pueda arrastrar es muy sencillo. Solo hay que establecer el atributo draggable=true en el elemento que se quiere mover. La función de arrastre se puede habilitar prácticamente en cualquier elemento, incluidos archivos, imágenes, enlaces u otros nodos DOM.
3
Ilustración 2
Con un pequeño toque mágico de CSS3, podemos retocar el marcado para obtener columnas. Si añadimos cursor: move, los usuarios recibirán una señal visual de que un elemento se puede mover:
Ilustración 3
Eventos de arrastre Se deben tener en cuenta distintos eventos para controlar todo el proceso de arrastrar y soltar: 1. dragstart 2. drag
4
3. 4. 5. 6. 7.
dragenter dragleave dragover drop dragend
Para organizar el flujo de DnD, necesitamos un elemento de srcen (en el que se srcina el movimiento de arrastre), la carga de datos (lo que queremos soltar) y un elemento de destino (el área en la que se soltarán los datos). El elemento de srcen puede ser una imagen, una lista, un enlace, un objeto de archivo, un bloque de HTML o cualquier otra cosa. El elemento de destino es la zona de arrastre (o un conjunto de zonas de arrastre) donde se aceptan los datos que el usuario intenta soltar. Ten en cuenta que no todos los elementos pueden ser elementos de destino (por ejemplo, las imágenes). 1. Comienzo de la operación de arrastre
Una vez que hayas definido atributos draggable="true" en tu contenido, incluye controladores de eventos dragstart para poner en marcha la secuencia de DnD de cada columna. Este código hará que la opacidad de la columna pase a un 40% cuando el usuario empiece a arrastrarla:
Ilustración 4
5
Ilustración 5
Como el elemento de destino del evento dragstart es nuestro elemento de srcen, si se establece this.style.opacity en un 40%, el usuario notará que el elemento corresponde al objeto seleccionado que se está moviendo.
2. dragenter, dragover y dragleave
Los controladores de eventos dragenter, dragover y dragleave se pueden utilizar para proporcionar pistas visuales adicionales durante el proceso de arrastre. Por ejemplo, el borde de una columna se puede convertir en una línea discontinua al colocar el cursor sobre la columna durante una operación de arrastre. De esa forma, los usuarios sabrán que las columnas también son elementos de destino en los que se pueden soltar los objetos arrastrados.
Ilustración 6
6
Ilustración 7
Se deben tener en cuenta varios aspectos del código utilizado en este ejemplo:
this/e.target cambia con cada tipo de evento en función del lugar del modelo de eventos de DnD en el que nos encontremos. Cuando se arrastra un elemento como un enlace, hay que impedir el comportamiento predeterminado del navegador, que es abrir la página a la que dirige el enlace. Para ello, se debe llamar a e.preventDefault() en el evento dragover. Otro sistema que puede funcionar es utilizar return false en ese mismo controlador. No todos los navegadores lo necesitan, pero no está de más añadirlo. El controlador dragenter permite utilizar la clase "over" en lugar de dragover. Con dragover, la clase CSS se tendría que utilizar muchas veces mientras se siguiera activando el evento dragover al colocar el ratón sobre una columna.
7
Finalmente, ese procedimiento se traduciría en una gran cantidad de trabajo innecesario para el renderizador del navegador. Siempre es aconsejable reducir este tipo de operaciones al mínimo. 3. Finalización de la operación de arrastre
Para que se procese la operación de soltar, se debe añadir un detector para los eventos drop y dragend. En este controlador, habrá que impedir el comportamiento predeterminado del navegador para este tipo de operaciones, que suele consistir en algún tipo de molesto redireccionamiento. Se puede evitar que el evento active el DOM con e.stopPropagation(). En nuestro ejemplo de las columnas no podríamos hacer gran cosa sin el evento drop, pero antes debemos llevar a cabo una mejora inmediata, que consiste en utilizar dragend para eliminar la clase "over" de cada columna:
Ilustración 8
8
Ilustración 9
Si has seguido detenidamente los pasos del ejemplo que se han descrito hasta ahora, puede que observes que la columna aún no se puede soltar correctamente. Introduce el objeto DataTransfer.
El objeto DataTransfer
La propiedad dataTransfer es el centro de desarrollo de toda la actividad de la función DnD, ya que contiene los datos que se envían en la acción de arrastre. La propiedad dataTransfer se establece en el evento dragstart y se lee/procesa en el evento drop. Al activar e.dataTransfer.setData(format, data), se establece el contenido del objeto en el tipo MIME y se transmite la carga de datos en forma de argumentos. En nuestro ejemplo, la carga de datos se ha establecido en el propio HTML de la columna de srcen:
Ilustración 10
9
dataTransfer también tiene el formato getData necesario para la extracción de los datos de arrastre por tipo MIME. A continuación se indica la modificación necesaria para el procesamiento de la acción de arrastre de columna:
Ilustración 11
Hemos añadido una variable global llamada dragSrcEl para facilitar el cambio de posición de la columna. En handleDragStart(), la propiedad innerHTML de la columna de srcen se almacena en esa variable y, posteriormente, se lee en handleDrop() para cambiar el HTML de las columnas de srcen y destino.
Ilustración 12
10
Propiedades de arrastre dataTransfer expone una serie de propiedades para ofrecer señales visuales al usuario durante el proceso de arrastre. Estas propiedades también se pueden utilizar para controlar la respuesta de cada elemento de destino de la operación de arrastre a un determinado tipo de datos. dataTransfer.effectAllowed Restringe "tipo dedearrastre" que puede el usuario en ely elemento. utiliza en elelmodelo procesamiento de larealizar operación de arrastrar soltar paraSe la inicialización de dropEffect durante los eventos dragenter y dragover. Esta propiedad admite los siguientes valores: none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized. dataTransfer.dropEffect Controla la información que recibe el usuario durante los eventos dragenter y dragover. Cuando el usuario coloca el ratón sobre un elemento de destino, el cursor del navegador indica el tipo de operación que se va a realizar (por ejemplo, una operación de copia, un movimiento, etc.). La propiedad de efecto admite los siguientes valores: none, copy, link y move. e.dataTransfer.setDragImage(img element, x, y) En lugar de utilizar la información predeterminada del navegador (la "imagen fantasma"), puedes establecer un icono de arrastre.
Ilustración 13
Ilustración 14
11
Arrastre de archivos
Las API de DnD permiten arrastrar archivos del escritorio a una aplicación web en la ventana del navegador. Como ampliación de este concepto, Google Chrome permite arrastrar objetos de archivo del navegador al escritorio. Arrastre de archivos del escritorio al navegador Para arrastrar un archivo desde el escritorio, se deben utilizar los eventos de DnD del mismo modo que otros tipos de contenido. La diferencia principal se encuentra en el controlador drop. En lugar de utilizar dataTransfer.getData() para acceder a los archivos, sus datos se encuentran en la propiedad dataTransfer.files:
Ilustración 15
Arrastre de archivos del navegador al escritorio
Puedes consultar una guía completa sobre el proceso de arrastre de archivos del navegador al escritorio en el artículo sobre arrastre de archivos como en Gmail ("Drag out files like Gmail") de CSS Ninja. Ejemplos
Este sería el producto final, con algún retoque adicional y un contador para cada movimiento:
12
Ilustración 16
GEOLOCALIZACION 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.
Obtener la g eolocalizació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. Haremos aquí un ejemplo para ver como funciona la geolocalizacion. Lo primero que haremos será comprobar si el navegador soporta la geolocalización, para ello pondremos el siguiente script:
Ilustración 17
Ahora para que esto funcione debemos poner el código en HTML que llame a la función y devuelva el resultado:
Ilustración 18
13
El resultado lo vemos aquí.
Ilustración 19
De momento hemos comprobado que la geolocalización está disponible. ahora 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. Veamos todo esto ampliando el código anterior para obtener las coordenadas del usuario (en azul el código nuevo)
METODOS DEL API El uso del API de geolocalización es extremadamente sencillo. Soportado por todos los navegadores modernos, nos permite conocer la posición del usuario con mayor o menor precisión, según el método de localización utilizado. En la actualidad, disponemos de trestecnologías para geolocalizar un usuario:
Vía IP: todo dispositivo que se encuentra conectado a la red, tiene asignada una dirección IP (Internet Protocol) pública que actúa, de forma muy simplificada, como un código postal. Evidentemente, esta no es la mejor manera de localización, pero sí nos da una ligera idea de dónde se encuentra. Redes GSM: cualquier dispositivo que se conecte a una red telefonía, es capaz de obtener una posición aproximada basándose en una triangulación con las antenas de telefonía. Es un método sensiblemente más preciso que mediante la dirección IP, pero mucho menos que mediante GPS. GPS: Global Positioning System o Sistema de Posicionamiento Global. Es el método más preciso, pudiendo concretar la posición del usuario con un margen de error de escasos metros. El primer paso es comprobar es la disponibilidad del API de geolocalización de HTML 5 en el explorador del usuario:
14
if(Modernizr.geolocation) { alert('El explorador soporta geolocalización'); } else { alert('El explorador NO soporta geolocalización'); } El API ofrece los siguientes métodos para geolocalizar la posición del usuario:
getCurrentPosition: obtiene la posición actual del usuario, utilizando la mejor tecnología posible. watchPosition: consulta cada cierto tiempo la posición del usuario, ejecutando la función de callback indicada únicamente si la posición ha cambiado desde la última consulta. Ambos métodos se ejecutan de manera asíncrona para obtener la posición del usuario. Si es la primera vez que se solicita la localización al navegador, éste mostrará un mensaje pidiendo permiso al usuario para compartir su localización. Si el usuario no da su permiso, el API llama a la función de error que hayamos definido.
MÉTODOS DEL API El API de geolocalización del objeto navigator contiene tres métodos:
getCurrentPosition
watchPosition
clearWatch Los métodos watchPosition y clearWatch están emparejados, de la misma manera que están setInterval y clearTimeout. watchPosition devuelve un identificador único,loque permite cancelar posteriormente las consultas de posición pasando es identificador como parámetro a clearWatch. Tanto getCurrentPosition como watchPosition, son métodos muy parecidos, y toman los mismos parámetros: una función de éxito, una función de error y opciones de geolocalización. Un simple ejemplo de uso del API geolocalización es el siguiente: navigator.geolocation.getCurrentPosition(function (position) { alert('We found you!');
15
// now do something with the position data });
WEB WORKERS Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador. Sin embargo,los workers trabajan dentro de un contexto global diferente de la ventana actual (usar el atajo window en lugar de self con el fin de obtener el scope actual dentro de unWorker retornaría, de hecho, un error). Creando un web worker
Crear un nuevo worker es simple. Sólo tienes que llamar el constructor W orker(), thread), especificando la URI de un script a ejecutar en el hilo del workerworker ( y, si deseas poder recibir notificaciones del worker, establece la propiedad Worker.onmessage del worker a una función de manejo de eventos apropiada.
Ilustración 20
16
UTILIZACION Los navegadores ejecutan las aplicaciones en un únicothread, 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. LosWeb workers se introdujeron con la idea de simplificar la ejecución dethreads 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 althread principal del navegador. Los Web workers utilizan un protocolo de paso de mensajes similar a los utilizados en programación paralela. 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: var worker = new Worker('task.js'); Si el archivo especificado existe, el navegador generará un nuevo subproceso de Worker que descargará el archivo JavaScript de forma asíncrona. ElWorker no comenzará a ejecutarse hasta que el archivo se haya descargado completamente. Si la ruta al nuevo Workerdevuelve un error 404, el Worker fallará automáticamente. Antes de comenzar a utilizar los Worker , es necesario conocer el protocolo de paso de mensajes, que también es utilizado en otras APIs como WebSocket y Server-Sent Event.
17
BIBLIOGRAFIA
https://www.html5rocks.com/es/tutorials/dnd/basics https://www.w3schools.com/html/html5_draganddrop.asp https://www.html5rocks.com/es/tutorials/dnd/basics/ http://www.arumeinformatica.es/blog/html5-api-de-geolocalizacion-geolocation-api/ https://www.arkaitzgarro.com/html5/capitulo-11.html
18
