Temas para bootstrap

Si a alguno de ustedes se les ha ocurrido customizar un poco su web móvil con bootstrap pero no tiene el tiempo suficiente como para modificar los css y crear un skin desde cero, este recurso les servirá de mucho.

Entren a http://bootswatch.com/ , escojan el tema que más se acomode a su necesidad, luego solo deben bajar los dos siguientes archivos en css: bootstrap.css y bootstrap.min.css y reemplazarlos en su proyecto, aconsejo desde luego hacer un backup de estos dos archivos originales en caso quieran volver a su tema anterior. Hasta la próxima.

Elegir PhoneGap, Bootstrap ó JQuery Mobile

Por lo general cuando nos toca desarrollar un sitio web móvil a medida es determinante el momento en que decidimos que tecnología y frameworks usar, en especial si de diseño se trata. Una forma de ayudar a nuestra elección es el análisis del las ventajas y desventajas que tienen las opciones disponibles actuales que se muestran en el título de este post. Bien, empezemos por aclarar que estas tres herramientas fueron creadas para resolver diferentes problemas con diferentes enfoques.

PhoneGap es esencialmente un wrapper (navegador) que enmarca la aplicacion web el cual permite acceder a librerias nativas (API's) de los dipositivos (como la camera, bluetooth, etc.) haciendo uso del lenguaje JavaScript.

Bootstrap es un framework web preparado para aplicar la técnica del responsive design. Su propósito es adaptar la vista según se a el dispositivo con el que se acceda. Proporcionando diferentes presentaciones para smartphones, tablets, PC's, etc.

jQueryMobile es un framework web móvil que permite la vista multiplataforma móvil de la aplicación web reescribiendo enteramente los elementos JavaScript, HTML y CSS.

Ahora teniendo en claras estas definiciones pasamos a los Pro's y los Contras de los frameworks antes mencionados.

Bootstrap:

Pro: Fácil de aprender, fácil de configurar y customizar.

Pro: Muchos websites lo usan como por ejemplo twitter, la nasa, etc.

Con: UX limitada, esta es un área en la que jQuery tiene la ventaja, especialmente si usas sliders o menus drop down. Los sliders en bootstrap no son arrastrables en los móviles.

jQuery Mobile:

Pro: Interfaz más amigable al usuario final.

Pro: Fácil de aprender, especialmente si has usado antes la librería jQuery.

Con: Necesita mayor inyección de data para una mejor experiencia de usuario, esto podría hacer que tu aplicación dinámica sea muy compleja de modificar.

PhoneGap:

Pro: Fácilmente te permite crear aplicaciones web interplatforma haciendo uso de JavaScript/HTML/CSS y brinda acceso a las APIs del dispositivo.

Con: El tiempo de respuesta en especial en android es mayor que los frameworks antes mencionados.

Conclusión mucho depende del enfoque que busques darle a tu aplicación y de sus particularidades. Por ejemple si se quiere algo netamente informativo bastaría con bootstrap, si se desea una interfaz más atractiva para el usuario podría usarse jQuery Mobile y si lo que se desea es interacción con las API's nativas de los dispositivos PhoneGap. Hasta la próxima.

Obtener el sistema operativo cliente usando javascript

En una ocasión anterior les había comentado como obtener el navegador y la versión con PHP, en este post les comentaré algo que tiene una utilidad parecida pues también nos sirve para hacer una bifurcación en caso tengamos una aplicación web para escritorio y otra para el móvil, se que también existe el responsive design con su estrategia mobile first lo cual evitaría el uso de esto pero el código a continuación les puede servir también en otros casos como hacer compatibles en un website otras muchas cosas, por ejemplo si entras en tu website y tu tienes una aplicación en google play y otra en la appstore de apple puedes mostrar el enlace según sea el móvil con el que accedan a tu website o mejor dicho según el sistema operativo que tenga el móvil (Android o IOS) lo cual permite una mejor experiencia de usuario al recomendar la aplicación segun sea el sistema operativo cliente. A continuación les dejo el código para determinar dos variables booleanas y evaluar si el origen es un dispositivo con android o un dispositivo con ios.

            
var ua = navigator.userAgent.toLowerCase();
var esAndroid = ua.indexOf("android") > -1;
var esiPhone = ua.indexOf("iphone") > -1;
var esWPx = ua.indexOf("windows phone") > -1;

El siguiente paso solo sería evaluar estas variables en una condicional y mostrar la información requerida (en este caso el enlace a descargar la aplicación Android o el enlace a descargar la aplicación IOS) según sean las variables booleanas recuperadas.

Hasta la próxima.