por Omar Benyakhlef | CSS, Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Taller Web, Tutoriales
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.
(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…)
por Omar Benyakhlef | HTML, iPhone, jQuery, jQuery Mobile
jQuery Mobile
El diseño web específico para móviles es una realidad a la que no podemos dar la espalda.
El usuario de smartphone, no tiene el mismo tiempo, ni el mismo ancho de banda, ni el mismo tamaño de pantalla que puede tener cuando consulta esa misma web cómodamente sentado frente a su ordenador.
Es cierto que teléfonos como el iPhone, o los Android con sus navegadores y zooms, nos permiten ver perfectamente una web convencional, pero la experiencia es mucho más agradable cuando visionamos una web adaptada para estos terminales.
En numerosas ocasiones, al hacer zoom sin querer pulsas un botón o enlace y provocas la acción contraria a la deseada, en definitiva, si puedes, haz una versión mobile para tu web.
Una vez tomada la decisión, se nos plantea qué tecnología usar, podemos hacer un simple HTML adaptado o utilizar el jQuery Mobile, que es lo que nos ocupa al menos en este post y creo que en un futuro bastante largo…
(más…)
por Omar Benyakhlef | HTML, iPhone, jQuery, jQuery Mobile, Mobile
La validez de DreamWeaver en diseño web creo que está fuera de toda duda, ahora por si fuera poco la versión CS 5.5 nos permite maquetar webs para teléfonos móviles de una manera fácil y rápida.
Aunque la mayoría de los nuevos smartphones son capaces de ver webs normales en el terminal, utilizando el zoom, la experiencia de usuario es mucho más gratificante cuando se trata de una maquetación específica para móvil, y en este caso quien mejor nos puede ayudar es sin duda jQuery Mobile.
jQuery Mobile te permite crear capas deslizables, o transiciones de página que hace mucho más fluida la navegación y todo ello con la base del HTML convencional.
Esta tecnología nos permite diseñar para la gran mayoría de terminales del mercado, desde iPhone, iPad, android o los últimos BlackBerrys pasando por la mayoría de los antiguos teléfonos móviles.
A continuación os dejo este vídeo de Adobe en el que podéis ver una muestra
Tenéis muchos más ejemplos en ADOBE TV
