Introducción a los frameworks de diseño

Además de todas las ventajas que se han ido incorporando en el diseño web con las sucesivas versiones de HTML y CSS (especialmente con HTML5 y CSS3), ciertas empresas y comunidades de desarrolladores han elaborado una serie de herramientas que permiten diseñar sitios web de una forma más integral y sencilla. Estas herramientas, denominadas comúnmente frameworks de diseño web, son un conjunto compuesto normalmente de:

• Estilos CSS predefinidos que podemos añadir a nuestras webs utilizando, normalmente, una serie de selectores de clase o de id predefinidos.
• Plugins JavaScript que dotan de cierta funcionalidad adicional a la web y sus componentes, a la hora de interactuar con formularios, arrastrar componentes, etc.
• Otras opciones. Por ejemplo, algunos incorporan funcionalidad en el servidor mediante páginas PHP o similares, otros traen una serie de imágenes o iconos predefinidos que utilizar en las aplicaciones, etc.

Algunos ejemplos de Frameworks populares son:

• Bootstrap: quizá sea el framework más popular para desarrollo web. Sus nuevas versiones se centran cada vez más en el diseño web adaptativo, y cada vez incluye más componentes que añadir a las páginas (elementos de formularios, migas de pan de navegación, etc.). Su web oficial es getbootstrap.com.
• Ionic: es un framework que, unido a otros frameworks de desarrollo en la parte cliente como Angular o React, permite desarrollar la apariencia de la aplicación, e incluso hacerla exportable a otras plataformas, como los dispositivos móviles, a través de aplicaciones híbridas (desarrolladas con tecnologías web, pero exportadas a otros soportes). Su web oficial es ionicframework.com.
• Tailwind: con una filosofía similar a Bootstrap, se utiliza en el diseño de plantillas de algunos frameworks en servidor, como Laravel. Podemos leer sobre él en su web oficial.

En los siguientes subapartados profundizaremos en el uso de algunos de estos frameworks.