Vedo e non vedo? Non è una estensione di 50 sfumature di grigio ai tempi del covid, ma un modo di sfruttare un COMPONENTE di BOOTSTRAP nel campo della didattica e della formazione: istruzioni per l’uso

Ormai chi segue Umbriaway Consulting sa bene che meglio applicare la MAGIA DEL FARE senza tanti preamboli, quindi andiamo su https://getbootstrap.com/docs/5.0/getting-started/introduction/ e copiamo come ci propone il sito stesso lo STARTER TEMPLATE:

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Toggle component</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ok, a questo punto devi insegnare Cartesio ai tuoi alunni. CARTESIO chi? Lo si sa ai tempi del COVID si deve fare una telelezione magari su ZOOM supportata da strumenti condivisi in rete e da qui l’idea, posso sfruttare un framework potente come BOOTSTRAP per FARE didattica? La risposta é dentro di te e questa volta giusta! Quindi costruiamo un lay-out efficace composto da un contenitore che contiene una riga che contiene 4 colonne, procediamo, capiremo il perché a fine lavoro, tenendo presente che la GRID del FRAMEWORK è basata su 12 colonne, per cui i campi che ci serviranno da settare saranno di fatto di classe tre perché vogliamo posizionare quattro elementi per riga (12/3=4), vediamo come diventa il codice dopo un lavoro preliminare in cui inseriamo sia una immagine con una domanda, sia un bottone che gestisce la propietà COLLAPSE che accende o spegne l’interruttore TOGGLE. Una applicazione semiseria che rispecchia questo principio la ritroviamo all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/collapse.html , ora diamo seguito e miglioriamo l’applicazione http://umbriawayformazione.altervista.org/uwcode/cartesio.html rendendola efficiente e professionale:

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

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <title>Cartesio philosophy</title>
</head>
<body class="bg-warning">

  <div class="container">

    <h3 class="mt-5">Scopri Cartesio e la sua filosofia!</h3><br>

    <div class="row">

      <div class="col-md-3">
        <h6>Quale é il primo capisaldo di Cartesio?</h6>
        <img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Risposta
          </a>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            EVIDENZA
          </div>
        </div>
      </div>

      <div  class="col-md-3">
        <h6>Quale é il secondo capisaldo di Cartesio?</h6>
        <img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
            Risposta
          </a>
        </p>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            ANALISI
          </div>
        </div>
      </div>

      <div  class="col-md-3">
        <h6>Quale é il terzo capisaldo di Cartesio?</h6>
        <img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
            Risposta
          </a>
        </p>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            SINTESI
          </div>
        </div>
      </div>


      <div class="col-md-3">
        <h6>Quale é il quarto capisaldo di Cartesio?</h6>
        <img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">
            Risposta
          </a>
        </p>
        <div class="collapse" id="collapseExample3">
          <div class="card card-body">
            ENUMERAZIONE
          </div>
          </div>
        </div>

        <!--chiudo la riga-->
      </div>

      <h3 class="mt-5">Risolvi le situazioni di scacchi</h3><br>

      <div class="row">

        <div class="col-md-3">
          <h6>Chiaro vantaggio del nero come muove?</h6>
          <img src="img/11.png" class="img-responsive" style="Width:80%">
          <p>
            <a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4">
              Risposta
            </a>
          </p>
          <div class="collapse" id="collapseExample4">
            <div class="card card-body">
              ..Ta1!!
            </div>
          </div>
        </div>

        <div  class="col-md-3">
          <h6>Il nero sta meglio come concretizza?</h6>
          <img src="img/12.png" class="img-responsive" style="Width:80%">
          <p>
            <a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample5" role="button" aria-expanded="false" aria-controls="collapseExample5">
              Risposta
            </a>
          </p>
          <div class="collapse" id="collapseExample5">
            <div class="card card-body">
              ..Ta1!!
            </div>
          </div>
        </div>

        <div  class="col-md-3">
          <h6>Un sacrificio del nero da ricordare quale?</h6>
          <img src="img/44.png" class="img-responsive" style="Width:80%">
          <p>
            <a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample6" role="button" aria-expanded="false" aria-controls="collapseExample6">
              Risposta
            </a>
          </p>
          <div class="collapse" id="collapseExample6">
            <div class="card card-body">
              ..Regina su casa h3!!
            </div>
          </div>
        </div>


        <div class="col-md-3">
          <h6>Una mossa fantastica del nero quale?</h6>
          <img src="img/caruanaivanchuk.png" class="img-responsive" style="Width:80%">
          <p>
            <a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample7" role="button" aria-expanded="false" aria-controls="collapseExample7">
              Risposta
            </a>
          </p>
          <div class="collapse" id="collapseExample7">
            <div class="card card-body">
              ..g5!!
            </div>
            </div>
          </div>

          <!--chiudo la riga-->
        </div>

      <!--chiudo container-->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  </body>
  </html>

