Le taglie da scegliere in bootstrap in base alle risoluzioni

Se prima faccio e poi studio, oppure studio durante, quando si è in una fase di formazione, non si va incontro a nessun disastro tangibile, le conseguenze non sono deleterie a patto di relegare questa attività tra le mura di casa e non in una azienda! Negli scacchi ad esempio questo approccio seppure esista anche un libro che si intitola PRIMA MUOVI E POI PENSA, non convince nell’ agonismo da torneo, per il semplice fatto che un processo analitico ti porta in maniera lineare a scegliere la mossa migliore ma se affrettatamente fai la prima mossa che ti viene in mente sei spacciato, perchè non puoi tornare indietro, mentre il nostro editor di codice è molto generoso con i suoi CTRL+Z o CTRL + Y. E quindi? Cosa fare perdere tempo sopra i libri o sporcarsi le mani direttamente? Vediamo un approccio di approfondimento teorico su tutto il lavoro svolto all’ indirizzo http://umbriawayformazione.altervista.org/ci_project_competenze/index.php/competenze/table dove ci siamo approcciati con una overview su tutto il mondo del web design con materie quali HTML/HTML5/CSS/GRID/FLEX/SASS/BOOTSTRAP . Iniziamo quindi a spingerci oltre e cerchiamo di risolvere quelle situazioni in cui siamo completamente legati e in tensione nei confronti della tecnologia, per esempio, come faccio a costruirmi una barra di navigazione personalizzata in Bootstrap e quale taglia del vestito devo scegliere (break point o media query) quando voglio apportare delle modifiche durante il ridimensionamento della pagina? Come faccio a fare uno slider? Come faccio a spingere gli elementi di un menù verso destra? Come faccio a inserire un hamburger menù per le piccole risoluzioni? L’approccio del prima muovi e poi pensa (che non è il massimo concettualmente ma é molto creativo) funziona che si va a fare direttamente, andando a prelevare i componenti dalla documentazione di Bootstrap, https://getbootstrap.com/docs/4.0/getting-started/introduction/ . Ecco qui non c’è tanto di andare per il sottile, la documentazione risolve ed é un punto di riferimento imprescindibile per ogni aspirante sviluppatore che ripetiamoci, non deve imparare a memoria nessuna delle centinaia di CLASSI messe a disposizione dal Framework. Quindi andiamo e copiamo perché é la stessa documentazione che ci propone il codice. Per la grafica diretta possiamo appoggiarci a siti come https://pixabay.com/ per prelevare risorse gratuite o https://unsplash.com/. Ora costruiamoci la nostra pagina BOOTSTRAP per esempio, anche consultabile dal vivo all’ indirizzo
http://umbriawayformazione.altervista.org/uwcode/fwdextra2.html:

<!doctype html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
	<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
    <title>Bootstrap Learning</title>
	<link rel="stylesheet" href="nome_assegnato.css" type="text/css">
	<style>
	body {
	font-family: 'Roboto', sans-serif;
	margin-top:56px
	}
	.sf-navbar{
	background-color:rgba(0,0,0,0.8);
	}
	.navbar-nav a{
	color:white;
	margin-left:50px;
	}
	.navbar-nav a:hover {
	color:#fed136;
	}
	a.navbar-brand {
	color:#fed136;
	}
	.navbar-toggler {
	background-color:#fed136;
	font-size:12px;
	color:white;
	text-transform:uppercase;
	}
	
	@media (min-width:1100px) {
	.carousel-inner{
	height:calc(100vh - 56px);
	}
	.carousel-inner img{
	height:100%;
	}
	}
	
	</style>
  </head>
  <body>
  
  <nav class="navbar navbar-expand-lg sf-navbar fixed-top">
  <a class="navbar-brand text-uppercase" href="#">FWD Agency</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Menu
    <i class="fas fa-bars"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Servizi <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Chi siamo</a>
      </li>
	        <li class="nav-item">
        <a class="nav-link" href="#">Soluzioni</a>
      </li>
	  	        <li class="nav-item">
        <a class="nav-link" href="#">Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contatti</a>
      </li>
    </ul>
  </div>
</nav>

<section id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>	
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg" alt="web design umbria">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2014/05/02/21/50/laptop-336378_960_720.jpg" alt="seo specialist umbria">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2014/05/02/21/47/laptop-336369_960_720.jpg" alt="web developer umbria">
    </div>
	    <div class="carousel-item">
      <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2014/05/03/01/03/laptop-336704_960_720.jpg" alt="content marketing umbria">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</section>

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

<nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

<nav class="navbar navbar-light" style="background-color: #ff9900;">
    <a class="navbar-brand text-uppercase font-weight-bold href="#" style="color: red;">Navbar</a>
	    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-success my-2 my-sm-0" style="background-color: red;" type="submit">Search</button>
    </form>
</nav>
<i class="fas fa-chess-bishop"></i>
  <p class="display-1 mb-1">Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
    <p class="display-3 mb-1">Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>
	  <p class="display-6 mb-1">Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione.</p>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>

I controlli di integrità

A questo punto immedesimiamoci detective dell’ impossibile e cerchiamo di capire che cosa si nasconde dietro a tutti questi geroglifici, noteremo che linkando il framework si materializzano delle propietà nei CDN (content delivery network) come integrity e crossorigin che sono valorizzate in modo incomprensibile. La domanda é quindi: ma i controlli di integrità e la verifica dell’ origine quando usiamo i CDN sono necessari anche se occupano spazio e sono scomodi per la leggibilità della pagina? Da quello che abbiamo capito la risposta é che per esempio una stringa di caratteri come integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous” é importante in termini di sicurezza che deve essere un criterio da tutelare quando sviluppiamo web app. L’integrità delle sottorisorse definisce un meccanismo mediante il quale i programmi utente possono verificare che una risorsa recuperata sia stata consegnata senza manipolazioni impreviste. Scartabellando in rete scopriamo che l’attributo di integrità consente al browser di controllare l’origine del file per assicurarsi che il codice non venga mai caricato se l’origine è stata manipolata. L’attributo Crossorigin è presente quando una richiesta viene caricata utilizzando “CORS”, che ora è un requisito per il controllo SRI quando non viene caricato dalla “stessa origine”. Maggiori informazioni su integrity e crossorigin possiamo individuarne al solito vangelo dello sviluppatore: https://www.w3schools.com/

Il foglio di stile personalizzato

Analizziamo il foglio stile interno che ha la priorità rispetto alle classi esterne del framework. Questo mi consente di fare diverse cose come ad andare a sovrascrivere e inserire classi fantasma sostituendo quelle di bootstrap come è stato fatto per .sf-navbar per esempio, andare a personalizzare il TOGGLE, l’interruttore che accende o spegne la visibilità di un hamburger menù (componente che compare sulle risoluzioni del mondo mobile o ridimensionando la pagina desktop) in base a una risoluzione sulla classe .navbar-toggler, oppure di andare a definire i colori di un elemento (per esempio di un brand come nel nostro caso) oppure di staccare dei link sulla sinistra in modo da distanziare gli elementi presenti all’ interno di una lista UL o ancora posso definire il colore di sfondo della barra e anche la sua trasparenza oppure posso risolvere i problemi legati alla visibilità delle immagini all’ interno di uno slider andando a giocare sui break point con le media query e tanto altro come si può notare. Il concetto é che bootstrap non é un Re Sole accentratore, qui possiamo aggirare le classi native e fare tutto quello che vogliamo:

<style>
	body {
	font-family: 'Roboto', sans-serif;
	margin-top:56px
	}
	.sf-navbar{
	background-color:rgba(0,0,0,0.8);
	}
	.navbar-nav a{
	color:white;
	margin-left:50px;
	}
	.navbar-nav a:hover {
	color:#fed136;
	}
	a.navbar-brand {
	color:#fed136;
	}
	.navbar-toggler {
	background-color:#fed136;
	font-size:12px;
	color:white;
	text-transform:uppercase;
	}
	
	@media (min-width:1100px) {
	.carousel-inner{
	height:calc(100vh - 56px);
	}
	.carousel-inner img{
	height:100%;
	}
	}
	</style>

Conclusioni: quando si ha a che fare con la formazione passare direttamente alla pratica senza sapere nulla ha anche dei vantaggi, tipo la nascita di domande la cui risposta risolve un problema diretto. Per contro lavorare solo dopo che si sono acquisiti tutti gli strumenti ha il vantaggio di un apprendimento metodico e regolare (meno caotico rispetto all’ approccio prima FAI e solo dopo RISOLVI) ma ha anche l’inconveniente di essere dispersivo. L’importante è accrescere competenze e tutte le strategie alla fine confluiscono a un unico delta del fiume, la scelta del metodo è solo una questione di inclinazioni e gusti personali.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...