Bootstrap y el RWD
Todos los contenidos de este blog los podrás encontrar en Drupal Sapiens (https://drupalsapiens.com/es), la nueva plataforma de Divulgación y Cursos de Drupal, ¡con contenidos muy interesantes!
Buenas a tod@s.
Hoy justo han pasado 10 días de la última entrada en el blog. Perdonad pero he estado bastante ocupado estos días.
Hoy quería tratar un tema interesante en el ámbito de desarrollo web, tan interesante como es el Responsive Web Design o “RWD” para los amigos. El Responsive Web Design es aquella filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia y funcionalidad a cualquier dispositivo que se esté utilizando para acceder a ésta, ya sean tablets, ordenadores de sobremesa, portátiles, teléfonos móviles, smartwatch… etc. El objetivo es claro, y cada vez, se está utilizando con más frecuencia en la web este tipo de diseño/filosofía, precisamente porque cada vez se accede más a la web con más variedad de dispositivos.
Según un análisis estadístico en 2016, el uso de internet lo lideran los dispotivos móviles con un 88,3% por delante de los ordenadores, que tienen un 78,2%. Es importante destacar que estos datos son de territorio nacional, es decir, en España. Pero no olvidemos que es un gran porcentaje a tener en cuenta a la hora de desarrollar webs ‘responsives’ o adaptables.
Y aquí es donde entra en juego Bootstrap.
Bootstrap es un framework basado en HTML, CSS y Javascript para crear webs responsives 100%, adaptables a cualquier dispositivo. Este framework fue desarrollado por Twitter y se liberó en Agosto de 2011 como open source. A día de hoy, es de los proyectos más populares de Github y es usado por la NASA, entra otras organizaciones y webs importantes.
Lo más destacable de Bootstrap es:
- ¡Gratis!
- Open source 100%
- Soporta HTML5 y CSS3
- Documentación y buena comunidad
- Compatibilidad 100% en los navegadores más usados
- Gran variedad de componentes
Lo que más me ha gustado de este framework sin duda, es su sistema de rejillas o Grids, que permite a través de un sistema de 12 columnas (grid) adaptar la página al dispositivo que se esté usando. Permitirá:
- Extra small devices – Phones (<768px) : .col-xs-
- Small devices – Tablets (≥ 768px): .col-sm
- Medium devices – Desktops (≥992px): .col-md-d
- Large devices – Desktops (≥1200px): .col-lg
En resumen; si os gusta el desarrollo web, no podeis perder de vista este framework. Tiene muchísimo potencia y os hará la vida más fácil tanto a los desarrolladores como a los internautas.