18/09/2013

Interfaces de «arrastrar y soltar» con HTML5 y JavaScript

Interfaces de «arrastrar y soltar» con HTML5 y JavaScript

Las interfaces gráficas con sistema drag and drop (arrastrar y soltar) nos permiten «tomar» un elemento de la pantalla y desplazarlo hacia otro lugar utilizando el mouse o, en el caso de los dispositivos táctiles, uno de nuestros dedos. Estamos acostumbrados a verlas en aplicaciones de escritorio desde 1984, cuando Apple lanzó la Macintosh 128K (una de las primeras computadoras con interfaz gráfica de usuario). Cambiar la ubicación de íconos o barras de herramientas, mover archivos entre carpetas y desplazar ventanas son usos habituales de esta característica.

A pesar de su antigüedad, el uso de drag and drop en aplicaciones Web todavía no se encuentra suficientemente difundido. En 1999, Internet Explorer (en su versión 5) introdujo un modelo para implementar esta característica; tiempo después, la aparición de Dynamic HTML permitió utilizarla en otros navegadores. Pero requería de un proceso de codificación demasiado arduo para su buen funcionamiento.

Sin embargo, la situación está empezando a cambiar gracias al estándar HTML5. Basándose en el modelo de Internet Explorer 5, el autor de especificaciones Ian Hickson desarrolló una API que simplifica la implementación de módulos para arrastrar y soltar. El blog HTML5 Rocks explica el proceso, basado en la manipulación de eventos de JavaScript.

Gracias a esta API podemos desarrollar varias funciones interesantes. Nuestra aplicación puede permitirles a los usuarios subir archivos arrastrándolos desde su escritorio u organizar el contenido como más les guste (algunos lectores de RSS permiten cambiar la ubicación de los feeds a través de drag and drop). Si desarrollamos un videojuego, podemos implementar funciones tan importantes como el movimiento de las piezas sobre un tablero o el desplazamiento de objetos en una habitación. Sin embargo, la API todavía está en desarrollo y no es soportada por la mayoría de los navegadores de dispositivos móviles. Además, el experto en usabilidad Jakob Nielsen advierte que, en general, los usuarios no se dan cuenta de si un objeto puede arrastrarse y soltarse. Agregar un texto instructivo o un identificador que permita distinguir a los elementos «arrastrables» puede ser de ayuda.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce