UNIVERSIDAD CIUDADANA DE NUEVO LEÓN

LICENCIATURA EN ADMINISTRACIÓN CON ACENTUACIÓN EN

MERCADOTECNIA

ASIGNATURA: TALLER DE PAGINAS WEB

TUTOR: MAURO SÁNCHEZ PIÑA

ALUMNA: PAOLA STELLA ZEA REY

MATRÍCULA:27081
 
 
 

01 DE JULIO DEL 2020, SAN NICOLÁS DE LOS GARZA, NUEVO LEÓN

 INTRODUCCIÓN
El uso de otras técnicas de programación hace más fácil
de lo que era antes la operación con archivos, bajada de
archivos desde el servidor a nuestro computador, o subida
de archivos desde nuestro computador al servidor. Aunque
no vayamos a profundizar en esto, nos ha parecido
interesante citarlo para que lo tengas presente por si te
surje la necesidad de realizar operaciones con archivos en
aplicaciones web usando drag and drop.
 CAPÍTULO 8

API DRAG AND DROP

 8.1 Arrastrar y soltar en la web
Arrastrar un elemento desde un lugar y luego soltarlo en otro es algo
que hacemos todo el tiempo en aplicaciones de escritorio, pero ni
siquiera imaginamos hacerlo en la web. Esto no es debido a que las
aplicaciones web son diferentes sino porque desarrolladores nunca
contaron con una tecnología estándar disponible para ofrecer esta
herramienta.
 Nuevos eventos
cuando el usuario realiza una operación de arrastrar y soltar, el elemento origen (el
que es arrastrado) dispara estos tres eventos:
dragstart Este evento es disparado en el momento en el que el arrastre comienza. Los
datos asociados con el elemento origen son definidos en este momento en el sistema.
drag Este evento es similar al evento mousemove, excepto que será disparado durante
una operación de arrastre por el elemento origen.
dragend Cuando la operación de arrastrar y soltar finaliza (sea la operación exitosa o
no) este evento es disparado por el elemento origen. Y estos son los eventos
disparados por el elemento destino (donde el origen será soltado) durante la
operación:
dragenter Cuando el puntero del ratón entra dentro del área ocupada por los posibles
elementos destino durante una operación de arrastrar y soltar, este evento es
disparado.
dragover Este evento es similar al evento mousemove, excepto que es disparado
durante una operación de arrastre por posibles elementos destino.
drop Cuando el elemento origen es soltado durante una operación de arrastrar y
soltar, este evento es disparado por el elemento destino.
dragleave Este evento es disparado cuando el ratón sale del área ocupada por un
elemento durante una operación de arrastrar y soltar. Este evento es generalmente
usado junto con dragenter para mostrar una ayuda visual al usuario que le permita
identificar el elemento destino (donde soltar).
 DataTransfer
• Este es el objeto que contendrá la información en una operación
arrastrar y soltar. El objeto dataTransfer tiene varios métodos y
propiedades asociados.
 Dragenter, Dragleave y Dragend
Con el evento dragenter. Solo cancelamos el comportamiento por
defecto de los navegadores cuando este evento es disparado para
prevenir efectos no deseados. Y tampoco aprovechamos los eventos
dragleave y dragend. Estos son eventos importantes que nos
permitirán ayudar al usuario cuando se encuentra arrastrando objetos
por la pantalla.
 Seleccionando un origen válido
No existe ningún método específico para detectar si el elemento origen
es válido o no. No podemos confiar en la información retornada por el
método getData() porque incluso cuando podemos recuperar solo los
datos del tipo especificado, otras fuentes podrían originar el mismo tipo
y proveer datos que no esperábamos. Hay una propiedad del objeto
dataTransfer llamada types que retorna un array con la lista de tipos
configurados durante el evento dragstart, pero también es inútil para
propósitos de validación.
 setDragImage()
Cambiar la imagen en miniatura que es mostrada junto al puntero del ratón
en una operación arrastrar y soltar puede parecer inútil, pero en ocasiones
nos evitará dolores de cabeza. El método setDragImage() no solo nos
permite cambiar la imagen sino también recibe dos atributos, x e y, para
especificar la posición de esta imagen relativa al puntero. Algunos
navegadores generan una imagen en miniatura por defecto a partir del objeto
original que es arrastrado, pero su posición relativa al puntero del ratón es
determinada por la posición del puntero cuando el proceso comienza. El
método setDragImage() nos permite declarar una posición específica que
será la misma para cada operación arrastrar y soltar.
 Archivos
