Glocal un progetto in …working progress
Riassunto delle puntate precedenti
Il periodo è caratterizzato dal punto di vista professionale da schiaffoni rubicondi, ormai nel mio caso non si parla più di resilienza ma di immortalità acquisità anche se vivo in un mondo alternativo opalescente da romanzo di fantascienza! Dopo un pò le creature degli abissi sviluppano la sconcertante capacità di adattarsi anche in contesti…particolari, ma in questo caso quando ti tolgono qualcosa (per la seconda volta quelli del CED di Macerata e di Adecco sono riusciti a discriminarmi per l’ammissione a un corso che avrei voluto fare a causa probabilmente della mia età anagrafica o di altre incapacità acquisite). Di fronte a questi “sgarbi” del modello globalizzato non resta che rispondere con i fatti e con rinnovato impegno per dimostrare che le loro valutazioni di mummificazione discriminanti sulla mia figura sono in realtà frutto di errate e infelici accostamenti. Per la serie come incanalare rabbia e infelici incazzature in favore di una crescita professionale! Intanto se vogliamo citare anche un film potremmo parlare di Qualcosa è cambiato con Jack Nicholson perchè si notera che il titolo da questo report si mostra con una differenza sostanziale pur restando sempre uguale. Segno che la nostra WEB-APP è arrivata a un punto di svolta!
Elenco moduli
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/areas
Elenco Articoli
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/posts
Ritrovata la motivazione per RI-partire? Bene allora cosa c’è di nuovo?
Abbiamo fatto cose nuove perchè c’è molto da lavorare per rafforzare il mio cv da web designer e portarlo verso quello di web developer! Per esempio questo modulo esterno con JS che fa il monitoraggio e traspone con i numeri l’impegno nelk quotidiano può diventare una felice integrazione con una tecnologia lato server come il framework codeigniter? Parliamo di:
http://umbriawayformazione.altervista.org/uwcode/glocal_counter/
Poi però abbiamo scoperto che JavaScript (lato client) e PHP stanno bene insieme, infatti è nata anche una nuova sezione dinamica dove i valori vengono passati grazie a una tabella di supporto:
http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/info
Qui è possibile sapere tutto dell’ applicazione, vita, morte e miracoli, un ciclo di vita che si concretizza estrapolando ore e giorni lavorati, cose fatte e in che quantità e persino il volume di crescita dell’ applicazione espresso in MB! Come si può vedere il glocal_counter con html+css+js+php+mysql è l’apeteosi della commistione valorizzata tra più tecnologie che cooperano all’ unisono in un MECCANISMO FONDAMENTALMENTE SEMPLICE DA STUDIARE con un approccio leonardesco (intendo la sua concezione di macchina, non certo il suo genio). Quindi vediamo come si esplica il totale di ore lavorate per esempio
Il Glocal Counter, come funziona?
Bella domanda, Leonardo sarebbe uscito di testa come entusiasmo per vedere quale magica interazione corre tra JS e CSS in questo script, vediamo il pezzettino di HTML statico che tira fuori le ore lavorate per esempio:
<div class="nome-container">
<i class="fas fa-user-clock fa-5x"></i>
<div class="timecounter" data-target="<?php echo $array->hour ?>"></div>
<h4>Ore lavorate sul progetto fino al <?php echo $array->time ?></h4>
</div>
Il database dal modello spara i dati al controller che spara i dati alla vista che materializzerà i frammenti di tabella (campi) interessati per una rappresentazione a video grazie alla logica degli array. Infatti rispetto al codice visto sopra, dobbiamo pensare che prima del div iniziale e dopo la fine del div dell’ ultima riga abbiamo i delimitatori di un ciclo FOREACH / ENDFOREACH che di fatto non fa altro che stampare a video i record nel punto indicato (istruzione echo). Javascript per fare le sue interazioni si appoggia interamente sul CSS che modella il nome delle classi dei DIV, vediamo la sua psicoespressione:
const counters = document.querySelectorAll('.timecounter')
counters.forEach(counter => {
counter.innerText = '0'
const updateCounter = () => {
const target = +counter.getAttribute('data-target')
const c = +counter.innerText
const increment = target / 200
if(c < target) {
counter.innerText = `${Math.ceil(c + increment)}`
setTimeout(updateCounter, 1)
} else {
counter.innerText = target
}
}
updateCounter()
})
Qui ci sono molte cose interessanti da analizzare e da acquisire per capire JS a un primo livello. L’istruzione:
document.querySelectorAll
è come una pinza meccanica (immaginiamo una autorimessa con vecchie auto da rottamare in una zona predisposta, per questo abbiamo citato in precedenza Leonardo, per la sua passione per le macchine) che va a identificare tutt gli elementi di classe definiti come timecounter. La costante dichiarata con const andrà ad agire in quell’ ambito di identificazione. Il contatore ovviamente parte da ZERO. A questo punto si capisce che per far scorrere un range di numeri avrò bisogno anmche di una costante che rappresenta il punto di arrivo per il ciclo che scorre e stampa a video i valori, per cui entra in scena una costante TARGET che va a prelevare l’informazione scritta nel data-target , ossia il valore finale da mostrare a video. A questo punto entrano in scena due nuove costante C che rappresenta il punto di inizio per lo scorrimento e INCREMENT che deve far ruotare il tutto fino al valore TARGET. Poi intuitivamente come va da sè pensare che ciclando tutte le mie costanti ottengo lo scorrimento dei dati! Da notare che c’è anche una funzione CEIL che di fatto restituisce un intero. FACILE NO? Lo script è molto utile perchè sono i numeri a determinare se qualcosa funziona oppure no in termini di sviluppo e di crescita da monitorare! ATTENZIONE: lo script va messo in un punto preciso della pagina altrimenti non funzionerà, sta allo sviluppatore di buona volontà scoprire dove!
Mosse a tripla funzionalità!
Ok è proprio il caso di dire che GLOCAL sta ripartendo. Da un lato possiamo migliorare le nostre applicazioni e imparare cose nuove rafforzando il CV, dall’ altro possiamo investigare qualcosa sui contenuti (se c’è la storia di mezzo ricordiamoci che la scrittura creativa è sempre viva sotto le ceneri) e dall’ altro possiamo anche stare meglio con il fisico, visto che il portale parla di ecologia, trekking e alla fine anche di salute (indirettamente). Di solito negli scacchi ci sono mosse a doppia funzionalità, ma qui con GLOCAL, http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview , si va oltre! A prposito, visto che dobbiamo studiare meglio JavaScript e il modo migliore di farlo é USARLO NELLA PRATICA, abbiamo tanto per iniziare scaldato i motori a http://umbriawayformazione.altervista.org/ci_project_glocal/index.php dove abbiamo caricato l’evento OLOAD con un ALERT direttamente nel BODY:
<body onload="alert('Benvenuti nel progetto di valorizzazione territoriale Glocal!')">
questa riga di codice è più elegante rispetto al tradizionale:
<script>
alert ('benvenuto');
</script>
Cosa bolle in pentola nella prossima puntata?
All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/colle_slider/ ne abbiamo combinata un’ altra, abbiamo messo in piedi per motivi didattivi un efficace background-slider, si tratterà di vedere in dettaglio come funziona nella pratica. Per esempio una istruzione come:
document.getElementById("start").innerHtml='scrivi questo testo in corrispondenza di un punto preciso';
può sparare come una pistola il testo desiderato in corrispondenza di una zona precisa che posso posizionare dove voglio con:
<div id="start"></div>
JavaScript è case sensitive e usa la classica notazione di scripting a gobba di cammello caratterizzata dalla prima parola chiave minuscola seguita subito dopo da una maiuscola. Per concatenare le stringhe non usa il punto come php ma il simbolo +; le variabili locali all’ interno di una funziona non sono riutilizzabili mentre quelle esterne definite globali si.
CONCLUSIONI
Malgrado riscontriamo ancora problemi con i protocolli di sicurezza sul sito hosting che ci ospita (da risolvere), di fatto dopo qualche inevitabile esperienza che ci vede parte angherizzata e oppressa dalla BCE a pozzanghere liquide (mitica rimane la selezione di fine febbraio dove prima ti dicono di richiamare dopo il superamento del primo step e poi ti bollano come eretico, bravi SPRING PINKO PALLO!) come da modello economico espresso da Bauman, siamo riusciti seppure ancora barcollanti a rimetterci in carreggiata. Basta vedere anche i contenuti espressi da questo articolo e confrontarli con quelli più scarni e di circostanza delle puntate precedenti. Segno che la WEB APP GLOCAL ottimizzata per risoluzione DESKTOP sta crescendo, malgrado tutto, su tutta la linea e gli argomenti da approfondire sono tanti, tipo il DOM per esempio che ci consente di modificare dinamicamente gli elementi-nodi della pagina!
Prossimo obiettivo legato a GLOCAL: rinforzare JS con un corso Udemy da completare nei prossimi giorni, con materiale da studiare e riadattare per le esigenze pratiche!
