archivo

Web

HTML5: Infografía de expectativas de uso

Muy interesante la infografía que he visto vía Genbetadev y que concluye que el 94% de los 4043 desarrolladores web encuestados opina que HTML5 será fundamental en los próximos 2 años.

Me gusta el resultado, teniendo en cuenta que los navegadores móviles se optimizarán más y las web app darán un buen resultado de rendimiento.

Anuncios

La Page Visibility API es una nueva tecnología que permite comunicar a una página web cuando ha dejado de estar visible al usuario: cambio de pestaña, minimización del navegador… etc La especificación se encuentra en fase experimental y que por el momento la soportan las últimas versiones de algunos navegadores de escritorio: chrome >= 13, Firefox >= 10 y Internet Explorer 10. Safari y Opera no la soportan en sus versiones actuales.

En el MDN se encuentra un ejemplo para ver el modo de uso. También puedes consultar el borrador del W3C.

Las Web App están tomando un papel importante en los dispositivos móviles. Escribes una vez y ejecutas  en cualquier dispositivo. A ello contribuyen framework como PhoneGap que actua como middleware entre la API del dispositivo y la Web App. Existe multitud de framework MVC para organizar las vistas y la lógica de una aplicación web basada en Javascript: Backbone.js o Ember.Js son algunos ejemplos de los más conocidos.

TodoMVC es un proyecto que implementa una sencilla aplicación recordatorio de tareas pendientes “ToDo” en varios de estos framework para que estudies la sintaxis y compruebas las diferencias.

Que los dispositivos móviles, como los smartphones o las tablets, han llegado para quedarse es un realidad innegable. Para todos ellos existe varios sistemas operativos: iOS, Android, BlackBerry OS, Symbian, Palm… etc. A su vez, estos contiene aplicaciones, tales como los navegadores, que se han convertido en una de las aplicaciones más importantes de estos dispositivos. Disponer una versión para móvil de nuestra página web es muy recomendable y para poder mostrarla es necesario detectar cuando el agente o navegador proviene de una plataforma móvil. Hoy os presento Detect Mobile Browsers una web que, mediante un sencillo formulario,configuramos las acciones que se realizarán cuando se detecte el user-agent de navegadores móviles como el de iPhone, iPad, Android…

Formulario de captura

El resultado de completar el formulario es una función llamada mobile_device_detect con los parámetros adecuados para llevar a cabo las reglas configuradas. Dicha función se encuentra en un fichero PHP que podemos descargar. Para usarlo es necesario realizar un include: require_once('mobile_device_detect.php'); $mobile = mobile_device_detect(param1, param2, ...); En el fichero PHP que incluimos hay escritas una gran cantidad de expresiones regulares para detectar los principales navegadores. Además, si el user-agent no coincide con el de algún navegador conocido, emplea patrones usados por los principales operadores de telefonía en el user-agent de los sistemas operativos que personalizan. El código generado se acompaña con una licencia propia que indica la posibilidad de usarlo en un sitio web sin coste alguno siempre que la web no presente actividad comercial.

Actualización 29/12/2012:

Han aparecido numerosos proyectos para detectar el dispositivo desde el que se accede a una web o web app. Entre ellos, el que recomienda Conchi en el comentario: Mobile detect, un proyecto Open source en Github. Además, si como en mi caso, desarrollas con Symfony 2, existe un bundle llamado MobileDetectBundle que  lo incorpora.

Estoy finalizando la implementación de un nuevo proyecto y tras comprar el dominio, vavag.com, he comenzado a crear el “ecosistema” asociado a el: Crear una cuenta en Twitter, Facebook y un blog. Para este último, no voy a realizar ninguna instalación en el servidor que albergará el proyecto debido a que existen muy buenos servicios: WordPress, Blogger o Tumblr (No es propiamente dicho una plataforma blog).

El Domain Mapping permite crear dominios y subdominios apuntando a tu blog y  que las entradas publicadas empleen ese dominio. Más sencillo: Este blog se alberga en lennyvpg.wordpress.com, pero si deseo comprar el dominio blogextremo.com y que apunte a mi cuenta en wordpress, tengo que emplear el Domain Mapping. De las tres plataformas que he mencionado antes, wordpress es la única que cobra por este servicio: 12$/año y cuenta. El resto es completamente gratuito. Tras examinar Blogger y Tumblr me decanto por este último por acomodarse a mis necesidades actuales y por que me gustan los temas disponibles.

Realizar el Domain Mapping en Tumblr es sencillo. Es necesario acceder a la sección de DNS de tu servicio de dominio. Si el dominio es vacío (por ejemplo ejemplo.com) hay que crear un registro tipo ‘A-Name’ que apunte a la dirección que  Tumblr proporciona. Si estamos hablando de un subdominio: blog.ejemplo.com, habría que apuntarlo a la IP proporcionada por la plataforma blog. En mi caso, el registro de dominio lo he realizado en CdMon. Para configurarlo, hay que acceder a la opción ‘DNS Estático’, seleccionar el dominio y pulsar sobre el botón ‘gestionar’ y después ‘Añadir un registro A’. Una ves hecho esto, puede que sea necesario esperar unos minutos antes de que se repliquen los cambios en los servidores DNS. Para configurarlo en Tumblr, hay que acceder a ‘Customice’ y en la pestaña ‘info’, indicar que usaremos nuestro nombre de dominio ‘Use a custom domain name’. Escribimos el dominio o subdominio y tras unos segundos, todo funciona.

Recursos:

Más sobre domain mapping

Los selectores CSS son cada vez más comunes para evitar la complejidad de lectura de un ficheri HTML. Gracias a ellos, y con un formato que guarda similitud con el de las expresiones regulares, podemos construir cadena que permiten aplicar un estilo a determinados elementos HTML. Este “lenguaje” también se emplea en sistemas de pruebas funcionales –functional test– sobre aplicaciones web, para determinar si existe un elemento como resultado de aplicar la prueba y probar que todo ha marchado bien. Por ejemplo, el método checkElement del sistema Lime, motor de pruebas de Symfony, emplea dichos selectores.

Dejo un elace a modo de resumen sobre la sintaxis de los Selectores CSS que ha creado anieto2K.

A %d blogueros les gusta esto: