PROGRAMACION WEB

INVESTIGACION

ARISTIDES CABALLERO ALFARO

JORGE ALBERTO JURADO MEDINA

TEMAS:

DRANG AND DROP

GEOLOCALIZACION

WEB WORKERS
Contenido
CREACION DE CONTENIDO ARRASTRABLE (DRANG AND DROP) ........................................................ 3
Deteccin de la funcin ........................................................................................................... 3
Creacin de contenido arrastrable............................................................................................. 3
Eventos de arrastre ............................................................................................................................. 4
1. Comienzo de la operacin de arrastre.............................................................................. 5
2. dragenter, dragover y dragleave ........................................................................................ 6
3. Finalizacin de la operacin 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
MTODOS DEL API..................................................................................................................... 15
WEB WORKERS .................................................................................................................................. 16
UTILIZACION .................................................................................................................................. 17
BIBLIOGRAFIA .................................................................................................................................... 18

1
Contenido de Ilustraciones

Ilustracin 1 ......................................................................................................................................... 3
Ilustracin 2 ......................................................................................................................................... 4
Ilustracin 3 ......................................................................................................................................... 4
Ilustracin 4 ......................................................................................................................................... 5
Ilustracin 5 ......................................................................................................................................... 6
Ilustracin 6 ......................................................................................................................................... 6
Ilustracin 7 ......................................................................................................................................... 7
Ilustracin 8 ......................................................................................................................................... 8
Ilustracin 9 ......................................................................................................................................... 9
Ilustracin 10 ....................................................................................................................................... 9
Ilustracin 11 ..................................................................................................................................... 10
Ilustracin 12 ..................................................................................................................................... 10
Ilustracin 13 ..................................................................................................................................... 11
Ilustracin 14 ..................................................................................................................................... 11
Ilustracin 15 ..................................................................................................................................... 12
Ilustracin 16 ..................................................................................................................................... 13
Ilustracin 17 ..................................................................................................................................... 13
Ilustracin 18 ..................................................................................................................................... 13
Ilustracin 19 ..................................................................................................................................... 14
Ilustracin 20 ..................................................................................................................................... 16

2
CREACION DE CONTENIDO ARRASTRABLE (DRANG AND DROP)

La funcin de arrastrar y soltar (Drag and Drop, DnD) tiene una gran importancia
en HTML5. En la especificacin se define un mecanismo basado en eventos, el
API de JavaScript y elementos de marcado adicionales para indicar que
prcticamente cualquier tipo de elemento de una pgina se pueda arrastrar. Es
difcil tener algo en contra de la compatibilidad nativa de un navegador con una
determinada funcin. La compatibilidad nativa del navegador con la funcin DnD
permite ofrecer aplicaciones web ms interactivas.

Deteccin de la funcin
La calidad de muchas aplicaciones que utilizan la funcin DnD se vera bastante
afectada sin esa funcin.
En aquellos casos en los que la funcin DnD no est disponible, se puede recurrir
al plan B de la biblioteca para que la aplicacin funcione adecuadamente.
Si hay que utilizar un API, se debe emplear siempre la deteccin de funciones en
lugar de rastrear el user-agent del navegador. Una de las mejores bibliotecas de
deteccin de funciones es Modernizr. Modernizr establece una propiedad
booleana para cada una de las funciones que comprueba. Por tanto, la
comprobacin de la disponibilidad de la funcin DnD es as de fcil:

Ilustracin 1

Creacin 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 funcin de
arrastre se puede habilitar prcticamente en cualquier elemento, incluidos
archivos, imgenes, enlaces u otros nodos DOM.

3
 Ilustracin 2

Con un pequeo toque mgico de CSS3, podemos retocar el marcado para

obtener columnas. Si aadimos cursor: move, los usuarios recibirn una seal
visual de que un elemento se puede mover:

Ilustracin 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. dragenter
4. dragleave
5. dragover
6. drop
7. dragend

Para organizar el flujo de DnD, necesitamos un elemento de origen (en el que se

origina el movimiento de arrastre), la carga de datos (lo que queremos soltar) y un
elemento de destino (el rea en la que se soltarn los datos). El elemento de
origen 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 imgenes).

1. Comienzo de la operacin 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 cdigo har que la opacidad de la columna pase a un 40% cuando el usuario
empiece a arrastrarla:

Ilustracin 4

