Vincere a 2.757 metri con Codeigniter è fattibile? Forse ti confondi con il Giro d’Italia, ma il web developer é come un ciclista che tenta una scalata conoscitiva: per esempio il CRUD è alla tua portata?

Il CRUD per gli sviluppatori é come il santo Graal nelle leggende di Re Artù: l’acronimo sta per CREATE-READ-UPDATE-DELETE. Si tratta di una estrapolazione e di una gestione dei dati dal database che riguarda come esercizio muscolare una delle prime attività di qualunque web developer, tanto per restare in tema di ciclismo. Codiigniter è abbastanza ostico all’ inizio (ma sempre meno complicato da assimilare rispetto a Laravel per esempio) per cui se la sensazione é quella di non riuscire a fare la salita dello Stelvio per transitare per primo alla Cima Coppi e magari vincere la tappa, conviene fermarsi, rifornirsi di bevande e mantellina e consolidare quello che è ormai base tecnica consolidata. Ripassiamo quindi i fondamentali prima di affrontare la questione del crud perchè sappiamo che la salita richiede zuccheri e si rischia di andare come si dice in gergo, quando si tenta di studiare una nuova tecnologia, FUORI RUOTA, come dicono i commentatori della Rai a gara sportiva in onda. Abbiamo detto che conviene concentrarsi su questo framework perchè offre un set di strumenti da coltellino svizzero integrati in unico ambiente di sviluppo, così a sostegno ci ritroviamo numerosi helper o funzioni specifiche utili per risolvere problemi e librerie per attingere a risorse esterne come il famoso database per esempio. Abbiamo sottolineato più volte l’importanza di separare lo scheletro umano dalla muscolatura e dai vestiti che lo compongono, per cui il vantaggio di questa gestione é che tutto è circoscritto alla sua natura strutturale, per cui avremo un Modello che si occuperà della parte logica di gestione dei dati per esempio, avremo una View che non farà altro che visualizzare le nostre richieste a video e in mezzo abbiamo il nostro bel CONTROLLER che dobbiamo considerare come un gigantesco pannello di controllo che attinge dal Model per riconsegnare alla Vista. In questo modo tutto è ordinato e pulito a livello di sviluppo e anche più facile mettere in piedi degli applicativi risparmiando un sacco di tempo. Per imparare Codeigniter bisogna avere conoscenza livello base di php procedurale e un pò di OOP insieme a CSS, HTML e anche Bootstrap per abbellire i nostri vestiti. La ricchezza di funzionalità subito disponibili in uno strumento veloce consentono davvero un gran risparmio di tempo. Per lavorare con codeigniter è sufficiente scaricare un server locale che abbia integrato apache e mysql in modo da parserizzare i nostri file php e un editor di codice e ovviamente il pacchetto completo. Quindi per il localhost che serve alle nostre pagine scaricare https://www.apachefriends.org/it/index.html, per un editor visuale abbiamo cose del tipo ATOM, SUBLIME o VISUAL STUDIO CODE scaricabile all’ indirizzo: https://code.visualstudio.com/ e infine il nostro framework si trova all’ indirizzo https://codeigniter.com/ ; adesso ripassiamo i fondamentali perchè lavorare e sviluppare con procedurale è un conto e invece diverso é l’approccio MVC con la definizione di classi e metodi costruttori. Si lavora prevalentemente solo sulla cartella APLLICATION di codeigniter che guarda caso contiene anche una cartella VIEW e una MODEL oltre a quella CONTROLLER! La cartella Sysytem è considerata il core di sistema ed é quella che fa girare il tutto ma é anche un luogo fisico dove non dovremmo mai intervenire. Dentro la cartella Appllication abbiamo la cartella CONFIG e al suo interno molti file critici di configurazione e settaggio come:

database.php
config.php
routes.php
autoload.php

che consentono rispettivamente aggancio al DB e quindi gestione su database mysql, definizione di path sulle url, instradamenti e caricamenti automatici di risorse , ovviamente richiamabili anche da codice scritto normale. Il modello offre le pallottole al caricatore, la pistola controller spara verso la vista e viceversa ritorna i dati su eventuali interazione dell’ utente al controller che andrà a interrogare il modello per farsi restituire dei dati da ri-spedire al mittente. Diamo meglio una occhiata su questo flusso analizzando l’architettura seguente:

L’utente invia una richiesta dalla vista o finestra o browser che viene instradata seguendo criteri di sicurezza per arrivare infine al controller che potremmo considerare una sorta di mago Merlino della situazione. Merlino va a socmodare i suoi amici al di là del muro, gente che lutente finale non vedrà mai che sono:

Model
Librerie
Helpers
Plugins
assets (risorse grafiche)
scripts
etc

una volta prese tutte le info pertinenti alle richieste mette tutto insieme e assembla e spedisce tutto alla vista che sfruttando il CACHING restituisce il risultato richiesto all’ utente. Bello no?!

Semplificando io chiedo il controller restituisce prendendo i dati a destra e a manca come una piovra, per cui é da considerarsi come un vigile che controlla il traffico, ma il lavoro sporco lo fa il MODEL mentre la vista è quella che fa la preziosa senza lavorare se non offrire modo all’ utente di interagire. A questo punto diamo un occhiata anche allo schema del flusso.

Con questo schema se io scrivessi nella funzione index del controller Welcome di default dopo lo scaricamento qualcosa del tipo:

public function index()
{
echo “fantastico adesso posso personalizzare i contenuti a mio uso e consumo!”;
//$this->load->view(‘welcome_message’);
}

che cosa accadrebbe? Semplicemente che Codeigniter mi direbbe picche (ci sarebbe un messaggio di errore) perché la mia istruzione procedurale non segue la logica MVC, se volessi scrivere una bella scritta simile andrei sulla welcome_message.php, commenterei le parti statiche di HTML e magari con un h1 inserirei la scritta personalizzata di cui sopra. Il fatto è che la funzione index reindirizza il flusso verso la view. Quindi lo schema é:

LOCALHOST seguito dal nome del CONTROLLER seguito dal nome del METODO (nome della funzione) seguito da FUNZIONE 2 e infine dai PARAMETRI

Il controller gestisce le richieste, il model manipola i dati e fa da CPU e la vista fa la presentazione all’ utente. Adesso vediamo il CRUD. Prima di entrare nel crud vero e proprio andiamo sulla nostra drogheria preferita: https://www.grocerycrud.com/

Che cosa è questa cosa?

E’ un modo per non tribolare molto per mettere in piedi un CRUD veloce, pertanto in questo articolo lo testeremo con uno scacco matto in dieci mosse!

Mossa numero 1, scaricare codeigniter

Mossa numero 2, scaricare grocerycrud

Mossa numero 3, decomprimere i due pacchetti e prelevare la cartella APPLICATION di grocerycrud sovrascrivendo quella di codeigniter con lo stesso nome (copia e incolla); fare la stessa operazione anche per la cartella ASSETS altrimenti ci darà errore

Mossa numero 4, configurare il database come sappiamo interagendo su database.php e scrivendo i 4 parametri che sono server, utente, pwd e nome database

Mossa numero 5, definire un nuovo controller chiamato Main nel file main.php

Mossa numero 6 scrivere all’ interno del controller il seguente codice:

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

class Main extends CI_Controller {

function __construct()
{
parent::__construct();

/* Standard Libraries of codeigniter are required */
$this->load->database();
$this->load->helper(‘url’);
/* —————— */

$this->load->library(‘grocery_CRUD’);

}

public function index()
{
echo “<h1>Welcome to the world of Codeigniter</h1>”;//Just an example to ensure that we get into the function
die();
}

public function western()
{
$crud = new grocery_CRUD();
$crud->set_table(‘western’);
$output = $crud->render();

$this->_example_output($output);
}

function _example_output($output = null)

{
$this->load->view(‘our_template.php’,$output);
}
}

/* End of file Main.php */
/* Location: ./application/controllers/Main.php */

 

Mossa N 7, creare una vista di nome our_template.php

Mossa N 8 scrivere le seguenti info nel file vista:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />

<?php
foreach($css_files as $file): ?>
<link type=”text/css” rel=”stylesheet” href=”<?php echo $file; ?>” />

<?php endforeach; ?>
<?php foreach($js_files as $file): ?>

<script src=”<?php echo $file; ?>”></script>
<?php endforeach; ?>

<style type=’text/css’>
body
{

font-size: 14px;
}
a {
color: blue;
text-decoration: none;
font-size: 14px;
}
a:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<!– Beginning header –>
<div>
<a href='<?php echo site_url(‘examples/offices_management’)?>’>Offices</a> |
<a href='<?php echo site_url(‘examples/employees_management’)?>’>Employees</a> |
<a href='<?php echo site_url(‘examples/customers_management’)?>’>Customers</a> |
<a href='<?php echo site_url(‘examples/orders_management’)?>’>Orders</a> |
<a href='<?php echo site_url(‘examples/products_management’)?>’>Products</a> |
<a href='<?php echo site_url(‘examples/film_management’)?>’>Films</a>

</div>
<!– End of header–>
<div style=’height:20px;’></div>
<div>
<?php echo $output; ?>

</div>
<!– Beginning footer –>
<div>Footer</div>
<!– End of Footer –>
</body>
</html>

 

Mossa N 9 , verificare che il nome tabella sia giusto:
$crud->set_table(‘western’);

 

Mossa N 10 guardare l’effetto che fa all’ indirizzo:
http://localhost/your_project/index.php/main/western

 

Semplicemente fantastico questo Grocery CRUD FREE scaricabile all’ indirizzo https://www.grocerycrud.com/ ! Funziona tutto , la modifica, l’addizione di dati, la cancellazione, lo abbiamo provato aggiungendo per un pugno di dollari e lo straniero denza nome ed é tutto ok! Il tutorial for dummies non spiega tutto in maniera lineare all’ indirizzo https://www.grocerycrud.com/documentation/create-crud-codeigniter-tutorial/ e qui abbiamo sperimentato la procedura del PRENDO TUTTO IL CONTENUTO IN DOWNLOAD DI GROCERY CRUD E LO COPIO SOPRA LE STESSE CARTELLE DEL CONTENUTO SCARICATO CON IL FRAMEWORK ORIGINALE DECOMPRESSO! Risultato tutto ok, attenzione anche alla parte della pagina statica che nell’ HEAD cicla le risorse ASSETS:

