La geolocalización forma parte habitual del diseño web y aplicaciones para teléfonos y tablets. En numerosas ocasiones nos vamos a encontrar con la necesidad de diseñar incluyendo mapas de Google Maps, controladores de mapas, ubicaciones, pins de localización…
En este post de recursos de diseño web, vais a encontrar una gran variedad de mapas y demás útiles para realizar con éxito vuestros diseños de geolocalización.
Plantillas PSD iPhone
Templates o plantillas de iPhone en psd, todo en capas para que puedas hacer una buena presentación de tu App o WebApp.
Buen post de GraphicsFuel en el que podrás encontrar toda una relación direcciones en las que descargar gratuitamente todo tipo de psd’s de iPhone. Podrás encontrar desde las carcasas del móvil hasta los más mínimos detalles, como iconos, elementos de formulario, teclados, botones, fondos…
La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.
Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.
La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C en «Mobile Web Best Practices» bajo el subtítulo «One Web«.
Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. (más…)
Acciones sobre pantallas táctiles
A diferencia del diseño web convencional, en el diseño para móviles, o tabletas, la interface táctil es diferente a la interface basada en ratón. En una pantalla táctil el modo de comportamiento del usuario es totalmente distinto y eso es algo que tenemos que tener en cuenta y sobre todo aprovechar sus ventajas.
Estamos familiarizados con la experiencia de interacción con la ayuda del ratón, seguramente una experiencia a la que todavía le queda mucho tiempo. La interface táctil es relativamente nueva. En un principio se trasladó la experiencia de ratón a la pantalla táctil, pero en seguida y de forma casi natural, comenzaron a desarrollarse una serie de interacciones basadas en la forma de tocar la pantalla. Gestos, distinción entre el uso de uno o más dedos, acciones pre grabadas que permiten recordar gestos y asociarlos a una acción, etc…
Interfaces para iPhone y iPad
En esta pequeña muestra, podemos ver todo tipo de tendencias y soluciones muy creativas en lo referente a interfaces de usuario. Echadle un vistazo porque seguro que de aquí sacareis buenas ideas para próximos diseños.
(más…)
Tutorial de jQuery Mobile II. Transición de páginas
Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos «efectos especiales» para hacer la Web Appmás atractiva.
jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.
También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar «tragándose» esta tecnología tarde o temprano.
