Che cosa spinse Leonardo a scavare nei segreti dell’ anatomia umana? C’è un parallax con i web designer che vivisezionano i template free?

Diciamocelo, vivisezionare siti è una pratica sporca al limite della moralità però in rete esistono molti template free download che si possono utilizzare legalmente e studiare, tutti costruiti con i più moderni framework per rendere responsiva la pagina. Adattarli alle proprie esigenze e scomporre i meccanismi è un processo di studio obbligato se si opera nel settore web development. Prendiamo ad esempio il tema simple house presente all’ indirizzo: https://templatemo.com/tm-539-simple-house che è esclusiva di tutti. La grafica è accattivante, non c’è bisogno di verificare la trasversalità sui vari browser perché basta dare un occhiata al codice per rendersi conto che ha tutte le cose sono al posto giusto: il parallex per rendere la grafica incisiva, jquery per innescare un meccanismo di paginazione inedito (si fa per dire, per chi conosce bene jquery si tratta di pane quotidiano), inclusione di librerie al top per assicurare anche un risultato di visibilità assicurata sul mobile. Insomma abbiamo inventato un sito per esaltare le gesta di grandi campioni di scacchi che furono e vediamo l’effetto che fa. Soprattuto abbiamo (abbiamo chi? Umbriaway Consulting non è composta da un singolo componente? Ci dobbiamo preoccupare?) svelato un mistero inedito, come Leonardo che scandagliava le viscere degli animali ma non solo. Iniziamo dall’ implementazione che ovviamente differisce dall’ originale per i contenuti, indirizzo https://www.farwebdesign.com/simplehouse/

senza farlo apposta recentemente ci siamo messi a guardare (un caso di psicosi multipla ah ah) come javascript apra le porte del dom, vedere in dettaglio https://umbriawaydesign.wordpress.com/2020/05/16/lo-zen-e-larte-di-modellare-il-dom-devi-sviluppare-una-visione-olistica-della-foresta-ad-alta-quota-ma-poi-devi-scendere-e-vedere-il-singolo-albero-da-vicino/ dove si è visto che esistono dei metodi fatti apposta per modellare la gerarchia di oggetti dislocati ad albero nella pagina. Jqueryper operazioni di questo tipo ha un indubbio vantaggio, in quanto con meno righe di codice e con un approccio tempestivo riesce a dare scacco matto al problema. Vediamo che cosa è successo quando ci siamo messi a studiare il tema. Aperta la pagina non si capiva come avviene la paginazione dei primi tre bottoni (Planinc, Bronstein, Tal le altre sezioni sono incomplete e non funzionali per concentrarci sulla meccanica e non sui contenuti) nella sezione centrale del body? C’è qualche script JS che fa esternamente il lavoro sporco? Siamo andati a vedere e nulla. C’è qualche css esterno che in qualche modo rende dinamico il contenuto? Nulla anche qui. Dopo profondi turbamenti siamo andati a vedere meglio la pagina e abbiamo visto che è stato inserito alla fine uno script jquery, proprio prima del body come si conviene alla buona pratica di web design, in quanto prima viene consentito l’intero caricamento della pagina e poi dopo per non rallentare la pagina entra in azione lo script. Vediamo prima la parte statica dei bottoni come è strutturata nella barra di navigazione e quali classi sono coivolte:

<div class=”tm-paging-links”>
<nav>
<ul>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link active”>Planinc</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Bronstein</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Tal</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Morphy</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Geller</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Keres</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Fischer</a></li>
<li class=”tm-paging-item”><a href=”#” class=”tm-paging-link”>Alekhine</a></li>
</ul>
</nav>
</div>

Ci sono in particolare due classi sulle quali soffermarsi la prima del div che è “tm-paging-links” e l’altra all’ altezza delle ancore che é “tm-paging-item”. Adesso diamo un occhiata solo alla prima sezione della galery richiamata per la navigazione dal bottone omonimo, quella relativa a Planinc:

<div class=”row tm-gallery”>
<!– gallery page 1 –>
<div id=”tm-gallery-page-planinc” class=”tm-gallery-page”>
<article class=”col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item”>
<figure>
<img src=”img/gallery/planinc01.jpg” alt=”Image” class=”img-fluid tm-gallery-img” />
<figcaption>
<h4 class=”tm-gallery-title”>Vaganian vs Planinc</h4>
<p align=”justify” class=”tm-gallery-description”>Hastings ENG (1974/75), rd 5, English Opening Symmetrical (A32) 0-1 </p>
<p class=”tm-gallery-price”>il nero muove e vince</p>
</figcaption>
</figure>
</article>