5
 Ilustracin 5

Como el elemento de destino del evento dragstart es nuestro elemento de origen,

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 lnea discontinua al
colocar el cursor sobre la columna durante una operacin de arrastre. De esa
forma, los usuarios sabrn que las columnas tambin son elementos de destino en
los que se pueden soltar los objetos arrastrados.

Ilustracin 6

6
 Ilustracin 7

Se deben tener en cuenta varios aspectos del cdigo utilizado en este ejemplo:

this/e.target cambia con cada tipo de evento en funcin 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 pgina 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 ms
aadirlo.
El controlador dragenter permite utilizar la clase "over" en lugar de dragover.
Con dragover, la clase CSS se tendra que utilizar muchas veces mientras se
siguiera activando el evento dragover al colocar el ratn sobre una columna.

7
Finalmente, ese procedimiento se traducira en una gran cantidad de trabajo
innecesario para el renderizador del navegador. Siempre es aconsejable reducir
este tipo de operaciones al mnimo.

3. Finalizacin de la operacin de arrastre

Para que se procese la operacin de soltar, se debe aadir 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 algn tipo de molesto redireccionamiento. Se puede evitar que el
evento active el DOM con e.stopPropagation().
En nuestro ejemplo de las columnas no podramos 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:

Ilustracin 8

8
 Ilustracin 9

Si has seguido detenidamente los pasos del ejemplo que se han descrito hasta
ahora, puede que observes que la columna an 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

funcin DnD, ya que contiene los datos que se envan en la accin 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 origen:

Ilustracin 10

9
dataTransfer tambin tiene el formato getData necesario para la extraccin de los
datos de arrastre por tipo MIME. A continuacin se indica la modificacin
necesaria para el procesamiento de la accin de arrastre de columna:

Ilustracin 11

Hemos aadido una variable global llamada dragSrcEl para facilitar el cambio de
posicin de la columna. En handleDragStart(), la propiedad innerHTML de la
columna de origen se almacena en esa variable y, posteriormente, se lee
en handleDrop() para cambiar el HTML de las columnas de origen y destino.

Ilustracin 12