<?php
foreach($css_files as $file): ?>
<link type=”text/css” rel=”stylesheet” href=”<?php echo $file; ?>” />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src=”<?php echo $file;?>”></script>
<?php endforeach; ?>

 

 




Codeigniter + Bootstrap una accoppiata vincente: parte IV completare le basi del nostro progetto WESTERN MVC!

Ok dopo aver visto nella prima puntata una overview generale su Codeigniter, cercando gli strumenti iniziali per iniziare, individuando i link dove scaricare le nostre cose (vedere https://umbriawaydesign.wordpress.com/) dopo aver bucato la pagina con i dati che é un azione per l’aspirante sviluppatore simile all’ allunaggio terrestre di Amstrong e perfezionato il vestitino della domenica per dare usabilità e interazione all’ utente (vedere puntate due e tre su https://umbriawaydesign.wordpress.com/) completiamo questa prima parte sulle basi di codeigniter inserendo la quarta sezione, quella della responsività, quindi torniamo a fare il mestiere del web designer e non quello del web developer! La parola magica per chi costruisce web application si chiama RESPONSIVITA’, ossia la capacità di vedere la mia APP su tutti i dispositivi dal più piccolo al più grande. Le media query con i loro breack point dovrebbero risolvere ma perché non integrare nei nostri progetti il potentissimo framework grafico BOOTSTRAP che divide le pagine in lunghezza in dodici colonne a prescindere dalle dimensioni? In questo modo siamo a cavallo, tanto per restare in tema western con personaggi diventati icona di genere a Los Angeles come John Wayne e registi come Ford o il nostro Leone in Italia. Per fare un albero ci vuole un fiore e quello ce lo abbiamo, visto che il motore con mysql contiene la nostra magica tabella di prova western (la progettazione seria di un DB è un’ altra cosa, non a caso esistono nelle aziende enterprise figure professionali addette solo a questo mestiere come il DB administrator per esempio) e visto che siamo riusciti a creare un pannello di controllo (che è un dono di CODEIGNITER e del suo paradigma MVC) dove il VOLANTE trasferisce da destra a sinistra la nostra vettura lungo la strada (la parte logica del MODEL invia i dati filtrati al controller che con il metodo LOAD carica le pagine di informazioni dinamiche richieste dall’ utente) che va ad esaurire e risolvere gli input sulla grafica , adesso siamo in grado di abbellire e rendere funzionali le nostre applicazioni integrando il framework bootstrap o con CDN o scaricandolo e poi puntandolo in una cartella locale. L’utilità non è solo quella di risolvere la responsività, ma anche di poter disporre di un coltellino svizzero o set di strumenti che ci semplificano la vita, vedere per esempio il problema del recordset verticale che avevamo nella terza puntata citata agli indirizzi di cui sopra. Per cui come si risolve? Il lay out usato prevede una colonna centrale settata con <div class=”col-sm-8 text-left”> quindi vedendo tre colonne intuitivamente siamo in grado di rispondere anche alla domanda non detta ma quante sono larghe le colonne laterali? Ovviamente due ciascuna visto che il tutto tocca il dodici. Ora esiste un componente che si chiama CARD in bootstrap che abbraccia i nostri dati dentro delle cornici specifiche disegnate con classi predefinite che ci consente di spalmare il nostro set di dati non tutto in verticale rendendo la vita di chiunque utente impossibile a causa dello scrolling, ma in orizzontale. Tuttavia per fare questa operazione dobbiamo pensare di dividere quello spazio da otto magari con due colonne, in modo che i dati non finiscano uno sopra l’altro ma si dividono tra le colonne (nel nostro caso le card si configurano automaticamente tre per colonna) con la dicitura <div class=”col-md-2″ > ovviamente il punto di inizio del trasferimento dati e quello finale devono abbracciare solo il componente card la cui parte statica è facilmente reperibile dal sito ufficiale GETBOOTSTRAP dove siamo andati a scaricare il tutto (oppure no, visto che i CDN ci risolvono alcune questioni). In definitiva abbiamo costruito le basi in pochissimo tempo per una applicazione da rendere completa, perché è chiaro che dovremmo implementare le sessioni, magari costruire un LOGIN, oppure creare altre pagine di approfondimento e magari anche sviluppare il nostro DB in maniera più organica con altre colonne da inserire a sostegno visto che la ripetizione dei registi ad esempio nella nostra tabella è considerata ridondanza. Però la struttura base adesso c’è ed esiste e costituisce una perfetta base di lancio per andare oltre la LUNA!




Ma tu ce l’hai un Santo che ti sta simpatico? San Biagio non smettere mai di illuminare le nostre esistenze con la tua birra!

web developer umbriaChi fa TURISMO DI PROSSIMITA’ (quella tipologia di turismo che risponde alla domanda base: ma prima di vedere Londra, Parigi e Los Angeles sai dire quali bellezze hai sotto casa?) sa bene che prima o poi quei sette km inediti che da Colle di Nocera Umbra lo separano da frazione Lanciano si dovranno fare, se non altro per soddisfare un peccato che è irrinunciabile almeno una volta nella vita: consumare i prodotti locali del birrificio artigianale dell’ antico monastero! Sul sito https://www.birrasanbiagio.com/ il claim della birra artigianale non filtrata e non pastorizzata promette bene, infatti lo slogan richiama la nostra attenzione: LA PRIMA BIRRA ARTIGIANALE ITALIANA D’ISPIRAZIONE MONASTICA NUTRIMENTO PER IL CORPO E PER LO SPIRITO! E in effetti qualcosa ci ha colpito, inerpicandoci su fino a Lanciano a quindici minuti da Colle di Nocera Umbra a sette km di distanza, su quella collina dove il turismo è sempre dinamico a corredo del birrificio con una struttura di accoglienza che assicura pace e benessere: il profondo silenzio che si respira immersi tra le verdi colline umbre, una profondità che annulla ogni turbolenza dell’ anima e onda fragorosa del mare dei pensieri con un ascolto che sprofonda negli eoni. Si sta bene in questa località Lanciano 42, cap 06025 comune di Nocera Umbra (PG) . Non a casa nei depliant che promuovono varie iniziative locali ce ne una che ben si addice al luogo: “vacanza nel silenzio”, seguita dalle peculiarità del soggiorno. Ancora una conferma che il paradiso esiste ed è qui sulla terra ora, tesi convalidata dalla degustazione delle birre variegate prodotte da Mastro Birraio! San Biagio quindi assicura rigenerazione e benessere con il suo taglio di birreseo specialist umbria prodotte che sono MONASTA, JUBILO, AURUM (una superba doppio malto che abbiamo apprezzato), AMBAR, GAUDENS e VERBUM, nomi esplicativi che ben esprimono l’incipt del claim citato sopra. Birre chiare, ambrate, scure e al doppio malto, insomma ce ne per tutti i gusti! Il posto è fantastico, puoi degustare tutto quello che vuoi all’ aria aperta in piena libertà e le persone qui sono gentili e cordiali se non altro per qualche forma di solidarietà non scritta con il santo che li ospita. Chissà se tra le varie attività organizzano anche i corsi di Yoga, la cornice sembrerebbe in sintonia e la location sembra ammorbidire anche il segnalato sul sito dell’ FBI più pericoloso in circolazione. Un posto indubbiamente magico che ti fidelizza e che non vuole giacere nel dimenticatoio: se ci vai una volta, difficilmente sarà l’ultima se abiti nei paraggi! Per quanto riguarda il prodotto sfornato da https://www.birrasanbiagio.com/ l’ennesima riconferma del connubio felice tra brand e valorizzazione del territorio. Lo avevamo già notato ieri recandoci a Rasiglia per esplorare la Valle di uno dei tanti fiumi importanti locali che si chiama MENOTRE dove i prodotti del pastificio locale che prende il nome della Valle costituiscono una eccellenza del territorio unica ed esclusiva, anche da giustificare con la qualità un costo lievemente sopra l’ordinario. La sensazione è che Mulholland Drive sarà anche fonte di ispirazione per film cult e Los Angeles è un bel luogo da vedere ma di posti belli per chi vive in Umbria che stanno appena dietro l’angolo, uno non deve neanche sbattersi più di tanto per trovarli! Grazie San Biagio a te e alle tue birre per lasciare aperta quella porta alla tentazione alcolica che è solo una scusa per fare TURISMO DI PROSSIMITA’ e il fatto che le tue miracolose bottiglie da 750 ml comunque si fanno pagare oltre l’ordinario non deve essere di scoraggiamento al novello Magellano che potrà così compensare il suo alleggerimento in euro con la vista di scenari naturali portentosi! Lode a te nostro Santo Prediletto! Info https://sanbiagio.net/ e https://www.iluoghidelsilenzio.it/abbazia-di-san-biagio-lanciano-di-nocera-umbra-pg/




Colazione da Tiffany? No in località Rasiglia!

web design umbriaPer chi ha visto https://it.wikipedia.org/wiki/Colazione_da_Tiffany_(film) , sappiamo che la protagonista, una affascinante Audrey Hepburn, consuma una veloce colazione angolizzando le vetrine di Tiffany. Invece noi abbiamo scelto di consumare la colazione in zona Colfiorito dove esiste un piccolo borgo antico che ha fatto dell’ acqua la sua leva motivazionale-imprenditoriale. La piccola Venezia dell’Umbria in riferimento a Rasiglia, https://www.comune.foligno.pg.it/articoli/la-favola-di-rasiglia, come spot pubblicitario è decisamente eccessivo ma funziona alla grande se alle sei del mattino un gallo o un piccione ti sveglia a Colle di Nocera Umbra per costringerti a colpi di testa imprevedibili! Così senza sapere bene perchè all’ improvviso ti si accende una lampadina: vado a prendere un caffè a Colfiorito, se non altro per scappare da questi piccioni irrispettosi che sballano gli orari concordati per la sveglia e finalmente dopo una miriade di condizionamenti in loop dei media mi vedo una Rasiglia inedita visto che al mattino molto presto c’è poco movimento turistico! seo specialist umbriaDa notare che recentemente un servizio su una emittente locale ha esaltato la nuova frontiera degli escursionisti amanti della montagna, mostrando un bellissimo reportage sul Pale che è più vicina da Foligno rispetto alla nostra meta e propone itinerari di immersione nella natura rigeneranti. Ma Rasiglia è una Boschetto moltiplicato per due, magari molto curata e raggruppata, ma allora come mai Boschetto non la chiamano l’Amsterdam Umbra? Parliamo di Rasiglia come di un piccolo borgo che ha saputo sfruttare le sorgenti del fiume locale Capovena e che nel corso della storia è sempre stato al centro dell’ economia con filande, mulini e frantoi, alimentati e rinvigoriti dall’ essenza vitale della divinità fiume. Non c’è da stupirsi che già nel 1300 con i signori folignati dei TRINCI si sviluppò intorno all’ acqua un fiorente commercio che appunto alimentava tutte le attività agricole e tessili locali, segni ereditati dal passato presenti visitando oggi questo straordinario anfratto della zona di Colfiorito. La forza visionaria degli imprenditori locali ha fatto si di imbrigliare l’acqua in flusso acrobatico in mezzo alle case del paese con cascate carpiate ad effetto, costruzioni in pietra antica che sono molto curate e raccolte in mezzo alla viabilità fluviale. Ovviamente intorno all’ acqua che scorre e rigenera in modo onomatopeico i curiosi turisti non possono mancare strutture di accoglienza per il soggiorno, ristoranti e birrifici, gelaterie e musei, camioncini che vendono prodotti gastronomici locali al top (cipolle e patate) e tir adibiti a paninoteche nomadi che aspettano il turista in transito come ragni dopo aver tessuto la tela. Allora riflettiamo sull’ importanza di questo vitale Santo Graal locale, l’acqua fonte di vita e prosecuzione dinastica: ma come ha fatto un piccolo borgo come Rasiglia a mettere in moto una filiera tursitica di questa ampiezza, dal momento che il tutto forse non supera le dimensioni di Colle e Boschetto compattati insieme? web marketing umbriaCi sono più negozi e musei che case, sembra quasi un paradosso! Bè basta chiedere ad Alexa o ai supporti vocali moderni: ehi google metti da Spotify una musichetta rilassante e che cosa ti viene proposto prima di addormentarti in totale benessere? Proprio il motivetto gorgogliante di un ruscello segno che a Rasiglia si respira proprio un atmosfera particolare! Bè con i dovuti paragoni è come quando vai a Boschetto e ti siedi al cospetto dellweb developer umbriae sorgenti del Rio Fergia? Non proprio, qui la realtà è aumentata e da Colle di Nocera Umbra si può solo fare turismo di prossimità andando a Foligno verso direzione Colfiorito dove il Borgo dall’ antica city dominata dai Trinci è a soli venti km. Ma Rasiglia è solo la punta dell’ iceberg.Prima di Rasiglia il turista in fuga dalle metropoli può approdare in località come Ponte Santa Lucia e Pale dove la terra è baciata dalla fertilità delle acque ma anche dalle meraviglie della natura. Il turista condominiale può cimentarsi allora in escursioni e attrazioni da brividi con attività sportive diversificate che vanno dal Quad, bike ed escursioni a cavallo fino al Trekking, il rafting e il Softair (guerriglie simulate) senza dimenticare ricerche guidate stravaganti come quella legata al tartufo! La zona di Colfiorito è ricca di sapori, di bellezze naturali, di acque gorgoglianti e di terreni altrettanto fertili, un vero paradiso terrestre dove non mancano prodotti al top famosi a livello internazionale come la famosa patata rossa, http://www.larossadicolfiorito.it/ . Ok abbiamo parlato bene di Rasiglia, ma un punto debole ce lo ha? Forse il parcheggio! Noi siamo finiti in un campo sportivo in disuso abbastanza scomodo e lontano che ci ha creato diversi problemi di prima mattina quando non c’era praticamente nessuno! Figuriamoci che cosa deve essere il problema del traffico turistico e del parcheggio alle tre di una domenica pomeriggio! Per la colazione abbiamo optato Ponte Santa Lucia dove esiste un bellissimo negozio di gastronomia locale dal quale abbiamo trafugato pagando un bel saccone di patate rosse, una località famosa per un altro fiume che caratterizza varie attività sportive che si chiama MENOTRE. In definitiva nell’ entroterra folignate verso Colfiorito ci sono tantissime cose non solo da vedere. A questo punto per un approfondimento ulteriore aspettiamo la prossima svirgolata del piccione che sadicamente fuori orario costringe i pigroni locali poco restii a svegliarsi alle sei del mattino a fughe imprevedibili optando per un turismo di prossimità!

Link utili:

https://rasigliaelesuesorgenti.com/

http://www.valledelmenotre.it/




Una giornata tipo di Ken Shiro: salvare il mondo con JavaScript e il Drag and Drop

web design umbria

LA TERRA E’ PRECIPITATA NELLE BARBARIE: SOLO KEN SHIRO E LE SETTE STELLE DELLA DIVINA SCUOLA DI HOKUTO CI POSSONO SALVARE!

Quale è la giornata tipica di Ken Shirov? Certamente avrà molto da fare sulla terra. Ce lo immaginiamo: estirpare i laboratori dove vengono creati virus artificiali, debellare i politici corretti in ogni dove, dare una lezione ai prepotenti, salvare la Terra dall’ inquinamento atmosferico, distruggere le mafie locali, fare a pezzi i terrapiattisti etc etc etc. Ma come si organizza Ken Shiro nelle sue attività quotidiane? Ha forse fatto un corso di Time Management o le sette stella della scuola di Hokuto lo hanno anche fornito di un orologio divino che gli dà solo il tempo di dedicare pochi minuti per ogni task? Vediamo in dettaglio quale è il suo pannello di controllo all’ indirizzo https://www.farwebdesign.com/projectcsshtmljs/kenshiro.html. Ken suddivide gli appuntamenti della sua agenda in tre fasi distinte: quello che deve fare, quello che sta facendo e quello che è stato risolto. La catena di montaggio è sempre la stessa, prima fa a pezzi un terrorista che lancia virus nelle stazioni e mentre lo demolisce lo lascia sospeso nell’ area dell’ agenda IN PROGRESSO poi finito il working progress il terrorista diventa mangime per i polli e la sua missione è completata. Poi deve volare fino a Garbatella dove un gruppo di imprenditori locali vendono le mascherine a dieci euro cadauna e il compito passa di nuovo dalla fase in sospeso a risolto e così via finchè arrivando a fine giornata si concede un attimo di respiro telefonando a Carlsen e battendolo con lo scacco matto della divina scuola di Hokuto. Vediamo come tecnicamente lato frontend una tecnologia come JQuery riesce a fare tutto questo; il progetto è composto da un file CSS, un file con estensione JS e il file statico kenshiro.html che ha le inclusioni alle risorse esterne. Dentro questo file in alcuni punti sono definiti degli ID, identificativi unici, che serviranno a JQuery per dinamicizzare i contenuti. Ovviamente ci sarà un CDN per inserire Jquery a scelta fra i tanti che si trovano in rete: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> , con questo abilitiamo lo script che abbiamo dentro la cartella JS a lavorare. Come funziona il DRAG and DROP come evento di javascript? Si clicca su un elemento per trascinarlo (metodo dragstart), lo si sposta a piacimento grazie al metodo dragover e INFINE LO SI RILASCIA sfruttando il metodo drag, il tutto dicendo agli elementi iniziali che si sposteranno che hanno un nome e un cognome e alcune caratteristiche di trascinabilità che dovranno interagire con certe aree specifiche e non altre, altrimenti l’azione non avrebbe compimento. Analizziamo la parte statica della pagina:

<div id=”board”>
<div id=”todo”>
<div class=”title”>Da fare</div>
<div id=”item1″ draggable=”true”>
<div class=”cardTitle”>Fermare un gruppo di politici corrotti che governano per se stessi</div>
</div>
<div id=”item2″ draggable=”true”>
<div class=”cardTitle”>risanare le terre di Murdor dall’ inquinamento denunciato da Greta</div>
</div>
<div id=”item3″ draggable=”true”>
<div class=”cardTitle”>Distruggere un laboratorio dove creano virus artificiali</div>
</div>
<div id=”item4″ draggable=”true”>
<div class=”cardTitle”>Convincere i terrapiattisti a cambiare religione</div>
</div>
<div id=”item5″ draggable=”true”>
<div class=”cardTitle”>Bloccare le fake news e sgominare la mafia delle scommesse clandestine</div>
</div>
<div id=”item6″ draggable=”true”>
<div class=”cardTitle”>Tra una bonifica e l’altra risanarsi battendo Carlsen a scacchi</div>
</div>
</div>
<div id=”inprogress”>
<div class=”title”>In corso</div>
</div>
<div id=”done”>
<div class=”title”>Fatto</div>
</div>

Da notare come ciascun compito o task definito con l’abilitazione draggable=”true” sia preso dallo script JS per intercettare l’evento dragstart che consente lo spostamento iniziale degli oggetti su aree in cui verrà rilasciato un evento dragover che intercetterà questa volta le TRE aree di rilascio definite come id=”todo” , id=”inprogress” e id=”done” che ospiteranno anche l’azione finale dello spostamento definitivo (metodo DROP) che per Ken stanno proprio a significare leggo l’agenda, vedo quello che c’è da fare, faccio le cose che riempono uno spazio della giornata “inprogress” e archivio il tutto nella dimensione “DONE” e così il ciclo DA FARESTO FACENDOFATTO giunge a compimento. A guardare il risultato finale si penserebbe che tutta la parte di script è lunga due km, ma JQuery nasce proprio con il dono della sintesi che migliora la prolissità di javascript:

$(‘document’).ready(init); function init() {

$(‘#item1, #item2, #item3, #item4, #item5, #item6’).bind(‘dragstart’, function (event) { event.originalEvent.dataTransfer.setData(“text/plain”, event.target.getAttribute(‘id’)); });

$(‘#todo, #inprogress, #done’).bind(‘dragover’, function (event) { event.preventDefault(); });

$(‘#todo, #inprogress, #done’).bind(‘drop’, function (event) { var notecard = event.originalEvent.dataTransfer.getData(“text/plain”); event.target.appendChild(document.getElementById(notecard)); event.preventDefault(); });

}

web design umbriaAnalizzando bene il tutto, ci sono solo TRE funzioni che utilizzano la famosa pala del rottamatore per le autorimesse, $(afferro_un_elemento): quella che afferra dal cielo gli elementi ITEM per metterli in relazione con una azione che devono compiere (DRAGSTART), quella del trascinamento in corsa usando il metodo DRAGOVER e quella predisposta al RILASCIO usando il metodo definitivo DROP che completa il ciclo, spostamento che agisce sempre sulle aree predisposte al parcheggio dei compiti marcate dalla loro carta di identità rappresentata da corrispettivi ID todo, inprogress e done. Il BIND come espressione in programmazione indica un collegamento con qualcosa, una base dati, una procedura. Notare anche che ci sono espressioni tipiche del DOM molto famigliari, come appendChild, getElementById e funzioni come event.preventDefault() che stanno a significare rispettivamente appendi al figlio dell’ elemento, afferra l’elemento in base all’ ID (potrei farlo anche per style o tag) e resetta tutti i comportamenti anomali prima di compiere la successiva operazione, una azione che ricorda molto il famoso RESET.CSS che si utilizza per inizializzare il documento vuoto quando si parla di problematiche dei fogli di stile, al fine di annullare le varie differenze di visualizzazione tra i browser. Nel frattempo grazie al DRAG AND DROP, evento di trascinare e rilasciare, Ken Shiro ha salvato la Terra dalle nefandezze del male. La parte di abbellimento finale sulla struttura HTML per l’esempio di Umbriaway Consulting all’ indirizzo https://www.farwebdesign.com/projectcsshtmljs/kenshiro.html è responsabilità del file CSS che si può modificare a piacere.




Il gatto di Schrodinger é vivo o morto? Risponde javascript!

Javascript è un piccolo passo per un uomo ma grande per l’umanità visto che è utilizzato a man bassa su tutti i moderni applicativi nelle nuove formule lato server con tecnologie come node, vue, typescript angular, react etc etc. Ma come avviene l’interazione con l’utente con javascript? Analizziamo la seguente pagina presente all’ indirizzo: https://www.farwebdesign.com/schrodinger/gatto.html che consente varie interazioni sugli elementi dislocati all’ interno del tag body. Prendiamo in esame uno per uno facendo prima una carrelata su metodi che lo sviluppatore lato front end si ritroverà a aplleggiare quotidianamente. Prendiamo ad esempio il metodo getElementById ma prima prendiamo il toro per le corna: javascript ha a che fare con l’intero documento che è considerato l’oggetto principale del DOM. Il DOM è l’acronimo di document object model, ossia un luogo di gerarchie di oggetti che prende a modello gli alberi della natura nella sua struttura in cui si annidano elementi padri ed elementi figli. Nell’ HTML il body è un elemento padre ma pur sempre figlio del tag HTML. Un paragrafo è un elemento figlio rispetto a un paragrafo e anche a un blocco divisore <DIV> se dovesse essere contenuto al suo interno. Quindi possiamo considerare il nostro metodo come qualcosa che restituisce l’elemento che ha l’attributo ID con il valore specificato. Questo metodo è uno dei metodi più comuni nel DOM HTML e viene utilizzato quasi ogni volta che si desidera manipolare o ottenere informazioni da un elemento del documento. Restituisce null se non esiste alcun elemento con l’ID specificato. Un ID dovrebbe essere univoco all’interno di una pagina. Tuttavia, se esiste più di un elemento con l’ID specificato, il metodo getElementById () restituisce il primo elemento nel codice sorgente. Posso usare anche altri metodi che catturano gli elementi della pagina come una giugantesca tenaglia di un rottamatore di auto. Ad esempio l’espressione var x = document.getElementsByTagName(“p”); non fa altro che catturare tutto il valore contenuto all’ interno del paragrafo P all’ interno della variabile X e in questo caso abbiamo usato il selettore di javascript getElementsByTagName(“p”). Decisamente la tecnica di contrassegnare gli elementi divisori della pagina a un identificativo univoco (ID) è largamente diffuso tra gli sviluppatori. Vediamo quindi il contenuto della pagina https://www.farwebdesign.com/schrodinger/gatto.html e analizziamo tutti gli elementi presenti:

<!–
<head>
<meta charset=”UTF-8″>
<script>
function myFunction() {
document.getElementById(“demofunction”).innerHTML = “ho cambiato il paragrafo con una funzione”;
}
</script>
</head>
<body>

<div align=center>
<h3>Scopri che cosa puoi fare con javascript!</h3>
<p id=”demostyle”>Cambia il font del paragrafo con la proprietà style del metodo getElementById </p>

<button type=”button” onclick=”document.getElementById(‘demostyle’).style.fontSize=’35px'”>Cambia il testo del paragrafo con la proprietà style</button></br>
<hr>

<h2>Il gatto di Schrodinger è vivo o morto?</h2>

<p >In questo caso javascript cambia il valore del sorgente immagine con la proprietà SRC del metodo getElementById</p>

<button onclick=”document.getElementById(‘myImage’).src=’gattomorto.jpg'”>Scopri se il gatto dentro la scatola ha fatto danni</button><br>

<div id=demogatto><img id=”myImage” src=”gattovivo.jpg” style=”width:100px”></br>

<button onclick=”document.getElementById(‘myImage’).src=’gattovivo.jpg'”>Riporta il gatto in vita</button></div>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’none'”>Fai fuori il gatto per sempre!</button><br>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’block'”>Lazzaro gatto ritorna!</button>
<hr>
<button type=”button” onclick=”document.getElementById(‘demochange’).innerHTML = ‘testo cambiato'”>Cambia il testo del paragrafo</button><br>
<p id=demochange>Cambia il testo</p><br><br>
<button type=”button” onclick=”myFunction()”>Cambia il testo del paragrafo usando una funzione</button><br>
<p id=demofunction>Cambia il testo</p><br>
<hr>
</div>
</body>
–>

schiacciando il primo tasto in alto modifico la dimensione del font usando la proprietà STYLE.FONTSIZE messa disposizione dal metodo getElementById per cui azionando il click sul pulsante con l’evento onclick azionerò il cambio di dimensioni del paragrafo contrassegnato da id=demostyle con l’istruzione completa document.getElementById(‘demostyle’).style.fontSize=’35px’. A questo punto siamo riusciti ad analizzare la spinosa questione del gatto di Schrodinger, estrapolando infatti da wikipedia:

…il paradosso del gatto di Schrödinger è un ESPERIMENTO MENTALE ideato nel 1935 da Erwin Schrödinger, con lo scopo di illustrare come la meccanica quantistica fornisca risultati paradossali se applicata ad un sistema fisico macroscopico. Andando decisamente contro il senso comune, esso presenta un gatto che, in uno stato noto come sovrapposizione quantistica, può essere contemporaneamente sia vivo che morto, come conseguenza dell’essere collegato a un evento subatomico casuale che può verificarsi o meno. Il paradosso è descritto spesso anche nelle discussioni teoriche sulle interpretazioni della meccanica quantistica. Il gatto romperà la fiala disposta in una scatola chiusa dopo che ne è stato segregato? Quali comportamenti imprevedibili avrà all’ interno dello spazio compresso?

Per javascript queste questioni paradossali sono facilmente risolvibili, infatti utilizzando sempre il metodo di contrassegno degli ID che sono tutti registrati con coordinate anagrafiche sulla pagina, possiamo assegnare loro dei compiti solo usando il metodo di attribuzione proposto dal metodo getElementById per cui schiacciando un pulsante posso sapere che fine farà il gatto, se voglio riportarlo allo stato iniziale lo potrò fare e anche ucciderlo definitivamente se il gatto dopo l’esperimento si comporta come un leone e tenta di sbranarci. Tuttavia c’è anche un tasto di ripristino che farà ritornare in vita il nostro amato gattino cambiando lo stato del DIV che contiene tutti gli elementi che da display = none ridiventa display = block nelle proprietà di stile. Poi abbiamo anche la dimostrazione dopo Schrodinger di cosa può fare il metodo getElementById in sincronia con la proprietà innerHTML che cambia il testo e poi dulcis in fundo (Dulcis in fundo è un’espressione pseudo-latina che, all’orecchio di un parlante Italiano, significherebbe “il dolce giunge alla fine del pranzo”. Come tale è considerata da Giuseppe Fumagalli, “Il dolce viene in fondo”). Insomma per afferrare gli elementi all’ interno della pagina javascript propone numerose soluzioni, nel frattempo ne sappiamo di più sulla fisica quantistica.




Javascript e le regular expression: illuminazioni celesti pronte all’ uso!

web developer umbriaSe non sai che cosa sono le espressioni regolari che vengono usate in tutti i linguaggi di programmazione don’t worry! Di solito un approfondimento nel mese di Aprile può aprire spiragli inaspettati se non altro perchè l’illuminazione celeste è una prerogativa di questo mese. Andiamo subito alla pratica. Ipotizziamo che come organizzatore di un torneo di scacchi mi debba trovare nella necessità di far inserire una serie di dati sulla pagina delo mio sito per una ipotetica iscrizione al più grande torneo di tutti i tempi dopo quello di Zurigo del 1953. Questi utenti devono essere sicuri di digitare l’elo giusto della loro forza agonistica senza che io organizzatore/webmaster debba preoccuparmi dei dati immessi che potrebbero essere anche stringhe conflittuali nei confronti del sistema. Come risolverla quindi in Javascript visto che in PHP lato server abbiamo a disposizione un meccanismo di validazione per ripulire e rendere i dati inseriti immacolati? Semplicemente usando le espressioni regolari. Quindi abbiamo un campo dove è richiesto:

var elo = “1987”;

ossia dichiaro una variabile di nome elo che verrà assegnata al valore di 1987 che non è un anno temporale ma solo l’elo del potenziale frequentatore del nostro torneo. Sorge quindi un problema, questa persona mi deve validare solo numeri come tipi di dato e non zucche e patate nel campo. Un dato va controllato quindi nel suo formato visto che l’elo di solito non supera i diecimila dobbiamo supporre che all’ interno del campo l’utente possa scrivere solo quattro campi, perchè finora nessuno è mai riuscito ad ottenere 10132 punti elo se non forse sulla lontana nebulosa di Orione. Dobbiamo quindi verificare il dato inserito e ancora prima verificare che LA STRINGA NON SIA VUOTA per permettere l’immissione. Per prima cosa devo limitare la mia espressione e questo lo si fa dichiarando due / / entro le quali vanno inseriti i criteri di convalida del campo. Per far capire a javascript che è alle prese con una espressione regolare nomina una variabile arbitraria (nell’ esempio exp) e gli assegno un valore che avrà una caratteristica avendo a che fare con contenuti inseriti dentro a /…contenuti…/ e ciè che quell’ assegnazione avrà a che fare con una espressione regolare. Quindi scriviamo una espressione per verificare che la stringa punti elo è vuota:

var exp = /.+/;

qui abbiamo un punto che sta ad indicare che all’ interno del campo ci deve essere qualsiasi tipo di carattere, da un numero piuttosto che una lettera, e il + sta ad indicare che ci dovrà essere almeno un carattere dentro il campo. In questo modo è palese che il campo NON PUO’ ESSERE VUOTO. Una espressione di questo tipo non è sufficiente a convalidare il nostro punteggio elo che per convenzione ha 4 cifre, ma dichiara esplicitamente che il campo NON PUO’ ESSERE VUOTO. Abbiamo solo detto che un cxarattere qualsiasi generico dovrà essere inserito nel campo nella sua quantità minimo di numero 1 item grazie al simbolo +. Le espressioni regolari mettono a disposizione un metodo che si chiama TEST. Quindi con questo metodo verifichiamo se la stringa ottenuta dal nostro punteggio elo è aderente al nostro PATTERN inserendo come argomento la var elo e il risultato sarà un booleano che possiamo stampare a video:

risultato=exp.test(elo);
document.write(risultato);

mandando in esecuzione questo file nel browser vedremo che come per magia comparirà sullo schermo la scritta TRUE e cioè la conferma che il campo dove l’utente ha inserito il suo elo non è vuoto. Ovviamente inserendo var elo = “”; a video otterremo un FALSE. A questo punto sorge un problema. Se l’utente scrivesse nel campo qualcosa tipo var elo = “hebl”; noi a video otterremo un TRUE ma sappiamo bene che l’elo si esprime con i numero e non con le lettere. Quindi come fare per risolvere il problema e migliorare la nostra espressione? Togliamo il punto e inseriamo tra parentesi quadre una serie di numeri consentiti :

var exp = /[0123456789]+/;

è come se dicessimo all’ utente senza che lui lo sappia guarda puoi digitare una serie di valori che noi riteniamo accettabili. Volendo possiamo ancora migliorare questa espressione rielaborando il tutto in un insieme di caratteri consentiti per l’immissione usando il simbolo del trattino, quindi:

var exp = /[0-9]+/;

se ritornassi a stampare a video la sequenza:

var elo = “jshe”;
risultato=exp.test(elo);
document.write(risultato);

adesso dopo i vincoli imposti con var exp = /[0-9]+/; otterrei sul browser la bella scritta di FALSE, come è logico che sia, perchè la regular expression fa bene il suo lavoro e ci dice che vuole solo un range di numeri e non lettere. Attenzione però, se avessi scritto:

var exp = /[0-9]*/;

seo specialist umbriasostituendo il + con il * é come se dicessi alla nostra bella espressione accetta tutti i caratteri compresi tra zero e nove OPPURE accetta la loro assenza, mentre sappiamo che il + come simbolo sta ad indicare che almeno UN CARATTERE DOVRA’ ESSERE PRESENTE per la convalida. A questo punto però potrebbe sorgere un altro problema. Ipotizziamo che l’utente ubriaco si metta a digitare prima i due numeri e che poi vittima dei vapori alcolici immetta due lettere, che succederebbe in stampa? Si otterrebbe comunque un TRUE perchè di fatto l’espressione da noi sottolineata come vincolo fa capire alla macchina che i numeri ci sono, ma è palese che la comparsa delle lettere non dovrebbe comparire. Dobbiamo usare dei delimitatori per risolvere il problema: con l’accento circonflesso ^ messo a inizio stringa e il carattere $ inserito a fondo espressione è come se dicessimo alla macchina “guarda, adesso l’utente può digitare solo numeri, escludi la possibilità che impazzisca e che digiti lettere a suo piacimento”: var exp = /^[0-9]+$/; mandando in esecuzione il tutto dopo aver salvato questa volta otteniamo un TRUE se ci sono solo numeri i campi perchè abbiamo imposto alla stringa di soddisfare SOLO certi criteri. Ma se io volessi imporre che l’utente possa digitare solo quattro numeri come faccio? Posso usando le {} togliendo il + che come detto ci dice solo che almneno un carattere deve essere presente nella nostra espressione quindi:

var exp = /^[0-9]{4}$/;

Ok, in questo esempio è tutto facile ma ipotizziamo di lavorare su una variabile telefono piuttosto che elo, come faccio a far accettare all’ utente ad esempio il fatto che dopo il prefisso possa digitare un trattino? Come faccio a veicolare l’utente sul fatto che un prefisso di solito ha tre numeri di inserimento e almeno dai cinque ai nove aggiuntivi dopo il trattino? Posso dare una impostazione rigida al mio pattern? Certo che si, ipotizzando:

var telefono = “011-250644”;

scriverò:

var exp = /^[0-9]{3} – ? [6-9] {} $/;

dove [0-9]{3} – sta ad indicare la coercizione 011 e dove ? inserito dopo il simbolo – sta ad indicare che questo trattino è solo opzionale dopodichè però dovrò vincolare l’utente con l’espressione [0-9] {6} per guidarlo all’ esatta digitazione delle sei cifre successive. Ovviamente a browser sia che io imposti
var telefono = “011-250644” con il trattino o var telefono = “011250644” senza trattino otterrò un TRUE perchè in entrambi i casi la clausola -? mi assicura che l’utente possa scegliere o non scegliere di immettere nel campo il simbolo di trattino -. E se io per sbaglio di trattini ne inserisco due? Non verrebbe rispettata la condizione della regular expression e a browser vedrei un bel FALSE di conferma perchè nella nostra condizione abbiamo imposto che un trattino c’è o non c’è (ma non due!).

CONCLUSIONI: qui abbiamo usato solo il metodo test per capire i fondamenti delle espressioni regolari ma l’universalità e l’ambito in cui questi criteri di validazione operano su più linguaggi ci fanno intuire come il discorso sia solo all’ inizio e da esplorare ulteriormente. Di sicuro la Pasqua del 2020 seppure farcita di elementi apocalittici di demolizione alla Blade Runner qualcosa di buono ha portato, se non altro ha illuminato e fatto chiarezza senza ramoscello d’ultivo su un aspetto misterioso tipo la scrittura babibolonese-sumerica. Adesso quelle sibilline espressioni del tipo  = /^[0-9]{3} – ? [6-9] {} $/ saranno più facilmente decodificabili per il nuovo novizio che indossa le vesti del moderno Champollion della programmazione, che le regular expression siano con voi, amen.




VUE JS FRAMEWORK e la GESTIONE DEGLI STATI

Dopo aver sperimentato una lezione introduttiva su VUE all’ indirizzo https://umbriawayfocus.wordpress.com/2020/03/24/vue-js-un-framework-potente-per-le-tue-user-interface/ gettiamoci a capofitto nella GESTIONE DEGLI STATI. Analizziamo il seguente codice da includere come file con estensione.js esterno:

new Vue ({
el: ‘.todoapp’,
data: {
todos: [{
title: “shopping”
}, {
title: “video corso”
},{
title: “lavare i piatti”
}],
}
});

intanto abbiamo istanziato un oggetto di nome todos che fa riferimento all’ elemento della pagina html todoapp. All’ interno dell’ array ritroviamo tre notes o cose da fare che sono nello specifico i tre elementi presenti che occupano l’array rispettivamente nella posizione 0,1,2 visto che il rimpimento di ciascun cassetto nell’ array armadio parte per convenzione da zero. A questo punto sorge spontanea una domanda. Qui ho occupato l’array con dei dati ma se io avessi avuto l’esigenza di riempire questo armadio ad esempio con un API esterna? Solo con la versione tre di VUE è stato risolto il problema dei contenuti, in quanto nelle versioni precedenti l’oggetto voleva i dati di riempimento, mentre dalla tre possiamo anche valutare di inizializzare un array lasciandolo vuoto, oppure di usare la parola chiave NULL sulla proprietà NODATA o anche come detto di riempire l’oggetto array con dati che arrivano dall’ esterno. Si può fare tutto tranne che utilizzare la parola deleteria UNDEFINED sull’ attributo nodata. A questo punto visto che nella lezione precedente abbiamo visto come stampare i dati potremmo inglobare questo array nella nostra pagina HTML e renderlo funzionale con la sintassi che già conosciamo ossia, cone le famose doppie graffe. E’ buona regola di programmazione inserire i link di collegamento al framework tramite CDN prima della chiusura del BODY in quanto prima si preferisce offrire all’ esperienza utente il completo caricamento della pagina e solo dopo caricare le risorse utili. Quindi avremo prima della chiusura del body il CDN e lo script esterno visto prima:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”index.js”></script>

ovviamente in alto nell’ HEAD ci sarà il nostro CSS VUE che ingloba le classi di formattazione e nel corpo del documento potremmo ad esempio scrivere il codice per leggere a video il nostro primo appuntamento della giornata ossia quello dello shopping dopo una sezione introduttiva, quindi sotto il body ci sarà:

<section class=”todoapp”>
<header class=”header”>
<h1>todos</h1>
<input class=”new-todo” autofocus autocomplete=”off” placeholder=”che cosa devi fare?”>
</header>
<section class=”main”>
<ul class=”todo-list”>
<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[0].title}}</label>
<button class=”destroy”></button>
</div>
</li>

se volessimo ripetere le attività memo basterà copiare la porzione di codice:

<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[1].title}}</label>
<button class=”destroy”></button>
</div>
</li>