Anche qui ci sono delle cose molto interessanti su cui soffermarsi per esempio: <div class=”row tm-gallery”> e <div id=”tm-gallery-page-planinc” class=”tm-gallery-page”>

di solito se vogliamo inserire il testo in una pagina inseriamo nella maniera statica tradizionale dell’ HTML un sistema ad ancore basate su link del tipo #seguitodanomesezione oppure valutiamo degli iframe sempre di più in disuso, ma qui non ci sono link perché come si vede sopra puntano tutti a a href=”#” senza sezioni aggiunte. Quindi come funziona il meccanismo, sembra una prestidigitazione. A risolvere l’arcano è lo script Jquery, analizziamolo:

<script>
$(document).ready(function(){
// Handle click on paging links
$(‘.tm-paging-link’).click(function(e){
e.preventDefault();
var page = $(this).text().toLowerCase();
$(‘.tm-gallery-page’).addClass(‘hidden’);
$(‘#tm-gallery-page-‘ + page).removeClass(‘hidden’);
$(‘.tm-paging-link’).removeClass(‘active’);
$(this).addClass(“active”);
});
});
</script>

che cosa fa questo malefico script? Intanto richiama la classica ready.function() che significa di caricare prima la pagina e dice al documento di aspettare il rendering prima di fare qualsiasi altra cosa. Poi viene scatenato un evento CLICK con una funzione definita di CALLBACK che mi restituisce per magia la navigazione! Da notare che prima andiamo a catturare la classe dove ci sono i link con $(‘.tm-paging-link’) . La prima cosa che fa questa funzione é e.preventDefault(); andiamo a vedere una delle nostre tante bibbie presenti in rete all’ indirizzo https://www.w3schools.com/jquery/event_preventdefault.asp e cerchiamo di capire meglio: Il metodo event.preventDefault () impedisce che si verifichi l’azione predefinita di un elemento. Immaginiamo quando andiamo in vacanza e chiudiamo il rubinetto del gas, sarà un pò difficile prevedere un incidente casuale visto che abbiamo messo in sicurezza l’impianto. Qui diciamo al bottone di scatenare la sua funzione di callback solo a bocce ferme, in totale consapevolezza che l’utente vuole navigare di sua scelta tra le sezioni. Poi la magia: il passo successivo è con l’istruzione var page = $(this).text().toLowerCase(); di dire prendi il contenuto del link, rendilo tutto minuscolo con la proprietà toLowerCase del metodo di cattura text (che ha molte analogie con innerHTML se non fosse che non accetta i tag come fa invece il suo collega) . Poi lo script prosegue letteralmente con $(‘.tm-gallery-page’).addClass(‘hidden’); ossia vai nella sezione gallery e imposta la classe hidden perchè devi fare qualcosa per me. Infatti alla riga dopo ordiniamo con $(‘#tm-gallery-page-‘ + page).removeClass(‘hidden’); alla gallery di acquisire dinamicamente il nuovo valore della pagina catturando il valore della variabile page definita precedentemente. In questo modo ottengo delle stringhe che diventano da tm-gallery-page- a tm-gallery-page-nomeselezionato ossia in questo caso per esempio tm-gallery-page-planinc. Il più è fatto e possiamo apprezzare ancora una volta la forza prorompente di jquery che prosegue nel suo script semplicemente annulando l’invisibilità, annullando la visibilità della barra di navigazione che rende verde il bottone per segnalarne il focus per finire infine sull’ ultima istruzione che sta a significare, dopo che hai cliccato, hai aggiunto alla cosa il nome dell’ articolo e hai rimosso tutto quello che devi rimuovere attiva finalmente il bottone della mia sezione attiva! Sembra tutto complesso ma in realtà le istruzioni sono procedurali e fanno proprio quello che gli viene imposto di fare. Poi c’è il parallax, ma questa è un’ altra storia! Qui si voleva aprire un cadavere e vedere come funziona un organismo biologico dal di dentro, solo per ritornare al titolo!

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...