Posiblemente la característica más interesante de la API Drag and Drop es la
habilidad de trabajar con archivos. La API no está solo disponible dentro del
documento, sino también integrada con el sistema, permitiendo a los
usuarios arrastrar elementos desde el navegador hacia otras aplicaciones y
viceversa. Y normalmente los elementos más requeridos desde aplicaciones
externas son archivos.
 8.2 Referencia rápida
La API Drag and Drop introduce eventos específicos, métodos y propiedades
para construir aplicaciones que incorporan la capacidad de arrastrar y soltar
elementos en pantalla.
 Eventos
Existen siete eventos para esta API:
dragstart Este evento es disparado por el elemento origen cuando la
operación de arrastre comienza.
drag Este evento es disparado por el elemento origen mientras una operación
de arrastre se está realizando.
dragend Este evento es disparado por el elemento origen cuando una
operación de arrastre es terminada, ya sea porque la acción de soltar fue
exitosa o porque la operación de arrastre fue cancelada.
dragenter Este evento es disparado por el elemento destino cuando el
puntero del ratón entra en el área ocupada por este elemento. Este evento
siempre tiene que ser cancelado usando el método preventDefault().
dragover Este evento es disparado periódicamente por el elemento destino
cuando el puntero del ratón está sobre él. Este evento siempre tiene que ser
cancelado usando el método preventDefault().
drop Este evento es disparado por el elemento destino cuando el elemento
origen es soltado en su interior. Este evento siempre tiene que ser cancelado
usando el método preventDefault().
dragleave Este evento es disparado por el elemento destino cuando el
puntero del ratón sale del área ocupada por el mismo.
 Métodos
La siguiente es una lista de los métodos más importantes incorporados por
esta API:
setData(tipo, dato) Este método es usado para preparar los datos a ser
enviados cuando el evento dragstart es disparado. El atributo tipo puede ser
cualquier tipo de datos regular (como text/plain o text/html) o un tipo de datos
personalizado. getData(tipo) Este método retorna los datos del tipo
especificado. Es usado cuando un evento drop es disparado.
clearData(type) Este método remueve los datos del tipo especificado.
setDragImage(elemento, x, y) Este método reemplaza la imagen en miniatura
creada por el navegador en la operación arrastrar y soltar por una imagen
personalizada. También declara la posición que esta imagen tendrá con
respecto al puntero del ratón.
 Propiedades
El objeto dataTransfer, que contiene los datos transferidos en una operación
arrastrar y soltar, también introduce algunas propiedades útiles:
types Esta propiedad retorna un array con todos los tipos establecidos
durante el evento dragstart.
files Esta propiedad retorna un array con información acerca de los archivos
que están siendo arrastrados.
dropEffect Esta propiedad retorna el tipo de operación actualmente
seleccionada. Los valores posibles son: none, copy, link y move.
effectAllowed Esta propiedad retorna los tipos de operación que están
permitidos. Puede ser declarada para cambiar las operaciones permitidas. Los
posibles valores son: none, copy, copyLink, copyMove, link, linkMove,
move, all y uninitialized.
 CAPÍTULO 9.
API GEOLOCATION
 9.1 Encontrando su lugar
La API Geolocation fue diseñada para que los navegadores puedan proveer un
mecanismo de detección por defecto que permita a los desarrolladores
determinar la ubicación física real del usuario. Previamente solo contábamos
con la opción de construir una gran base de datos con información sobre
direcciones IP y programar códigos exigentes dentro del servidor que nos
darían una idea aproximada de la ubicación del usuario (generalmente tan
imprecisa como su país).
 getCurrentPosition(ubicación)
