por Omar Benyakhlef | Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Mobile
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…)
por Omar Benyakhlef | Diseño para móviles, Diseño Web, iPhone, Mobile
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…
(más…)
por Omar Benyakhlef | CSS, Mobile, Trucos CSS
Viewport
Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.
Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.
El viewport es un atributo del tag <meta> que se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:
(más…)
por Omar Benyakhlef | Diseño para móviles, iPhone, Mobile
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…)
por Omar Benyakhlef | Android, Mobile
Diseñando para Android
Cuando vamos a diseñar para Android, el primer problema con el que nos encontramos es la enorme diferencia que existe de un terminal a otro, no solo en cuanto a rendimiento, si no a resolución, que es el verdadero problema con el que nos vamos a encontrar cara al diseño.
Android pone a nuestra disposición una completa documentación en la que podemos consultar todos los aspectos técnicos que tenemos que tener en cuenta a la hora de abordar un diseño App.
(más…)
por Omar Benyakhlef | Diseño para móviles, Diseño Web, jQuery Mobile, Mobile, Taller Web
Web App con jQuery Mobile I
Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.
Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.
(más…)