cambiando l’indice dell’ array. Per vedere l’effetto che fa la nostra prima applicazione andiamo su https://www.farwebdesign.com/vue/todos/ e volendo possiamo anche dare un occhiata al main.css per il nostro abbellimento a video:

html,
body {
margin: 0;
padding: 0;
}

button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;

font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
Helvetica Neue’, Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}

:focus {
outline: 0;
}

.hidden {
display: none;
}

.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;

font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;

In uno dei prossimi articoli andremo a visionare i METODI sempre contestualmente alla GESTIONE DEGLI STATI in VUE JS Framework!




E-learning in ambito web developer: quale offerta formativa?

Come orientarsi nel labirinto di enti che offrono in rete formazione e-learning? La didattica online offre numerose piattaforme per l’insegnamento a distanza. Se il focus è orientato a potenziare progetti in ambito web con figure professionali quali web designer, web developer, seo specialist, digital strategist, copywriter, social media marketing e similari rivolti alla comunicazione di rete ma anche agli aspetti tecnici di sviluppo, allora non si ha che l’imbarazzo della scelta. Tra i più famosi ritroviamo ad esempio UDEMY, https://www.udemy.com/, che offre formazione a distanza ogni ambito a costi estremamente contenuti. La qualità dei corsi è elevata in alcuni casi e la didattica è semplificata appoggiandosi a bravi professionisti estrapolati a caso come per esempio https://simonatocci.com/ . oppure a ottimi professionisti come http://www.hidran.it/ . In alternativa ci sono una miriade di piattaforme che offrono corsi mirati in ambito sviluppo e comunicazione web come per esempio https://devacademy.it/ , https://su.video-corsi.com , https://accademiadomani.it/ , https://lifelearning.it/ e molti altri similari come https://www.mrwcorsi.it/ . Per chi non ha problemi con l’inglese ed è in grado di assimilare il cento per cento della didattica certamente si mette in evidenza anche https://www.eduonix.com/ che offre anche percorsi di laurea con materie di studio mirate per raggiungere l’obiettivo. L’utente che sceglie queste piattaforme ha il vantaggio di poter gestire la sua didattica in funzione del tempo e dell’ impegno che può mettere in campo riguardando le lezioni e gestendo il proprio tempo in totale libertà. L’ideale per prendere il massimo dalle lezioni è quello di pensare a dei progetti paralleli da tirare su mentre si assimilano i contenuti dei video per entrare ina sorta di circolo virtuoso dove il tutto da astratto e teorico diventa pratico: non è secondario come obiettivo in taluce circostanze anche quella di approfittare di queste offerte formative per incrementare le proprie conoscenze e proporre a nostra volta un punto di vista inedito sulla didattica, prendendo da professionisti di settore già affermati e modellare le nozioni sulle nostre esigenze. Come sappiamo le professionalità che operano in ambito web sono tante e tutte molto impegnative a livello di differenze, ad esempio c’è un abisso tra chi si occupa di front-end developer e chi invece dal back-end deve gestire anche database e parte di programmazione lato server. Senza contare oggi tutte le nuove tecnologie che premono per mettersi in evidenza e che spesso vengono citate come indispensabili sul proprio curriculum di sviluppatore come Vue, Angular, Node e chi più ne ha più ne metta. Per non citare la programmazione di applicazioni rivolte in ambito mobile con Android piuttosto che il mondo Mac. Insomma l’offerta formativa in questo settore è molto diversificata ma tutte queste piattaforme citate in piccola parte sopra in qualche modo supportano le esigenze del consumatore a dei costi davvero contenuti: nel mondo reale approvvigionarsi con la stessa efficacia di materiali ci costerebbe davvero molto caro traducendo in soldoni. Poi esistono anche autorità come https://www.w3schools.com/ che rilasciano anche percorsi di certificazione che vanno valutati in base alle proprie esigenze. In definitiva il panorama è abbastanza ampio ma il rischio è comunque quello di non riuscire a ottimizzare il tempo perso sull’ apprendimento: è necessaria molta disciplina e costanza applicativa e voglia di mettersi in gioco con progetti concreti per concretizzare il salto dalla teoria alla pratica, per cui il problema di fondo rimane quello di imparare ad imparare nel migliore dei modi senza imparare a memoria alcunchè, ma sviluppando un metodo di lavoro autonomo che ci porta a risolvere efficacemente le problematiche che incontriamo sul nostro cammino seguendo risposte plastiche e adattive. Solo con una certa flessibilità come spirito pregnante saremo in grado di entrare nel settore Problem Solving senza traumi, perchè sappiamo che l’errore in programmazione è l’essenza della professione e che solo costruendo una storia personale basata su come si risolvono queste situazioni si può progredire e migliorare in ambito sviluppo di applicazioni mobili o desktop. In ogni caso il problema di fondo non è legato a quale piattaforma scegliere perchè l’offerta formativa non manca ma come riuscire a intraprendere un percorso di studi che sia il più possibile produttivo ed efficace e su questo ognuno deve lavorare autonomamente con impegno per trovare la propria strada su domande spesso critiche (ad esempio devo concetrarmi di più sull’ apprendimento del mondo microsoft con dot net oppure sul mondo free legato a php e ai suoi cms derivati come Joomla, Drupal, WordPress?) che richiedono una sperimentazione prima di trovare le attitudini più performanti alle nostre inclinazioni. E non manca anche il supporto legato alla grafica e alle dinamiche di prodotti come Adobe che offrono soluzioni legate più alla parte front-end della user experience dell’ utente ad alto impatto per vestire le nostre strutture messe in piedi con le tecnologie più variegate.




