Mas y mas usuarios están utilizando dispositivos móviles para navegar la web se esta volviendo critico para los desarrolladores optimizar sus sitios para que se muestren correctamente los navegadores de estos nuevos dispositivos.
HTML5 es una excelente opción para los desarrolladores que quieren crear un sitio compatible con los dispositivos móviles mas modernos y comenzar a ofrecer nuevos e innovadores servicios haciendo uso de todas las nuevas características del HTML5.
Sin embargo este lenguaje actualmente esta apenas dando sus primeros pasos y aun tiene muchos problemas de implementación y compatibilidad en las diferentes plataformas móviles. Para crear un sitio web optimizado para móviles usando HTML5 es indispensable aplicar una serie de trucos y buenas practicas para garantizar resultados consistentes.
Afortunadamente un grupo de desarrolladores profesionales conscientes de este problema crearon un proyecto que nos ofrece instantáneamente todo lo necesario para crear un sitio móvil HTML5 de calidad profesional.
Mobile Boilerplate
Este proyecto es un derivado del legendario HTML5 Boilerplate. Usando los mismos principios, el Mobile Boilerplate es una versión optimizada para smarphones y otros equipos móviles de alta gama.
Incluye una gran cantidad de trucos y técnicas para garantizar la compatibilidad , consistencia y rendimiento de tu sitio web, entre sus principales características están:
- Creado usando buenas practicas de desarrollo tanto en la estructura del código como en el CSS
- Optimizado para funcionar en los principales smartphones y equipos de alta gama ( Android, iOS, Symbian, Blackberry)
- Ajustes del área de visión o Viewport para evitar problemas de escala involuntaria del sitio
- Media queries que permiten adaptar el sitio según tamaño y resolución del equipo
- Favicons de múltiples resoluciones.
… y muchísimos trucos técnicos mas, que te darán un solido punto de partida para cualquier proyecto móvil.
Importante aclarar que esta plantilla esta planeada para dar la mejor experiencia en smartphones, celulares modernos y equipos de alta gama, para darle soporte a equipos de baja gama y móviles básicos, es mejor aplicar otras técnicas.
Como instalar Mobile Boilerplate
La instalación toma solo unos minutos, lo único que hay que hacer es bajar el archivo disponible en el sitio oficial de Mobile Boilerplate o si eres usuario de github, puedes hacer un fork en su repositorio
Una vez descargado simplemente se descomprime el fichero y tendrás un grupo de archivos algo similar a este:
Puedes copiar estos archivos directamenta a la base de tu proyecto web y comenzar a trabajar en ellos de inmediato. El archivo index.html ya viene listo para ser la base de tu proyecto, ábrelo y comienza a editarlo a partir el tag <body>.
En la carpeta CSS encontraras un archivo llamado style.css basado en los principios del normalize.css (normalizar y standarizar los elementos graficos de todos los navegadores) pero adaptado específicamente para los navegadores de dispositivos móviles.
Por ultimo en la carpeta img, se encuentran 3 subcarpetas con los nombres “h”, “l” , “m” cada una de ellas alberga favicons y pantallas de inicio para equipos de diferentes resoluciones (high, low, medium) puedes editar esas imágenes con tus logos e iconos para desplegarlas en las barras de navegación y pantallas de inicio de equipos iOS y Android.
Bonus: puedes usar Mobile Boilerplate como base para proyectos phoneGap
Mobile Boilerplate ya pensó en la apariencia estructura y consistencia de un archivo HTML5 corriendo en un dispositivo movil y justamente esa es la base de una aplicación phoneGap, no tiene sentido duplicar el trabajo para crear una aplicación móvil.
Para usar Mobile Boilerplate simplemente debes agregar el script de phoneGap al index.html y podrás usar esta plantilla como base de proyectos robustos en phonegap que se desplegaran correctamente en múltiples pantallas y plataformas.
Deja un comentario