• Como dijimos, solo el primer atributo es requerido para que trabaje
correctamente el método getCurrentPosition(). Este atributo es una
función que recibirá un objeto llamado Position, el cual contiene toda la
información retornada por los sistemas de ubicación.
getCurrentPosition(ubicación, error)
Agregando un segundo atributo al método getCurrentPosition(), con otra
función, podremos capturar los errores producidos en el proceso. Uno de
esos errores, por supuesto, ocurre cuando el usuario no acepta compartir sus
datos.
 getCurrentPosition(ubicación, error,
configuración)
Este es el método utilizado para consultas individuales. Puede recibir hasta
tres atributos: una función para procesar la ubicación retornada, una función
para procesar los errores retornados, y un objeto para configurar cómo la
información será adquirida. Solo el primer atributo es obligatorio para que el
método trabaje correctamente.
 watchPosition(ubicación, error,
configuración)
Este método es similar al anterior, excepto que comenzará un proceso de
vigilancia para la detección de nuevas ubicaciones. Trabaja de forma similar
que el conocido método setInterval() de Javascript, repitiendo el proceso
automáticamente en determinados períodos de tiempo de acuerdo a la
configuración por defecto o a los valores de sus atributos.
Usos prácticos con Google Maps
Esta es una API Javascript externa, provista por Google, que nada tiene que
ver con HTML5 pero es incluida extraoficialmente dentro de la especificación
y es ampliamente utilizada en sitios webs modernos estos días. Ofrece una
variedad de alternativas para trabajar con mapas interactivos e incluso vistas
reales de lugares muy específicos a través de la tecnología StreetView.
 9.2 Referencia rápida
Determinar la ubicación física del usuario se ha vuelto crítico en aplicaciones
web modernas. El reciente éxito de los dispositivos móviles ofrece nuevas
posibilidades para crear aplicaciones que aprovechan esta información.
 Métodos
La API Geolocation provee tres métodos para obtener la ubicación de un dispositivo:

getCurrentPosition(ubicación, error, configuración) Este método retorna información

sobre la ubicación del dispositivo que está accediendo a la aplicación. El primer
atributo es una función destinada a procesar la información, el segundo atributo es
otra función para procesamiento de errores, y el tercer atributo es un objeto con
valores de configuración (vea Objeto Configuración debajo).

watchPosition(ubicación, error, configuración) Este método retorna información

sobre la ubicación del dispositivo que está accediendo a la aplicación cada vez que la
ubicación cambia. El primer atributo es una función destinada a procesar la
información, el segundo atributo es otra función para procesamiento de errores, y el
tercer atributo es un objeto con valores de configuración (vea Objeto Configuración
debajo).
clearWatch(id) Este método cancela el proceso que ha sido empezado por el método
watchPosition(). El atributo id es el valor de identificación retornado por el método
watchPosition() cuando es llamado.
 Objetos
Los métodos getCurrentPosition() y watchPosition() generan dos objetos para
comunicar la información retornada por el sistema de ubicación y el estado de la
operación.

Objeto Position Este objeto es generado para contener la información acerca de la

ubicación detectada.
Objeto PositionError Este objeto es generado cuando un error ocurre. Ofrece dos
atributos generales con el valor y el mensaje del error, y tres valores específicos para
identificación de errores individuales (listados debajo).
El siguiente objeto es requerido por los métodos getCurrentPosition() y
watchPosition() para propósitos de configuración.

Objeto Configuración Este objeto provee valores de configuración correspondientes

para los métodos getCurrentPosition() y watchPosition().
enableHighAccuracy Esta es una de las posibles propiedades del Objeto
Configuración. Si es declarada como true (verdadero), le solicitará al navegador
obtener la ubicación más precisa posible.
timeout Esta es una de las propiedades del Objeto Configuración. Indica el máximo
tiempo disponible que tiene la operación para realizarse.
maximumAge Esta es una de las propiedades del Objeto Configuración. Indica por
cuánto tiempo la última ubicación detectada será válida.
 CONCLUSIÓN
La aplicación que considero que se aplica en la vida real es la de
google maps que fue diseñada para que los navegadores puedan
proveer un mecanismo de detección por defecto que permita a
los desarrolladores determinar la ubicación física real del
usuario.
REFERENCIAS BIBLIOGRAFICAS
Juan Diego Gauchat. (Primera edición, 2012). El gran libro de HTML5, CSS3 y Javascript. España: MARCOMBO, S.A.