10
Propiedades de arrastre
dataTransfer expone una serie de propiedades para ofrecer seales visuales al
usuario durante el proceso de arrastre. Estas propiedades tambin se pueden
utilizar para controlar la respuesta de cada elemento de destino de la operacin de
arrastre a un determinado tipo de datos.
dataTransfer.effectAllowed
Restringe el "tipo de arrastre" que puede realizar el usuario en el elemento. Se
utiliza en el modelo de procesamiento de la operacin de arrastrar y soltar para la
inicializacin 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 informacin que recibe el usuario durante los
eventos dragenter y dragover. Cuando el usuario coloca el ratn sobre un
elemento de destino, el cursor del navegador indica el tipo de operacin que se va
a realizar (por ejemplo, una operacin 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 informacin predeterminada del navegador (la "imagen
fantasma"), puedes establecer un icono de arrastre.

Ilustracin 13

Ilustracin 14

11
Arrastre de archivos

Las API de DnD permiten arrastrar archivos del escritorio a una aplicacin web en
la ventana del navegador. Como ampliacin 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:

Ilustracin 15

Arrastre de archivos del navegador al escritorio

Puedes consultar una gua completa sobre el proceso de arrastre de archivos del
navegador al escritorio en el artculo sobre arrastre de archivos como en
Gmail ("Drag out files like Gmail") de CSS Ninja.

Ejemplos

Este sera el producto final, con algn retoque adicional y un contador para cada
movimiento:

12
 Ilustracin 16

GEOLOCALIZACION

La geolocalizacin da una situacin mucho ms exacta si el usuario se conecta

con algn dispositivo con GPS, el cual ser usado por el navegador para la
localizacin. Caso de no haber dispositivo GPS la localizacin viene dada por la
red de telefona o por la configuracin del ordenador.

Obtener la geolocalizacin.
Para obtener la geolocalizacin, se crea un nuevo objeto javascript que depende
del navegador, el objeto navigator.geolocation. Este objeto tiene a su vez una
serie de mtodos que nos permitirn manejar la localizacin.
Haremos aqu un ejemplo para ver como funciona la geolocalizacion. Lo primero
que haremos ser comprobar si el navegador soporta la geolocalizacin, para ello
pondremos el siguiente script:

Ilustracin 17

Ahora para que esto funcione debemos poner el cdigo en HTML que llame a la
funcin y devuelva el resultado:

Ilustracin 18

13
 El resultado lo vemos aqu.

Ilustracin 19

De momento hemos comprobado que la geolocalizacin est disponible. ahora

nos falta encontrar las coordenadas del usuario. Para ello se utiliza el
mtodo getCurrentPosition(showPosition), el cual lo aplicamos sobre el
elemento geolocation.

Como argumento se le pasa una funcion showPosition que tenemos que crear
despus.

En esta funcin 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 cdigo anterior para obtener las coordenadas del
usuario (en azul el cdigo nuevo)

METODOS DEL API

El uso del API de geolocalizacin es extremadamente sencillo. Soportado por
todos los navegadores modernos, nos permite conocer la posicin del usuario con
mayor o menor precisin, segn el mtodo de localizacin utilizado. En la
actualidad, disponemos de tres tecnologas para geolocalizar un usuario:

Va IP: todo dispositivo que se encuentra conectado a la red, tiene asignada una
direccin IP (Internet Protocol) pblica que acta, de forma muy simplificada,
como un cdigo postal. Evidentemente, esta no es la mejor manera de
localizacin, pero s nos da una ligera idea de dnde se encuentra.
Redes GSM: cualquier dispositivo que se conecte a una red telefona, es capaz
de obtener una posicin aproximada basndose en una triangulacin con las
antenas de telefona. Es un mtodo sensiblemente ms preciso que mediante la
direccin IP, pero mucho menos que mediante GPS.
GPS: Global Positioning System o Sistema de Posicionamiento Global. Es el
mtodo ms preciso, pudiendo concretar la posicin del usuario con un margen
de error de escasos metros.

El primer paso es comprobar es la disponibilidad del API de geolocalizacin de

HTML 5 en el explorador del usuario:

14
 if(Modernizr.geolocation) {

alert('El explorador soporta geolocalizacin');

} else {

alert('El explorador NO soporta geolocalizacin');

El API ofrece los siguientes mtodos para geolocalizar la posicin del usuario:

getCurrentPosition: obtiene la posicin actual del usuario, utilizando la mejor

tecnologa posible.
watchPosition: consulta cada cierto tiempo la posicin del usuario, ejecutando la
funcin de callback indicada nicamente si la posicin ha cambiado desde la
ltima consulta.

Ambos mtodos se ejecutan de manera asncrona para obtener la posicin del

usuario. Si es la primera vez que se solicita la localizacin al navegador, ste
mostrar un mensaje pidiendo permiso al usuario para compartir su localizacin.
Si el usuario no da su permiso, el API llama a la funcin de error que hayamos
definido.

MTODOS DEL API

El API de geolocalizacin del objeto navigator contiene tres mtodos:

getCurrentPosition
watchPosition
clearWatch

Los mtodos watchPosition y clearWatch estn emparejados, de la misma manera

que lo estn setInterval y clearTimeout. watchPosition devuelve un identificador
nico, que permite cancelar posteriormente las consultas de posicin pasando es
identificador como parmetro a clearWatch.

Tanto getCurrentPosition como watchPosition, son mtodos muy parecidos, y

toman los mismos parmetros: una funcin de xito, una funcin de error y
opciones de geolocalizacin. Un simple ejemplo de uso del API geolocalizacin 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 un Worker retornara,
de hecho, un error).

Creando un web worker

Crear un nuevo worker es simple. Slo tienes que llamar el constructor Worker(),
especificando la URI de un script a ejecutar en el hilo del worker (worker thread),
y, si deseas poder recibir notificaciones del worker, establece la
propiedad Worker.onmessage del worker a una funcin de manejo de eventos
apropiada.

Ilustracin 20

16
UTILIZACION
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 ejecucin de threads en el
navegador. Un worker permite crear un entorno en el que un bloque de cdigo
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 programacin paralela.

Estos Web workers se ejecutan en un subproceso aislado. Como resultado, es

necesario que el cdigo 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 pgina 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 asncrona. El Worker no
comenzar a ejecutarse hasta que el archivo se haya descargado completamente.
Si la ruta al nuevo Worker devuelve un error 404, el Worker fallar
automticamente.

Antes de comenzar a utilizar los Worker, es necesario conocer el protocolo de

paso de mensajes, que tambin 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