Passa al contingut principal

HTML5 Frameworks. HTML5 Boilerplate y Twitter Bootstrap

>

¿Qué es un framework HTML5?


En el ámbito web, normalmente estamos más acostumbrados a asociar la palabra framework con los lenguajes de servidor. Estos frameworks, tan populares como Symfony, Ruby On Rails,… han conseguido aumentar enórmemente la calidad de los productos web.


Estos frameworks están más enfocados a una programación eficiente, centrándose demasiado en el lenguaje de servidor. Existe también una tendencia creciente, gracias a las interfaces RESTfuls a hacer webs que no tienen por qué necesariamente utilizar programación de servidor directamente.


Para cualquiera de estas dos formas, es interesante centrarnos en un framework que trabaje quizás a un nivel más importante que es el lenguaje HTML5


Vamos a numerar algunas de las mejores prácticas



  • Preparar una hoja de estilos, resenteando, normalizando y ofreciendo herramientas prácticas (helpers)

  • Directivas de optimización del servidor

  • Metainformación en el servidor (robots.txt, humans.txt, …)

  • Organización del layout HTML5

  • Estructura de carpetas para organizar la información

  • Documentación


Características básicas. HTML5 Boilerplate


Los dos frameworks comentados aquí (HTML5 Boilerplate y Twitter Bootstrap) presentan una serie de características que son muy interesantes para el desarrollo web. Vamos a explicar un poco más detalladamente algunos de estos puntos:


Normalización de hojas de estilo


Desde hace mucho tiempo ha existido la tendencia de resetear las hojas de estilo para eliminar todas las diferencias que asigna cada navegador a las etiquetas y así partir desde cero. Esta es una gran idea que ahora se ha llevado al siguiente paso: Normalizar. En lugar de resetear todos los estilos, vamos a darle uniformidad haciendo que todos los estilos sean coherentes en una ámplia gama de navegadores.


Soporte a versiones antiguas


Otro concepto interesante es el sistema que ofrecen para dar soporte a navegadores más antiguos. Esto lo hace de dos maneras:



  • Modernizr: Es una librería que facilita saber qué capacidades HTML5 soporta tu navegador para facilitar la carga de Polyfills en el caso de no soportarlo nativamente.

  • Condicionales: Mediante el uso de condicionales HTML se asignan una serie de clases a la etiqueta &t;html> para poder cambiarla desde CSS. Además, añaden una clase no-js que será reemplaza a posteriorí por js de forma que podremos saber también desde CSS si el Javascript está deshabilitado.


Pero !OJO!. Ni a nosotros, ni a los frameworks, nos gustan los navegadores antiguos. Existen por la red una ámplia gama de iniciativas como Browse Happy que anima a los usuarios a mantener actualizados sus navagadores, por temas de seguridad y rendimiento. HTML5 Boilerplate, por ejemplo, tiene un mensaje que enlaza con esta página en el caso de tener una versión de navegador arcaica. También menciona la posibilidad de Google Frame y así embeber un motor de renderizado moderno en nuestros antiguos navegadores.


Orden de carga


Para una mayor rapidez de carga de la página sugieren inlcuir todos nuestros SCRIPTs al final de la página, de forma que estos puedan cargarse a la vez que la página empieza a renderizarse y que no bloqueen la carga en el caso de que uno no pueda ser cargado. Incluso el SCRIPT de Google Analytics, el cual Google recomienda añadirlo entre las etiquetas <HEAD>. (Google lo recomienda para que la visita pueda contar incluso si el navegador no ha terminado de carga la página).


La excepción a esta regla es el caso de Modernizr. Es necesario que se cargue antes de que la página comience a renderizarse para que los nuevos elementos HTML5 sean soportados sin problemas.


Optimizando el servidor


Existen directivas .HTACCESS que permiten especificar estrategias de caché eficientes para las webs. En el caso de que nuestro servidor permita el uso de este archivo y tenga instalados una serie de módulos vamos a ser capaces de enviar nuestras páginas web comprimidas en GZIP, cachear nuestras imágenes y scripts e incrementar el rendimiento de nuestra aplicación significativamente. En el caso de que no soporte este archivo, tendremos que modificar directamente nuestros archivos de configuración en el servidor.


Twitter Bootstrap


Todas las caracteristicas anteriormente mencionadas hacen referencia al framework HTML5 Boilerplate. El otro framework que destacamos hoy, Twitter Bootstrap da una vuelta de tuerca más y se ofrece como una manera sencilla de empezar a montar el prototipo de tu página web de forma rápida y cómoda.


Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, así como extensiones opcionales de JavaScript. Es el proyecto mas popular en GitHub y es usado por la NASA y la MSNBC junto a demás organizaciones.

Además de utilizar muchos conceptos anteriormente mencionados, Twitter BootStrap ofrece herramientas de andamiaje (scaffolding) para estructurar nuestro LAYOUT de manera estática o líquida, componentes Javascript reusables tales como pasadores de imágenes, formularios, menús, migas de pan, etc. Todos realizados adoptando las mejores prácticas y permitiendo a los programadores extenderlos


También existen páginas que ofrecen plantillas (gratuitas y de pago) para utilizar estos componentes, tales como https://wrapbootstrap.com/


Una cosa muy intersante de este framework es que todos los componentes parten de hojas de estilo compiladas desde LESS. Así que, o bien cuando te descargas la última versión puedes definir una serie de variables (fuentes, colores, interlineado, …) o bien recompilar tu mismo estas hojas de estilo con algún compilador de LESS


Resumen


Gracias al uso de estos frameworks la comunidad de desarrolladores va a mejorar enormemente gracias a estandarización, uso de mejores prácticas y partir de una base sólida, testable y apoyada por una gran comunidad. Además de eso, vamos a ser capaces de montar prototipos rápidos y funcionales para poder centrárnos en lo realmente interesante que es la lógica de negocio.


Referencias







via Blog de Imaginanet S.L. Programacion web y marketing online. http://www.imaginanet.com/blog/html5-frameworks-html5-boilerplate-y-twitter-bootstrap.html

Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...
1 comentari
Més informació

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...
Publica un comentari a l'entrada
Més informació

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...
Publica un comentari a l'entrada
Més informació