Luciano Bianciardi e l’INTEGRAZIONE

“Con la globalizzazione a pozzanghere liquide BCE non si scherza. Bisogna fare i conti con l’economia di mercato e sui prodotti editoriali non è il caso di proporre quella pseudoscienza chiamata sociologia. Se vogliamo rispettare il fatturato la sociologia lasciamola a casa, faglielo capì a marcelluccio tuo. Poi sta storia dello sperpero non va più bene, che facciamo ogni mattina compriamo sei sette giornali quando ne basterebbero tre? E poi il personale. Qui bisogna tagliare di brutto, si fanno mettere incinte appena gli fai il contratto, non va bene!”. A parlare è Gaeta uno dei tanti automi della Milano anni sessanta che lavora come aspirante dirigente presso una casa editrice dove Luciano Bianchi, fratello di Marcello Bianchi quello che rompe le palle proponendo traduzioni americane sul tema della sociologia, si sforza di farsi integrare dalla grande città con grandi riserve, dal momento che quel mostro di cemento e di acciaio permeato di smog non fa altro che restringerti lo spazio dove cammini, mica siamo a Grosseto che puzza ancora di aria contadina seppure le strade anche lì siano soggette a grandi rivoluzioni! L’integrazione è un romanzo per aspiranti scrittori che hanno grossi problemi nel descrivere la loro giornata tipo, si perché Bianciardi qui supera se stesso, non solo riesce con una precisione millimetrica a sfoderare una prestazioni sulle descrizioni tipo di un aspirante impiegato che vuole fare carriera da urlo, ma mentre lo fa ti prende per il culo. Non te ma la società liquida globalizzata bce basata sul capitale che dovrebbe integrarlo e in questo riprende gli stessi temi aspri della critica dei magazzini da svuotare fatta da Pasolini (lo scrive anche dichiaratamente a un certo punto, compravano quello che i padroni gli proponevano in tv). E allora ecco un sarcasmo efferato sui tic dei milanesi che non hanno tempo da perdere e che si fanno telefonare dalla segretaria quando stanno in tiunione per più di quindici minuti per lasciare uscire con un pretesto il visitatore. Il paradosso di questo libro è il risultato ottenuto a fine narrazione: il soggetto che vorrebbe scappare prima possibile da quella orrenda città come nei più perfetti degli ossimori cioé Luciano, in realtà è quello che si farà addomesticare dagli eventi, mentre il fratello suo che seppure dotato di grande talento prometteva fulgide carriere e quella famosa mediazione che il tema del libro (ossia un ponte di collegamento culturale tra il mondo di mezzo con quello di sopra, un trait d’union tra Italia centrale e Milano che fa mondo a parte) alla fine ce lo ritroviamo sconfitto ma finalmente libero dalla firma di cambiali per acquistare i divani della nuova casa e dai cartellini da timbrare correndo ogni mattina come pazzi. Per la teoria degli opposti questo libro parla di alienazione non di integrazione, ma certo è che come nei famosi anni ottanta chiunque avesse un pò di voglia di comprarsi una tv nuova a casa lavorando con impegno non avrebbe certo sudato per trovare un qualunque tipo di attivita giustamente retribuita che gli avrebbe permesso di entrare nel sogno americano della libera iniziativa finalizzata al risultato. E così da profano scopro che queste pagine contengono niente popò di meno che la bomba atomica: tutto il modello di sviluppo che determina i nostri destini adesso era già oggetto di aspre critiche agli albori del mondo quando i mulini che sfoderavano merendine d’oro sullo sfondo di campi fioriti e cieli azzurri colorati avevano persino il pregio di essere reali. Ma alla fine in mezzo a tanta ironia c’è anche la lieta novella, analogamente a quello che accade ai suonatori del Titanic negli ultimi istanti di vita del naufragio: sarà pure un mondo costruito sulla proprietà e sulla produzione e conseguentemente sull’ ingiustizia, ma in mezzo a questo correre per conquistare il Klondike e le sue pseudo miniere d’oro c’è anche il palliativo della perdizione e del divertimento da luna park improvvisati: chi ha detto che sia un male firmare cambiali per sposarsi e mettere su famiglia? Anzi come suggerisce l’autore alla fine del libro, appena sua moglie firma il contratto, si fa pure mettere incinta. Parliamo forse di un mondo ricco di opportunità per emergere e per trarre vantaggi personali da situazioni rocambolesche che possono essere determinate se si ha in testa un pò di sale in zucca? Per rispondere a questa domanda bisogna leggere tutta la famosa triologia di Bianciardi (l’integrazione dovrebbe essere la seconda puntata rispetto ai romanzi il lavoro culturale e il terzo più famoso la vita agra) anche se conosciamo già la risposta che convalida tutte le aspre critiche pasoliniane alla strada intrapresa dal cosiddetto mondo civilizzato. Anche se il mondo di per sè fa schifo (ed è innegabile) cogliete almeno l’opportunità di divertirvi come pazzi, suggerisce la contrapposizione finale tra i due stati raggiunti dai due fratelli a fine racconto, con Marcello il genio costretto a ripiegare sul provencialismo grossetano per salvarsi con mille artifizi da freelance per stare a galla e una condizione giudicata dalla società omologata convenzionale come fallimento e il fratello poco incline a farsi modellare dalla grande città dai condizionamenti occulti (fanno molto ridere ad esempio le frasi che gli somministra il suo capo quando assunto per un nuovo lavoro sul finale del libro deve a sua volta somministrare a chi riceverà altre disposizioni operative le stesse stronzate sulla necessità di giocare in squadra e ottimizzare la produzione per esempio, frasi che Luciano è costretto a ripetere persino al fratello per responsabilizzarlo su piccoli lavoretti che gli passa). A conti fatti è un libro di sorprese e misteri, compreso quello che a un certo punto verso la fine del romanzo si consuma criptico ed ermetico nella famosa piazza Ungheria dove i Bianciardi si trovano coinvolti per aiutare un amico nei guai, anche se il lettore non capirà esattamente di che cosa di fatto si stia parlando, forse un escamotage letterario per dare un destino diverso ai due impavidi avventurieri del nord nel sorprendente finale dove i verdetti sulle aspettative personali vengono rovesciati con il matrimonio a sorpresa di Luciano con la famosa Marisa (a Milano era pieno di Marise, ah ah) pronta a farsi mettere incinta dopo la firma sul contratto a tempo indeterminato! Se c’è qualche anarchico appassionato di distruzione di modelli di sviluppo imperanti, questo libro è parte essenziale nella sua cassetta degli attrezzi rivoluzionari finalizzati a ricontestualizzare il sistema e a rimetterlo in discussione. Bianciardi (che di nome fa Luciano come l’alter ego del suo integrazione, non dimentichiamolo!) al TOP voto otto!