Conclusione: Bootstrap Framework ci mette a disposizione delle risorse gratuite che é un peccato non sfruttare!

BOOTSTRAP Framework: come risolvere il problema della visualizzazione delle immagini sul mondo mobile

Hai fatto una bellissima applicazione che nelle risoluzioni del mondo desktop vedi alla grande ma che una volta acceso il cellulare sul browser ti fanno cadere le braccia e ti DEQUALIFICANO? Niente paura il framework BOOTSTRAP interviene per ridarti PROFESSIONALITA’. Prendiamo un esempio pratico tratta dalla mia nuova WEB APP in gestazione all’ indirizzo http://umbriawayformazione.altervista.org/ci_project_chess/index.php/chess/bg7. Come fare per ridimensionare l’immagine anche sul mobile e strappare un contratto alla NASA come esperto del mondo ICT a 360 gradi? Premesso che la pagina deve avere tutti i doverosi collegamenti al framework la SOLUZIONE 1 proposta é: intervenire all’ interno del TAG IMG attributo SRC:

<img  src="<?php echo base_url();?>directory/img/<?php echo $res->miaimg ?>" alt="fwd">

inserendo la classe specifica:

class="img-responsive" 

Succede per esempio che il problema continua ad insistere allora la SOLUZIONE 2 proposta é: intervieni sul contenitore che ha al suo interno l’immagine ospitata e trasforma un

<div class="container">

in

<div class="container-fluid">

in questo modo tutto ciò che si trova dentro si adatta. Vedi che anche questa non funziona? Ripristina a contenitore normale come classe e giocatela sulla logica delle dimensioni con la SOLUZIONE 3, applica uno stile interno per dire all’ immagine che deve stare al cento per cento delle dimensioni solo all’ interno del contesto in cui la ospita con:

style="width:100%"

vedi che questa volta dopo un batti e ribatti serrato il tutto ha funzionato? Benissimo! Non è stato necessario nemmeno inserire l’altezza in percentuale perché l’immagine si é adattata in proporzione!

La formazione al contrario, dalla pratica alla teoria: come stravolgere l’approccio classico dello sviluppo web

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.

Fondamenti di web design 20: SASS e le media query annidate

Si conclude questo portentoso scacco matto in venti mosse dato alla professione del web design dove abbiamo attraversato terre misteriose e inesplorate come cavalieri fantasy partendo da https://umbriawaynoir.wordpress.com/2020/12/28/fondamenti-di-web-design-introduzione/ del 28 dicembre ad oggi. Non poteva concludersi che affrontando un argomento scottante, quello del responsive design. Come ci può aiutare SASS nel dimensionare le pagine e certe sue caratteristiche in base agli screen? Con un esempio concreto. Andiamoci a riprendere il codice del post precedente solo per quanto riguarda la formattazione della prima sezione:

 .opzione1 {
    color:$colorselezionato1;

    h3
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:{
            size:30px;
            weight:bold;
            family:verdana;
        }
        @include margin(100px);
    }

    }

