jQuery Mobile Framework
jQuery Mobile Framework
Como desarrollador web siempre he sufrido en el infierno de las compatibilidades entre navegadores. Te encuentras con proyectos perfectamente funcionales en Firefox, Chrome, Safari, Opera, IE8… y la empresa cliente se queja de que no funciona en Internet Explorer 6. Les pides encarecidamente que actualicen el navegador o en su defecto se pinten las caras con pinturas de guerra, hagan una hogera, quemen el ordenador por completo en ella mientras bailan al ritmo de los tambores y… llega la sorpresa. Compruebas de nuevo la compatibilidad y descubres que hay un función JS que no funciona correctamente en IE7 e impide que jQuery, Prototype o MooTools se ejecuten correctamente. Pero todo esto es un bonito paseo por un camino flanqueado por preciosos cerezos en flor con una luna plateada de fondo iluminando nuestras retinas si intentamos hacer que los CSS funcionen igual en todos los navegadores.
Creo que Dios castigó a un tal Adolf tras su muerte con un infierno en el que tiene que revisar hojas de estilo para que la compatibilidad entre navegadores sea pixel perfect.
Hasta ahora conseguir una compatibilidad total a nivel CSS y JS era tedioso, e incluso en empresas grandes se realiza un proceso de «post-producción» (por llamarlo de algún modo) por un departamento totalmente diferente al de diseño y al de programación para corregir cualquiera de esos problemas. Ahora no son una decena de navegadores por comprobar. Tenemos multitud de smartphones con diferentes OS’s, distintos navegadores, resoluciones totalmente opuestas, dos modos de visualizar el contenido (portrait / landscape), interfaces distintas para entrada de datos, pantallas táctiles que invitan a olvidar el estado hover,…
Corren tiempos en los que las empresas quieren que sus páginas sean completamente compatibles con «los iPhones, iPads, iPods, iPeds» y demás, lo cual genera un problema grave. Al crear una web orientada al mercado smartphone tendemos a conseguir que sea simple, tratando de no generar un alto tráfico de datos, utilizando una caché bastante más amplia que para un navegador de escritorio, no sobrecargando de imágenes el contenido, con botones grandes y llamativos tratando de facilitar la experiencia de usuario,… pero, ¿qué pasa con JS?.
A día de hoy, los navegadores nativos de dos de los grandes sistemas operativos para móviles y tablets, iOS y Android, están basados en WebKit, y en teoría no debe existir problemas con su intérprete de Javascript. Pero hay ocasiones en las que hacemos páginas con una tremenda carga de código en JS para ejecutar efectos como fades, drag and drop,…
Personalmente suelo utilizar jQuery a la hora de desarrollar para navegadores tradicionales por varios motivos: facilidad de uso, crear plugins es relativamente simple, tiene una compatibilidad casi completa entre navegadores y lo que más me llamó la atención fue que sobre Android y Safari, funcionaba bastante fluido.
¿Qué es entonces jQuery Mobile? Es un framework que depende de jQuery al puro estilo jQueryUI que busca llevar el ideal de «write less, do more» a los distintos navegadores a la hora de generar el contenido, aplicando unos estilos simples e intuitivos, que se asemejan en gran medida a la interfaz que propone Apple con iOS, sin necesidad de tener que generar estilos para botones, o barras de navegación que se adapten a las diferentes resoluciones.
Sigue…
Actualmente (v1 Alpha 4) es compatible con Android, iOS, BlackBerry, Bada, Windows Phone, webOS, Symbian y MeeGO, y si estáis habituados a trabajar con jQuery, el código para los elementos de la web es treméndamente simple, haciendo que la interfaz final esté optimizada para terminales táctiles incluyendo widgets para formularios, selección de diferentes temas,…
Una página estándar quedaría definida por el siguiente código (tras incluir el JS del framework y el CSS, obviamente):
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
El resultado lo podéis ver en esta demo de jQuery Mobile.
Todo lo demás quedaría generado por el framework. Como veis, el HTML se reduce a la mínima expresión y jQuery Mobile nos asegura una compatibilidad muy alta en los diferentes navegadores para smartphones y tablets.
Poco a poco iré explicando las diferentes funcionalidades del framework, haciendo especial hincapié en la entrada de datos para formularios.
Podéis descargar el framework completo desde su página web o desde este enlace directamente. De igual manera están disponibles las últimas versiones en el repositorio de código de jquery mediante las siguientes rutas:
CSS (con las imagenes alojadas para evitar tener que hostearlas en nuestra web):
http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css
JS:
http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js
Según estas rutas para la versión 1.0a4, el código que debéis copiar en vuestros proyectos es el siguiente:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <!-- O la ruta que utilicéis para jQuery --> <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