A Monterotondo con Montegrappa edizioni: Nocera Ombrosa e Mauro Carpa finalisti nel concorso letterario “metti un racconto a cena”.

La manifestazione di premiazione del concorso “metti un racconto a cena” edita da Montegrappa edizioni si è svolta il 26 Ottobre a Monterotondo, località nell’ entroterra laziale ricca di colline verdeggianti e di borghi arroccati su attrattivi cucuzzoli non solo per vetuste esigenze pratiche difensive, ma soprattutto per arginare il debordare delle acque che anticamente modificava radicalmente la morfologia del territorio. Presenti aspiranti scrittori da tutta Italia e persino dalla lontanissima Germania, con altissima qualità degli scritti e con sorprese inaspettate tipo il bellissimo racconto del tredicenne Giovanni Laricchia dal titolo “il mondo senza”. Certo gli scritti scelti nell’ inclusione antologica del volume sono tutti intriganti, innovativi e originali. Vediamo come presenta l’introduzione il direttore artistico Anna Ludovici che ha curato la selezione del materiale: una girandola di racconti ci accompagnerà in questa lunga cena letteraria: pennellate di natura, ricordi e sogni, visioni inquietanti, angeli e quasi suicidi…Humor e fantasia, leggerezza e corposità, un vagare trionfante, a volte insolente, mai noioso, tra i meandri della mente e dell’ anima dei nostri scrittori, che vi terranno compagnia, facendovi a volte riflettere, a volte sorridere, emozionarvi e stupirvi in questo lungo pasto serale. Buon Appetito! Il concorso è stato articolato come una sfida: riusciranno i nostri aspiranti scrittori a intrigare in uno spazio ristretto di sole due pagine i nostri commensali serali? La risposta è scontata, visto che la giuria, a causa della qualità elevata dei lavori pervenuti, si è vista costretta ad ampliare il podio a tre posti per farlo diventare di sei! Questa volta il detective più famosi di Collemosso (ovviamente non si deve sapere che questo particolare segugio abita a Colle di Nocera Umbra in realtà, ndr) deve risolvere un difficile caso di corruzione che vede coinvolto l’assessore alla cultura di Nocera Ombrosa (anche qui non si deve sapere che nell’ evocazione dell’ universo carpesco, questa località è la proiezione reale di un CAP realmente esistente, nello specifico 06025 ma non solo, ndr) il petulante Rocco Tamburini, in quel di Spoleto. La sfida mette in evidenza le suggestive bellezze di una località realmente esistente, Castagneto Alta, ma anche la sua dimensione isolata dovuto a un estraneante spopolamento e inutile dire che il crimine di cui si parla nella narrazione è funzionale per mettere in evidenza solo la cornice esterna dei luoghi in cui vive il detective, alter ego catartico dell’ autore. Mauro Carpa in Umbria si impone all’ attenzione dei critici nel luglio del 2018, vedi ad esempio https://www.umbriaway.eu/2018/07/08/premio-hombres-itinerante-e-cdg-ii-e-ultima-puntata-ringraziamenti/, anche se ufficialmente il CARPA DIEM romanzo presente in rete, con una avventura che lo coinvolge a Torino, lo battezza ufficialmente molto prima. Poi nel Settembre 2019 questa proiezione sgangherata dell’ autore fa di nuovo capolino, vedere per esempio il primo posto di Rieti https://www.umbriaway.eu/2019/09/15/premi-letterari-a-rieti-con-montegrappa-edizioni-il-cap-06025-sale-sul-podio-con-lo-strano-caso-del-grifone-di-giada/ e ora il detective continua a far parlare di sé con l’investitura ufficiale della premiazione di ieri. Che dire? Certi personaggi stanno in piedi da soli una volta che dopo mille vagiti vengono messi in pista. Tutto il ciclo di Carpa è accompagnato da una terribile presenza, quella del DRAGO, rappresentazione simbolica del terremoto, che con il suo aforisma principe, la minaccia é più forte dell’ esecuzione, promette potenziali disastri ogni volta che si risveglia da quei dieci-quindici anni di letargo. Se per la cultura occidentale il drago è da interpretarsi come qualcosa di malvagio e demoniaco, in questo racconto compare l’altra versione dell’ ossimoro, quella benefica della culturale orientale, che vede nel drago una creatura mitologica portatrice di fortuna e di buoni auspici, come sarà chiaro dalla lettura del racconto. A noi che lo abbiamo scritto questo noir gratta e vinci dal titolo IL RISVEGLIO DEL DRAGO piace molto, ma con spirito critico devo riconoscere che questa volta i miei colleghi hanno fatto meglio per entrare sul podio! Ecco l’incipit letto durante la premiazione per torturare (o allietare) i presenti:

