=== Imparando.net ===

Responsive frameworks

Mentre quando è nato il Web le dimensioni dei browser erano piuttosto fisse, essendo legate agli unici dispositivi che fossero in grado di visualizzarli, cioè gli schermi dei computer. Attualmente i dispositivi su cui sono installati i browser hanno dimensioni molto differenti (smartphone, tablet, PC, televisioni, ecc.). Questo ha comportato dei problemi agli sviluppatori di siti web che dovevano quindi pensare a dei layout che fossero visualizzati più o meno bene, indipendentemente dalla dimensione dello schermo. Con l'avvento delle nuove versioni dello standard CSS, via via più potenti, si è avuta una possibilità di controllo delle pagine sempre più sofisticata, al costo di una maggiore difficoltà nella scrittura dei fogli di stile. Questo ha portato a sviluppare dei veri e propri framework, solitamente composti da file CSS e Javascript, che permettono ai web developer di costruire pagine curate graficamente senza dover impazzire. Una caratteristica tra le più importanti è inoltre quella di essere responsive, cioè di essere in grado di adattarsi al dispositivo senza bisogno che lo sviluppatore si occupi di scrivere codice apposito. Questi framework, in base alle dimensioni del dispositivo, sono in grado di posizionare ad esempio i menu in posizione diverse della pagina, facendogli assumere anche forme diverse, oppure mostrano insiemi di immagini che vengono posizionate orizzontalmente o verticalmente a seconda della larghezza dello schermo, oppure ancora che adattano la dimensione dei testi sia dei paragrafi che degli header, e molto altro ancora.
Tanto per avere un'idea del loro funzionamento si possono guardare questi due esempi:

  1. Pure CSS: è un framework minimale, purtroppo non più sviluppato attivamente, che fornisce tutte le caratteristiche di base includendo pochi file di dimensioni molto ridotte, ideale per capire le idee fondamentali senza perdersi nei dettagli.
  2. Bootstrap: è un framework completo, uno dei più diffusi al momento (2016-09-22), permette di realizzare siti complessi a piacere da un punto di vista grafico ed è in costante evoluzione. Notevolmente più complesso di Pure, ha una curva di apprendimento più ripida, ma permette un controllo pressochè totale sulla resa della pagina (si vedano alcuni esempi qua).
Come esempio si veda questa pagina, nella quale compare solo la parte HTML di struttura, ma non è stato applicato alcun stile. Se alla stessa pagina si vanno ad aggiungere i file di Pure, il risultato diventerà questo. Oltre all'evidente miglioramento grafico, provando a modificare le dimensioni del browser si noterà come la disposizione degli elementi nella pagina si adatterà alle dimensioni di visualizzazione.