Adesso risolviamo il seguente problema: voglio differenziare in base a tre break point diversi la visibilità di un elemento (per esempio H3) in modo che si veda in un modo sul mondo mobile, con una dimensione diversa sul monto tablet e ancora diversificando per le risoluzioni desktop. Soluzione applicando media queries nidificate:

h3 {

@media screen and (max-width:320px) {
font-size:20px
}

@media screen and (max-width:768px) {
font-size:22px
}

@media screen and (min-width:769px) {
font-size:24px
}

}

In questo modo applicando le istruzioni media screen direttamente all’ interno del selettore, quando faccio il ridimensionamento della pagina vedrò l’elemento caratterizzato dall’ inclusione H3 subide drastici ridimensionamenti! A conclusione di questa scorribanda rispetto a tutte le tecnologie visionate con voli dall’ alto per una prima overview (HTML, HTML5 semantico, CSS, SASS, BOOTSTRAP) la nostra forma mentis come futuri sviluppatori frontend developer è cresciuta. Abbiamo fondamentalmente capito che non ha senso studiare “a pappagallo” imparando “a memoria centinaia di informazioni”, ma che ha molto più senso vedere il funzionamento generale in una visione olistica e scendere nel dettaglio per individuare di volta in volta le scomposizioni di interesse. Quando non ci ricordiamo qualcosa ha molto più senso consultare le documentazioni ufficiali offerte a sostegno dalle singole tecnologie piuttosto che inventare l’acqua calda, certamente il W3S, https://www.w3schools.com/ è un buon punto di partenza per uscire dalle sabbie mobili quando siamo in zugzwang, così come https://getbootstrap.com/docs/4.0/getting-started/introduction/ offre supporto per il framework responsive del momento bootstrap!

Fondamenti di web design 19: Sass e la direttiva @MIXIN

Dopo aver visto la direttiva @EXTEND all’ indirizzo https://umbriawayinfo.wordpress.com/2021/01/04/fondamenti-di-web-design-18-sass-e-la-direttiva-extend/ vediamo la direttiva @MIXIN che é più facile da spiegare con i fatti che con le parole. Sostanzialmente inventiamo dei selettori fittizi che andranno poi a sostituire il contenuto di quelli veri, vediamo nella pratica inventando un selettore fantasma che non ha propietà definite in modo chiaro, in quanto i valori di $value sono da riempire:

@mixin margin($value) {
margin: $value;
}

A questo punto dobbiamo associare dei valori a queste proprietà e ciò avviene utilizzando il richiamo dicitura @INCLUDE nella zona del file SCSS dove dobbiamo intervenire nel codice, nel nostro caso richiamando esempi precedenti e modificandoli:

$backgroundselezionato:red;
$backgroundselezionato:rgb(158, 152, 152);
$colorselezionato:#976316;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

@mixin margin($value) {
margin: $value;
}


body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    
a {
color:red;
&:hover {
  color:rgb(94, 255, 0);
}

}

    .opzione1 {
    color:$colorselezionato1;

    h1
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:{
            size:30px;
            weight:bold;
            family:verdana;
        }
        @include margin(100px);
    }


    }
    
    .opzione2 {
            color:$colorselezionato;
            @include margin(50px);
    }
    
    .opzione3 {
            color:$colorselezionato1;
            @include margin(20px);
    }

Quale è il vantaggio di inserire questo meccanismo? Qui i valori del margine sono differenziati ed é facile intervenire velocemente per stilizzare gli elementi della pagina, in quanto basta semplicemente valorizzare in modo diverso le parentesi, come al solito la compilazione automatica che converte in CSS ci mostra la differenza tra i tre margini in modo tangibile:

body {
  background-color: #9e9898;
  color: #976316;
  font-family: verdana;
}

a {
  color: red;
}

a:hover {
  color: #5eff00;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  color: #976316;
  font-size: 30px;
  font-weight: bold;
  font-family: verdana;
  margin: 100px;
}

.opzione2 {
  color: #976316;
  margin: 50px;
}

.opzione3 {
  color: #ccc;
  margin: 20px;
}
/*# sourceMappingURL=stylesass.css.map */