Castagneto Alta è una Ghost Town situata a 1400 metri sopra Spoleto sulle falde del Monte Cattivo. Con quel nome sul navigatore avrei fatto bene a valutare seriamente di muovermi con maggiore cautela in un terreno per me sconsacrato, ma del resto che pericoli avrei potuto correre in un paesino con 4 case isolate che un tempo era stato una ridente località turistica e che solo ad Agosto riviveva i suoi fasti gloriosi grazie ad impavidi escursionisti? Con il senno di poi posso vedere con quale superficiale valutazione avevo trascurato il mio avversario, l’Assessore addetto ai beni culturali nella cittadina di Nocera Ombrosa, Rocco Tamburini. Un buon detective dovrebbe saper leggere i presagi, i tanti segni del destino che vengono sparsi davanti a lui come tante briciole di Pollicino, ma sulle insidie racchiuse in modo criptico dal cognome del mio potenziale carnefice, scoprii qualcosa solo nella tarda serata di quel Venerdì 17 maggio, quando di colpo entrando in un casolare segnato dal catasto a nome Tamburini, ricevetti una roboante colpo in testa che prometteva di mandarmi anzitempo al creatore. Quando mi risvegliai in uno scantinato buio e salmastro, capii che la triade rappresentata dal giorno del mese, più il cognome del mio indagato, più la località in cui si consumava il misfatto era tarata all’unisono per preannunciarmi una sicura tragedia, dal momento che la mia testa rimbombava esattamente come un tamburo. Non deve ingannare l’idea che ero entrato in una proprietà privata, dal momento che avevo regolare mandato da parte del Capitano Minniti, capo della caserma dei carabinieri di Nocera Ombrosa per operare come consulente esterno in virtù del fatto che Tamburini era il principale sospettato dell’omicidio di Egidio Capasso, noto gallerista locale, ritrovato morto due mesi prima nel suo atelier con la testa fracassata da un prezioso bucchero etrusco. Il tragitto che aveva portato all’identificazione del suo presunto assassino era stato tortuoso e solo grazie a quel colpo in testa subito da un attizzatoio capii che la pista che stavo seguendo era sempre stata azzeccata fin dall’inizio, in virtù di una successione di cause ed effetti in cui la pedina aveva finito per smaterializzarsi insieme a una preziosa collezione di ceramiche villanoviane, fino al momento in cui tutto era confluito verso quel casolare abbandonato. Di riflesso cercai l’arma, ma quando la nebbia confusa negli occhi svanì vidi nella penombra un gigante dissonante seduto di fronte che si trastullava con la mia Phantom. L’essere parlò…

