Funzionalità Bootstrap

In questo secondo articolo della serie affrontiamo le funzionalità di Bootstrap. È una libreria completa di risorse per la progettazione di siti Web e applicazioni, inclusi modelli ed elementi per moduli, caratteri e menu, tra gli altri.

Nel precedente articolo abbiamo sostenuto che ci sono momenti in cui i gestori di contenuti non sono l'opzione migliore e così via scrivere codice da zero per un sito web è l'alternativa giusta. Tuttavia, ciò non significa che dobbiamo reinventare la ruota. L'utilizzo di framework come Bootstrap riduce notevolmente i tempi di progettazione e semplifica l'ottenimento dei risultati.

Funzionalità Bootstrap

Per comprendere le caratteristiche di Bootstrap, dobbiamo capire il cambio di paradigma nella progettazione di siti web.

quando sono apparsi i siti web dovevano semplicemente adattarsi alle diverse dimensioni dei monitor. Ma, nel tempo, telefoni cellulari e tablet sono diventati sempre più i mezzi di accesso preferiti dagli utenti. la sfida era adattare le pagine ai diversi schermi senza che l'utente dovesse ingrandire, rimpicciolire o spostare il contenuto per poterlo vedere.

In linea di principio sono stati adottati i seguenti approcci:

• Design reattivo: Il design è lo stesso ma si adatta automaticamente alle dimensioni dello schermo. Questo approccio presenta alcuni problemi come l'utente potrebbe essere costretto a ingrandire alcune sezioni della pagina per vederle.
• Avanzamento progressivo: Si inizia progettando il sito per il dispositivo con meno risorse (generalmente il cellulare perché ha uno schermo più piccolo, un browser con meno compatibilità per funzionalità avanzate e spesso richiede l'uso di un piano dati per connettersi). Una volta terminato, sulla base di questo design, vengono aggiunte funzionalità per ottenere la versione per tablet, notebook e computer desktop.
• Degrado graduale: È il percorso inverso. Il sito desktop viene creato per primo e le funzionalità vengono rimosse fino a quando non viene ottenuta una versione ottimizzata per i dispositivi mobili.

Poiché è sempre più facile aggiungere che rimuovere, l'avanzamento progressivo è la tendenza che è riuscita a prevalere. B.ootstrap, ad esempio, adotta l'approccio "mobile first"., vale a dire che la base del disegno è sempre la versione che verrà mostrata nella dimensione dello schermo più piccola e, quindi, vengono stabilite le modifiche che verranno apportate man mano che si passa alle dimensioni che seguono.

Un ulteriore vantaggio dell'utilizzo di Bootstrap ha a che fare con il fatto che Google dà la priorità ai siti ottimizzati per i dispositivi mobili nelle sue ricerche.

Un altro concetto che dobbiamo prendere in considerazione è la differenza tra design frontend e backend. Il design front-end si prende cura di tutto ciò che l'utente vede e di tutto ciò con cui interagisce. Il backend raggruppa ciò che viene fatto sul server. Un esempio del primo è quello di un modulo web. La visualizzazione di una serie di opzioni viene mostrata come un menu a discesa è il design del frontend, che l'opzione scelta viene inviata per posta o aggiunta a un database è il design del backend.

Bootstrap è un framework che combina elementi di stile CSS e programmazione Javascript per controllare il rendering e dare interattività a tutti i componenti di una pagina sviluppata in HTML5.

Tra le cose che possiamo controllare con Bootstrap ci sono:

• accessibilità: Componenti come menu o finestre di dialogo sono compatibili con lettori di schermo o adatti all'uso da parte di persone a mobilità ridotta.
• Pulsanti: Comprese misure, stili, stati e raggruppamenti.
• Le forme:  Compresi il rendering, i tipi di controlli e la convalida dell'input.
• Immagini: controlla l'origine, l'allineamento e la dimensione dello schermo delle immagini inserite.
• Elementi di navigazione: Ad esempio, barre laterali nascoste o menu verticali o orizzontali a seconda del dispositivo.
• tipografia: Controlla come vengono visualizzate le diverse parti del testo.
• Disposizione: Regolazione del rendering del contenuto in base al dispositivo

Nel prossimo articolo vedremo alcuni esempi pratici del suo utilizzo.