Immobilità latente, pericolo costante: perchè l’allenamento quotidiano nella propria disciplina ci sprona a perfezionare la tecnica!

web-design-umbria

Che sia sport, lavoro, passione o attività atipica c’è sempre da imparare quando si esplora e ci si allena a cercare nuove situazioni o soluzioni per chi é dentro al working progress formativo perenne. Quando non ci si allena e ci si ferma si perde l’attitudine al combattimento. Prendiamo i problemi risolti per realizzare la gallery all’ indirizzo https://www.farwebdesign.com/umbriagallery/ allestita per fare un pò di ripasso. Se hai perso l’allenamento con php e mysql un semplice lavoro di poche ore rischia di debordare perchè per strada incontri dei problemi che hai già risolto ma che non ti ricordi bene come risolvere ancora, nello specifico:

web-design-umbriaCome si recupera un valore GET per comporre una pagina che deve servire da allunaggio per quindici elementi che formeranno 15 pagine tutte diverse? Come mai la costruzione dinamica di un link o di una immagine non viene mai risolta al primo colpo quando cerchi di recuperare dei valori da un DB? La paginazione degli elementi è stata allestita per evitare che quindici record scorrano a video come un lenzuolo? Quando estrapolo i dati dalla query per la visualizzazione è meglio incastrare PHP dentro la parte statica HTML quando voglio comporre il div critico intercalando le graffe in chiusura e riapertura nei punti giusti o é meglio creare un unico blocco di codice PHP e sparare tutto l’HTML risultante con il classico comando ECHO?

Tolte le grane iniziali per comporre il DB che tolgono tempo, occorre valutare bene anche l’uso degli strumenti per mettere in piedi una gallery come quella presente su web design Umbria:

 – ok per w3css così per il vestito impariamo altre sfumature nel lavoro del sarto

– ok a visual studio code che sta guadagnando terreno anche tra i concorrenti (il vero professionista usa PHP storm come strumento per editare il codice)

– ok per i contenuti estrapolati sul network umbriaway consulting serviti per comporre il DB e quindi anche tutto quello che c’è dentro la cornice.

– ok anche a pò di passione ed entusiasmo perchè questa gallery in realtà si può riutilizzare con opportuni cambiamenti come struttura base per altri ottantacinquemila progetti!

Quindi la FAMOSA RICETTA PER FARE LA TORTA  prevede come fasi consequenziali:

  • pianificazione idea progetto
  • progettazione del db (nome dei campi, tipo di dati)
  • creazione della grafica per il db
  • scrittura del db come inserimento di dati
  • scrittura del file di connessione e inclusione dello stesso sulla pagina principale
  • recupero dei TAG W3CSS per imbastire la pagina principale
  • individuare la zona critica dove posizionare gli elementi facendo molta attenzione a non alterare la struttura
  • incastrare la nostra query di lettura dati nel punto giusto facendo molta attenzione a dove e come si interviene
  • provare la pagina e imprecare (bonariamente)
  • vedere perchè ci segnala errore da qualche parte: hai inserito una virgoletta di troppo per esempio?
  • Tornare sulla pagina e idolatrarsi con quanto sono figo
  • pensare a come gestire quindici contenuti diversi che al cliccare della pagina mi fanno allunare su un unico punto
  • realizzare un meccanismo di sparo del campo univoco chiave primaria ID che tramite il metodo GET transiterà via link verso la pagina di destinazione
  • recuperare la variabile ID per inserire il valore selezionato nella query di lettura dati dove questa volta comparirà la clausola WHERE id=’$id’ di fondamentale importanza per centrare il nostro obiettivo
  • se andrà tutto bene (ancora?!) allora risolvere il problema paginazione passando prima per un caffè aromatizzato allo zenzero per trovare energie e finire il progetto
  • sistemare link e immagini con php in chiave dinamica

controllo finale e frustrazione anche per non essere riusciti a implementare il meccanismo di selezione arbitrario, ossia l’utente quante immagini deve vedere a video, cosa non facile da fare all’ interno della stessa pagina senza creare diverse pagine con il valore di $limit sempre diverso. Forse è un bene che non sia finito tutto perfetto, perchè in questo modo il cervello continua a rimanere attivo in cerca di risposte!

