Les característiques de Bootstrap

En aquest segon article de la sèrie ens ocuparem de les característiques de Bootstrap. Es tracta d'una completa biblioteca de recursos per al disseny de llocs web i aplicacions web incloent plantilles i elements per a formularis, tipografies i menú entre d'altres.

En el article anterior plantejàvem que hi ha ocasions en què els gestors de continguts no són la millor opció i que l'escriptura de codi des de zero per a un lloc web és l'alternativa correcta. Tot i això, no vol dir que hàgim de reinventar la roda. L'ús de frameworks com ara Bootstrap redueix enormement el temps de disseny i facilita obtenir resultats.

Les característiques de Bootstrap

Per entendre les característiques de Bootstrap, hem de comprendre el canvi de paradigma en el disseny dels llocs web.

Quan van aparèixer els llocs web només s'havien d'adaptar a les diferents mides de monitors. Però, amb el pas del temps, telèfons mòbils i tauletes es van convertir cada cop més en els mitjans d'accés preferits dels usuaris. el desafiament va ser fer les pàgines s'adaptessin a les diferents pantalles sense que l'usuari hagués d'engrandir, treure o moure el contingut per poder veure'l.

En principi es van adoptar els enfocaments següents:

• Disseny responsiu: El disseny és el mateix però adaptat de forma automàtica a la mida de la pantalla. Aquest enfocament té alguns problemes com ara que l'usuari es pot veure obligat a fer zoom en determinats sectors de la pàgina per poder veure'ls.
• Avanç progressiu: Es comença dissenyant el lloc per al dispositiu amb menys recursos (Generalment el mòbil per tenir una pantalla més noia, un navegador amb menys compatibilitat per a característiques avançades i, moltes vegades, requerir l'ús d'un pla de dades per connectar-se). Un cop acabat, sobre la base daquest disseny es van agregant característiques per obtenir la versió per a tauletes, notebooks i ordinadors descriptori.
• Degradació gradual: És el camí invers. Es crea primer el lloc per a escriptori i se li van traient característiques fins a obtenir una versió compatible amb dispositius mòbils.

Com que sempre és més fàcil afegir que treure, l'avenç progressiu és la tendència que es va imposar. Bootstrap, per exemple, adopta l'enfocament “mobile first”, és a dir que la base del disseny és sempre la versió que es mostrarà a la mida de pantalla més petit i, després s'estableixen les modificacions que s'aniran fent a mesura que es passi a les mides que segueixen.

Un avantatge extra de l'ús de Bootstrap té a veure que Google assigna prioritat a les vostres cerques als llocs amigables amb els dispositius mòbils.

Un altre concepte que cal tenir en compte és la diferència entre disseny frontend i back-end. El disseny front-end s'ocupa de tot allò que l'usuari veu i tot amb allò que interactua. Backend agrupa allò que es realitza al servidor. Un exemple del primer és el dun formulari web. Això de mostrar una sèrie d'opcions es mostri com un menú desplegable és disseny frontend, que l'opció escollida s'enviï per mail o s'afegeix a una base de dades és disseny backend.

Bootstrap és un framework que combina elements d'estil CSS i de programació a Javascript per controlar la representació i donar interactivitat a tots els components d'una pàgina desenvolupada a HTML5.

Entre les coses que podem controlar amb Bootstrap hi ha:

• Accessibilitat: Els components com ara menús o diàlegs són compatibles amb lectors de pantalla o aptes per al seu ús per persones amb mobilitat reduïda.
• botons: Incloent mides, estils, estats i agrupament.
• Formularis:  Incloent-hi representació, tipus de controls i validació d'entrades.
• imatges: Controla l'origen, l'alineació i l'adequació a la mida de pantalla de les imatges inserides.
• Elements de navegació: Per exemple, barres laterals ocultables o menús verticals o horitzontals depenent del dispositiu.
• tipografia: Control de com es mostren les diferents parts del text.
• Maquetació: Ajust de la representació del contingut depenent del dispositiu

Al proper article veurem alguns exemples pràctics de la seva utilització.