Framework HTML, lo standard Bootstrap

07 May 2019 | M.A.D.R.

Il non framework bootstrap per costruire la pagine HTML.

Negli ultimi anni è esplosa la bomba del WEB, tanti nuovi linguaggi e framework (bootstrap, uikit, semantic, etc) in grado di rispondere ad una sempre maggiore richiesta di interattività e look&feel da parte degli utenti.

Sappiamo tutti, chi più chi meno, come approcciare una paginetta HTML, con o senza framework (bootstrap, boilerplate, foundation) ma spesso per velocità  scriviamo tutto il codice all’interno della pagina stessa.

Questa metodologia seppur interpretata bene dai browser  non dovrebbe mai essere perseguita, in quanto avremo una pagina di difficile lettura e quindi di conseguenza di difficile gestione.

Nella stesura di un layout e/o di una pagina possiamo contare sulla nostra fantasia e/o  utilizzare dei tools e/o framework (html+css+js) completi che ci danno la possibilità di avere una grafica accattivante in pochissimo tempo, parliamo di Bootstrap.

Odiato ed amato allo stesso tempo ho constatato nel tempo che la community di sviluppatori si divide in 3 categorie:

  • Amanti dei Framework (Bootstrap, UiKit, Semantic, Foundation, Boilerplate etc..).
  • Tester per tutte le novità.
  • Amanti della semplicità, ogni progetto è scritto dall’inizio alla fine senza ausilio di tool/framewok.

Vediamo in pratica come si svolgono le attività per le tre tipologie:

immaginiamo di scrivere un pezzo di codice generale per visualizzare le immagini a modi griglia; potremo utilizzare le tabelle, scrivere dei contenitori e formattarli con una buona stesura del css, utilizzare stili sui selettori

Come possiamo notare tutti e tre gli approcci hanno un problema: “IL TEMPO".

Si, il tempo  è il vero problema,

  1. Nel primo caso avremo sicuramente un problema inerente alla generazione delle righe della tabella (immaginate di popolare la suddetta in modo dinamico, ossia l’oggetto risultato è contenuto in un array)
  2. Scrivere tutta la pagina con dei div, renderli responsive e scrivere lo stile css in vari linguaggi… Moooolto dispendioso
  3. Scrivere lo stile inline sul selettore (come sopra dispendiosissimo, e soprattutto scorretto);

Tutti e tre i metodi sopra hanno un’altra grande falla: IL RESPONSIVE, e si dovrete scrivere anche per i vari dispositivi mobili, quindi il vostro tempo non sarà semplicemente T1, ma T2=3*T1, ossia tutti i vostri stili dovranno essere replicati per ben 3 volte, Desktop, Tablet, Smartphone….

… per tornare alle nuove tecnologie, che ne dite se vi dicessi che dovreste anche implementare tutte le strutture per le pagine “AMP"? Vabbè, sto esagerando, ma dovreste farlo!

Non voglio convincere nessuno, ma utilizzando Bootstrap basterebbe scrivere:

  • Container
    • Row
      • Col-md-(dimensione)

Il nostro risultato (al 90%) sarà:

  1. Scalabile
  2. Responsive
  3. Di facile lettura
  4. Strutturazione della pagina in base alla linee guida (più o meno)
  5. Ampio supporto da parte degli utenti
  6. Documentazione sempre aggiornata
  7. Aggiornamento delle librerie senza troppi sforzi

La semplicità della scrittura e tutti i benefici derivanti dall’utilizzo di Bootstrap, la velocità di stesura del codice, la possibilità di estenderlo con dei plugin fa si che l’utilizzo di questo framework sia l’ideale anche per piccoli progetti.

Ciao a tutti e alla prossima!_!

Soluzioni complete per ogni esigenza