web-design-umbriaUn applicativo che tanto tempo prima finivate in 4 ore qui ha richiesto dopo tanto tempo di inattività con php e mysql otto ore di scontri con entità digitali ultratterestri non ben precisate. Quindi mai perdere l’allenamento! In ogni caso come chiede il capo di Camelot Artù al suo mago Merlino in Exalibur film degli anni ottanta di Borman, alla domanda Artù quale è la prima qualità di un potenziale sviluppatore frontend (lì si parlava di cavalieri) si risponde con: la sua capacità di recuperare in fretta informazioni che ha già visto e quindi anche spulciare la documentazione e la marea di dati presenti in rete per risolvere un problema, tra cui anche il mitico ospedale simbolico per sviluppatori https://stackoverflow.com/

Final SASS con Funzioni, Placeholder e Import: ma la fine di un viaggio é solo l’inizio!

web design umbriaPer completare un overview didattico con SASS ci mancano le funzioni, i placeholder e gli import. Abbiamo visto come configurare l’ambiente di sviluppo (la parte più complicata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ poi abbiamo scandagliato le variabili https://umbriawayfocus.wordpress.com/2020/05/10/sass-e-le-variabili-come-passare-da-una-fiat-500-a-una-macchina-forgiata-a-maranello/ ci siamo spinti ad analizzare le nidificazioni https://umbriawaynoir.wordpress.com/2020/05/10/nesting-come-nidificazione-ovvero-quando-la-scatola-dentro-la-scatola-ospita-un-altra-scatola-e-il-tutto-si-riduce-in-poche-righe-di-codice/ abbiamo visto i mixins, blocchi di codice riutilizzabili https://umbriawayvendita.wordpress.com/2020/05/10/mixins-sass-e-sai-cosa-bevi/ e infine abbiamo visionato l’estensione delle classi con https://umbriawayvalorizza.wordpress.com/2020/05/11/estendere-le-classi-extend-con-sass/. I blocchi della pagina statica non sono cambiati rispetto alle trascrizioni della pagina precedente per cui limitiamoci a visionare il seguente esempio per le FUNZIONI, indirizzo https://www.farwebdesign.com/projectsass/function/ . Qui la particolarità è che se io sto disegnando una User Interface e voglio focalizzarmi su una serie di elementi che in prospettiva devono rimanere dimensionalmente intonati, posso dare la cera lacca ai capelli con le funzioni. Spiegano meglio la metafora ipotizziamo di avere una header che ospita una intestazione con un font grande sessanta pixel. Se all’ interno di una sezione o di una news sottostante ho un testo che vorrei dimensionare come fisso indipendentemente dalle variazioni che apporterò sulla header, posso impostarlo magari settando una semplice funzione che divide il valore dell’ inestazione per due a prescindere:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color:
mix(blue, green, 10%);

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

.heading {
color: $color-primary;
font-size: $font-lg;
background-color: $color-secondary;
text-align: center;
}

@function fontSize($size: 25px) {
@return $size * 2;
}

h1 {
@extend .heading;

&:hover {
background-color: green;
}
}

.footer h3 {
@extend h1;
}

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

dove da notare c’è:

@function fontSize($size: 25px) {
@return $size * 2;
}

che in questo caso moltiplica per due un valore AUTOMATIZZANDO UN PROCESSO, perchè a questo servono le funzioni, assolvono compiti specifici tra i più svariati come una pubblicità mandata in loop a intervalli regolari su una emittente privata, per esempio. Le funzioni ritornano una serie di istruzioni lì nel punto esatto in cui sono invocate. In particolare la funzione viene richiamata (semplicemente invocando il nome della funzione) in diverse situazioni dove in ingresso sono specificati degli argomenti:

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

per uno più esteso di function con tutte le opzioni disponibili si rimanda alla documentazione di SASS perchè appunto il materiale è vasto e richiede di volta in volta di essere estrapolato nei suoi meccanismi base: https://sass-lang.com/documentation/at-rules/function. Passiamo ai selettori placeholder. Spesso durante la conversione da scss a css potrebbe generarsi codice non strettamente necessario. Per ovviare a questo tipo di situazione entrano in gioco i SELETTORI PLACEHOLDER, esempio https://www.farwebdesign.com/projectsass/placeholder/ . La meccanica di questa direttiva è molto ben spiegata in questo articolo https://www.mrwebmaster.it/css/direttiva-extend-placeholder_12629.html, dove viene introdotto il carattere % per aggirare gli ostacoli sulla estensione della classe, nell’ esempio specifico visto sopra il file scss è infatti:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color:
mix(blue, green, 10%);

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

%heading {
color: $color-primary;
font-size: $font-lg;
background-color: $color-secondary;
text-align: center;
}

h1 {
@extend %heading;

&:hover {
background-color: green;
}
}

.footer h3 {
@extend h1;
}

da notare il @extend %heading; che appunto risolve il problema della ridondanza. Infine parliamo di IMPORT E PARTIAL , esempio https://www.farwebdesign.com/projectsass/import/ ; Proprio come i CSS, Sass supporta anche la direttiva @import. La direttiva @import consente di includere il contenuto di un file in un altro. La direttiva CSS @import ha un grosso svantaggio a causa di problemi di prestazioni; crea una richiesta HTTP aggiuntiva ogni volta che la chiami. Tuttavia, la direttiva Sass @import include il file nel CSS; quindi non è necessaria alcuna chiamata HTTP extra in fase di esecuzione! Una spiegazione chiara di tali principi possiamo ritrovarla qui https://www.w3schools.com/sass/sass_import.asp dove consigliamo anche di seguire i tutorial e l’iniziazionebase su SASS: https://www.w3schools.com/sass/sass_intro.asp . Mettendo in gioco Pareto e wikipedia, il principio di Pareto è un risultato di natura statistico-empirica che si riscontra in molti sistemi complessi dotati di una struttura di causa-effetto. Il principio afferma che circa il 20% delle cause provoca l’80% degli effetti. Questi valori vanno da intendersi come qualitativi e approssimativi. Esso prende il nome da Vilfredo Pareto (1848-1923), uno dei maggiori economisti e sociologi italiani e trova applicazione in una sorprendente moltitudine di ambiti e discipline. Qui il venti per cento di acquisizione sull’ ottanta per cento di esplorazione didattica ce lo siamo portati a casa, in particolare l’aspetto più complicato dell’ intera faccenda SASS è legato alla configurazione dell’ ambiente di sviluppo, vedere prima puntata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ . Superato l’ostacolo CLI dopo è solo sperimentazione di variabili, nesting, mixin, funzioni, import, placeholder e PARTIAL per segmentare il codice, vedere https://www.w3schools.com/sass/sass_import.asp ; sostanzialmente il PARTIAL in SASS compila tutti i file .scss. Tuttavia, quando si desidera importare un file, non è necessario che il file venga trasferito direttamente. Sass ha un meccanismo per questo: se si avvia il nome file con un trattino basso, Sass non lo compila, I file chiamati in questo modo sono chiamati parziali in Sass. Pertanto, un file Sass parziale viene denominato con un trattino basso iniziale.

CONSLUSIONI: abbiamo preso confidenza con uno strumento potente, necessario come arma da integrare nel proprio arsenale di conoscenze web. Sappiamo che l’argomento è molto complesso e ben lontano dall’ esaurirsi da questa trattazione, del resto la documentazione presente in rete per approfondire questi temi non manca. Ci siamo fatti una idea generale del suo funzionamento, abbiamo volato e visto la foresta dall’ alto toccando di volta in volta qualche albero abbassandoci di quota per poi risalire e approdare altrove, abbiamo ritocatto file e provato variazioni di codice, abbiamo costruito una mappa generale e definito il campo di gioco. A questo punto se subentrasse la necessità di integrare (anche) SASS nei nostri progetti sappiamo dove andare a parare. Non ci resta che prepararci per il passo successivo, che è quello di impugnare una lente di ingrandimento, uscire da una visione filosofica olistica e incominciare a vedere i singoli dettagli della corteccia quando dovesse subentrare questa esigenza!

Tali padri tali figli: non è un sermone morale sulla genetica ereditaria, si chiama Flexbox!

Che Flexbox sia potentissimo non ci piove, tecnologia integrata nei CSS che può essere attivata con l’espressione magica display: flex; al posto di quelle letterarie che suonano come abracadabra. Siamo sul versante abbigliamento siti, se vogliamo continuare a metaforizzare lo sviluppo web con l’abbellimento portato dalle regole CSS. Il principale problema di oggi con tanti schermi di diverse dimensioni è quello di riuscire a creare una WEB APP che sia adattabile ed elastica (per l’appunto flessibile) senza compromettere il proprio CV (immaginate come web designer di far vedere un lavoro dove sul mobile si vede in maniera pietosa!). Quindi armiamoci e partiamo con esempi pratici, tenendo presente che posso dare elasticità alle mie strutture anche senza flexbox impostando nei miei fogli stile delle media query nei CSS. Ma perchè sbattersi tanto quando queste media query sono già preimpostate in flexbox? Quello che c’è da sapere sulle matriosche o scatole dentro le scatole sul web e su Flexbox è che i padri contengono ripercussioni sulle regole di stile dei figli se viene attivata l’opzione per l’appunto menzionata sopra che è:

display: flex;

all’ interno dei css. Questa tecnica mi consente di muovermi in maniera verticale e orizzontale su tutta la pagina, esaminiamo la seguente situazione all’ interno di un tag body di una pagina html:

<div id=”parent”>

<div class=”childitem child1″>1</div>
<div class=”childitem child2″>2</div>
<div class=”childitem child3″>3</div>

</div>

qui abbiamo la classica situazione dove abbiamo un elemento identificato come padre dall’ ID e tre figli in esso contenuti.Ora immaginiamo di avere all’ interno della pagina tag HEAD il seguente foglio stile:

<style>

#parent { background: lightblue; padding: 10px;}
.childitem { }
.child1 { background: cornflowerblue; }
.child2 { background: deepskyblue; }
.child3 { background: dodgerblue; }

</style>

L’effetto che fa a video senza flexbox applicato è il seguente:

https://www.farwebdesign.com/projectflex/flexbox1.html

 

proviamo adesso ad attivare la formula magica sul parent odificando le istruzioni in:

#parent { background: lightblue; padding: 10px; display:flex;}

e vediamo a video l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox2.html

 

è cambiato qualcosa? Certo che si, siamo entrati automaticamente in un campo flessibile, basta ridimensionare la pagina per rimpicciolirla per vedere da ora in poi l’effetto che fa. Andiamo avanti nel nostro esperimento e impostiamo una lunghezza per tutti i nostri elementi figli:

.childitem { width:100px }

vediamo l’effetto che fa dal vivo e nella pratica:

https://www.farwebdesign.com/projectflex/flexbox3.html

 

e se volessi cambiare direzione e posizionare i miei elementi figli incolonnati uno sopra l’altro? Entra in scena una nuova proprietà sul foglio stile del parent: flex-direction: column; vediamo l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox4.html

 

pe ritornare a posizionare tutti gli elementi su una stessa riga posso settare: flex-direction: row; o anche semplicemente inibire le funzionalità anteponendo flex-direction: nocolumn; e analogamente per la riga flex-direction: norow; posso anche invertire il valore degli elementi e rovesciarli impostando la direzione con un reverse, sia per la riga o per la colonna quindi con un flex-direction: row-reverse; o anche flex-direction: column-reverse; vedere ad esempio cosa succede nel caso di una colonna:

https://www.farwebdesign.com/projectflex/flexbox5.html

 

vediamo anche l’esempio per la riga:

https://www.farwebdesign.com/projectflex/flexbox6.html

 

posso anche impostare una lunghezza fissa al parent e aggiungere altri figli per vedere l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox7.html

 

Impostando la proprietà wrap a flex-wrap:wrap; posso far scorrere gli elementi della riga sotto durante il ridimensionamento:

https://www.farwebdesign.com/projectflex/flexbox8.html

 

sul wrap posso anche reimpostare una lunghezza fissa del parent, per cui quello che fa il wrap diventa più visibile:

https://www.farwebdesign.com/projectflex/flexbox9.html

 

naturalmente impostando la proprietà wrap a no wrap con flex-wrap:nowrap; tornerei a vedere a video:

https://www.farwebdesign.com/projectflex/flexbox10.html

 

intuitivamente sappiamo anche che applicando la proprietà flex-wrap:wrap-reverse; possiamo rovesciare il contenuto degli elementi figlio:

https://www.farwebdesign.com/projectflex/flexbox11.html

 

Abbiamo visto che direzione e contenuti wrap, ossia spalmati su tutta l’area della pagina sono molto potenti. Ma c’è un modo di combinare queste due proprietà in un unica property? Si con flex-flow:row wrap; il flusso prende due parametri successivi, vediamo un esempio per la riga:

https://www.farwebdesign.com/projectflex/flexbox12.html

 

e per la colonna:

https://www.farwebdesign.com/projectflex/flexbox13.html

 

ovviamente impostando il flusso a no wrap flex-flow:column nowrap; vedrei:

https://www.farwebdesign.com/projectflex/flexbox14.html

 

e impostando lex-flow:row nowrap; per la riga vedrei invece:

https://www.farwebdesign.com/projectflex/flexbox15.html

 

a questo punto vediamo cosa fa la proprietà justify-content:flex-start;

https://www.farwebdesign.com/projectflex/flexbox16.html

 

cioè in sostanza posso modellare gli elementi sulla singola riga con larghezze variabili e spaziatura. Vediamo cosa fa justify-content:flex-end;

https://www.farwebdesign.com/projectflex/flexbox17.html

 

e per centrare un elemento? Si usa justify-content:center;

https://www.farwebdesign.com/projectflex/flexbox18.html

 

e per dare una spaziatura? Si usa justify-content:space-between;

https://www.farwebdesign.com/projectflex/flexbox19.html

 

o anche l’aternativa justify-content:space-around;

https://www.farwebdesign.com/projectflex/flexbox20.html

 

posso anche impostare una nuova prprietà a tutti i figli con .childitem { flex-basis:300px;}, in questo modo posso differenziare le mie esigenze dimensionali perché potrei avere l’esigenza di allargare o restringere in futuro alcune aree del mio lay-out:

https://www.farwebdesign.com/projectflex/flexbox21.html

 

a questo punto per differenziare la grandezza delle mie celle su una riga applicherò sui figli la proprietà flex-grow:1; ipotizzando che voglio ingrandire quella centrale inserirò la proprietà nel figlio medio e lascerò che il primo e terzo elemento si prendano la dimensione base in pixel specificata da .childitem { flex-basis:300px;} , per esempio:

https://www.farwebdesign.com/projectflex/flexbox22.html

 

esistono tante altre proprietà da scandagliare come flex-shrink per regolare l’ampiezza sui ridimensionamenti , non a caso shrink significa CONTRARSI, per esempio:

https://www.farwebdesign.com/projectflex/flexbox23.html

 

Alla fine di questa scorribanda abbiamo capito che FLEXBOX strumento integrato all’ interno dei CSS è davvero potente e per l’appunto flessibile. Come dice il saggio, mi piego ma non mi spezzo, non è una esaltazione alla resilienza tanto decantata in questi angusti tempi moderni, ma un invito a studiare offerto da FLEXBOX per chi ha interesse a potenziare il suo cv di web designer! Ricordiamo che CSS e FLEXBOX si possono usare congiuntamente a seconda delle circostanze, per la migliore resa delle nostre pagine web! Good discovery!

Crea un sito o un blog gratuitamente presso WordPress.com.

Su ↑