Di sicuro essendo Mauro Carpa funzionale alle mie esigenze di divulgazione rispetto a qualche anomalia presente a Nocera Ombrosa, questa storia del noir appenninico è solo all’ inizio. Nel frattempo il plauso va come sempre a Montegrappa edizioni che ha saputo rivitalizzare con delle sfide avvincenti le necessità impellenti dei suoi autori nascosti nell’ oblio (certo per me è pià facile, avevo già brevettato la LETTERATURA CONDOMINIALE negli anni novanta) . Non solo finction, ma anche turismo perché quando si é invitati a celebrazioni ricche di eventi e di musica come quello di ieri (la premiazione articolata su più concorsi é durata tutto il pomeriggio) l’autore presente vede e conosce posti di cui non sospettava nemmeno l’esistenza! Nel frattempo Mauro Carpa che non vuole essere tumulato dalle forze del male senza combattere, ha già adocchiato la sua prossima performances, coming soon!




Il Coaching Sportivo. La mentalità vincente di un atleta, di Federico Di Carlo, &myBook edizioni

IL COACHING SPORTIVO. LA MENTALITÀ VINCENTE DI UN ATLETA di Federico Di Carlo, scheda internet https://www.andmybook.it/prodotto/il-coaching-sportivo-la-mentalita-vincente-di-un-atleta/, è una guida completa orientativa alle attività agonistiche finalizzata a raccogliere il massimo dalla pratica sportiva che è irta di difficoltà e di insidie. Il cervello è quanto mai complesso da guidare verso un risultato finale da raggiungere attraverso una serie di complicati passaggi intermedi oltre alla pratica del campo: l’allenamento fisico non deve essere disgiunto dalle buone pratiche della mente, che fin da subito, quando si intraprende qualsiasi disciplina, deve essere veicolata verso una serie di buone abitudini. Fortunatamente l’insieme delle problematiche che possiamo ritrovari in qualsiasi sport come tennis, golf, tiro al piattello ma anche il gioco degli scacchi ad alto livello passano lungo una palude lastricate di insidie che bisogna conoscere. Ecco allora comparire la figura del mental coach che va riabilitata in mezzo a tutto il labirinto di guru salvifici, venditori di fuffa e graduati pseudo professionisti con le pareti ricche di riconoscimenti accademici che promettono risultati strabilianti come per le diete dimagranti. Leggendo questo manuale di pronta consultazione il praticante di sport desideroso di migliorare le sue prestazioni non perderà sette kg in sette giorni e non riuscirà chiudendo l’ultima pagina a diventare campione del mondo nella sua disciplina, ma alla fine avrà chiari tutta una serie di meccanismi che spiegano come funziona il cervello e la psicologia di una atleta quando è sotto pressione ed fortemente sollecitato a cercare alibi per i suoi insuccessi. La prestazione sportiva ha bisogno di un lavoro multidisciplinare di conoscenza a partire da chi investe per perseguire un risultato finale. La famiglia di chi pratica sport se abbiamo da seguire un ragazzo ricco di potenziale deve viaggiare all’ unisono con tutto il personale che ruota intorno al potenziamento della prestazione e quindi oltre alla fisiologia degli allenamenti seguiti magari da personale addetto sono necessarie risorse che sbloccano l’atleta dalle sue performances negative quando si presentano. Pensiamo solo alle formule di autosabotaggio che può mettere in pratica qualsiasi cervello quando è sotto pressione, in fondo se rievochiamo le scenate tennistiche di gente come il celebre John McEnroe o casi più moderni ancora recenti come quelli di una rinata Serena Williams che un tempo non disdegnava di spaccare qualche racchetta a terra inveendo contro l’arbitro, capiamo subito come queste strategie autodistruttive siano solo un modo per scaricare una intollerabile pressione interna di fronte a un risultato che sta per favorire l’avversario. Il mental coach deve fare un lavoro abnorme, in primo luogo di conoscenza contestuale di come e dove opera il suo protetto, se si stratta di un giovane atleta deve trovare subito una immediata simpatia con la famiglia che deve organizzare le competizioni per esempio, ma deve preoccuparsi dopo aver visto e visionato tutto il quadro generale anche di costruire una mentalità forte forte nell’ atleta che alla fine del percorso dovrà essere completamente autonomo dopo il trasferimento di conoscenza. Murray ad esempio dopo un lungo lavoro con Lendl aveva trovato una rigorosa stabilità, ma a connubio disciolto, il suo gioco ne ha risentito nelle prestazioni verso la prima posizione ATP. Del resto in una famosa finale persa a Wimbledon da Nadal contro Federer poi riscattata negli anni con gli interessi, lo spagnolo confessa di aver pianto amaramente ma di aver appreso da quella lezione qualcosa di importante. Semplicemente la sua testa era partita durante le giocate decisive dell’ ultimo spezzone di gioco. Perché? Successivamente la paura di perdere e la pressione esercitata dai doveri agonistici e dalla tensione profusa del pubblico è stato un problema su cui lo spagnolo ha lavorato riuscendo a isolarsi completamente da queste interferente interne ed esterne, concentrandosi solo sul saper fare e sul voler essere, l’unico modo per arrivare alla logica conclusione finale, quella della prestazione vincente. Le procedure del cervello vanno esplorate e i processi cognitivi conosciuti, la nostra macchina non è in grado di elaborare con profitto più di sette bit alla volta e spesso si focalizza sul bicchiere mezzo vuoto anzichè su quello mezzo pieno. Il mental coach ristabilisce questo squilibrio e porta il suo assistito a mostrare solo quello che necessita in un rapporto di causa ed effetto per raggiungere la meta finale. Non è di nessuna utilità pratica ripetersi il mantra non ce la posso fare una presupposizione che porta inevitabilmente a un non ce la farò finale e quindi alla inevitabile sconfitta, mentre è molto più utile pensare a comportamenti adattivi durante il gioco che portano a un cambio di prestazione, trasformando una calamità in una opportunità per superare magari il letale dritto lungo linea dell’ avversario con palle corte alternate a palleggi sul rovescio altrui per esempio. Pensiamo solo a che cosa deve fare un tennista quando impatta la palla in frazioni di secondo millesimali, a quale sforzo istintivo di tipo fisico-animale deve farsi carico andando a replicare con colpi veloci ed accurati, automatismi che sono in allenamento sono possibili schedulare e far propri nella psicosomatica delle sensazioni. Il mental coach lavora moltissimo sulle neuroassociazioni e sulla decostruzioni, favorisce la nascita di ancore emozionali vincenti, sa bene quando far leva sul suo assistito per svincolarlo da parallelismi nefasti, come una cattiva dialettica con se stessi ereditata dai modelli culturali imperanti che spesso portano gli sportivi all’ abbandono della pratica agonistica in una società che implora all’ atleta solo di superare il limite massimo senza fermarsi ai gradini inferiori. Saper fare e saper essere, lo sa bene chi incapace di superare i sei metri nel salto in alto trova però il modo di superare il suo record personale da 5 e 30 a 5 e 40, con inevitabile gioia e distruzione di un limite che importante per se stessi e portatore di autostima e fiducia in vista dei prossimi traguardi. Un mental coach avendo a che fare con la conoscenza di materie come antropologia sociologia e psicologia sa bene che nella scatola nera delle persone accadono dinamiche oscure che occorre riportare alla luce per rendere consapevole l’atleta. Lo sport porta valori, fare bene le cose a prescindere anche se son si supererà mai l’asticella al traguardo dei sei metri significa rendersi partecipi di un miracolo avvenuto prima di tutto con se stessi, del resto la cronaca sportiva è piena di campioni che nelle finali di tiro al piattello non sono riusciti a centrare il podio alla prima occasione, ma che nel corso del tempo con la pratica costante e l’allenamento intensivo, sono riusciti a diventare imbattibili nelle competizioni successive. Un libro completo ricco di riferimenti scientifici e delle ultime tendenze del coaching sportivo, un manuale utile anche per chi cerca un professionista serio che operi in favore dell’ atleta, un vademecum che ben si accompagna anche ai lavori precedenti dell’ autore, orientati a risvegliare nell’ agonista di qualsiasi branca quel quid in più in grado di fare la differenza quando c’è in gioco un risultato eclatante. E se condideriamo che in fondo anche la vita di tutti i giorni non è altro che una competizione sportiva, chiunque da questo libro-metafora potrà trarre suggerimenti utili anche per conoscere meglio se stessi e in ultima analisi a migliorare la qualità del suo vissuto. Federico di Carlo ha sicuramente messo in piedi un campionario completo e accurato sulla pratica sportiva finalizzata al risultato, ricco di riferimento bibliografici e delle ultime novità scientifiche sviscerando un labirinto complesso, dove viene offerto al lettore una formula di orientamento per ritrovare la navigazione corretta verso porti sicuri. Il profilo dell’ autore di può raggiungere qui: https://www.andmybook.it/staff/di-carlo-federico/ mentre sul prodotto libro siamo allineati come sempre a un ottima percezione, tanto per restare in tema. Impeccabile infatti come sempre la confezione del prodotto curata da https://www.andmybook.it/pubblicare-libro-book-on-demand/ costola di Caravaggio editore, indirizzo internet: https://www.facebook.com/pubblicarelibrobookondemand/ .