I 64 percorsi della salute MTB, itinerario “a3”: da Colle di Nocera Umbra a località Salmata, centro soggiorno La Salette

Percorso breve quello che abbiamo ribattezzato A3 seguendo la logica della rappresentazione a scacchiera e dei suoi 64 contenitori (le caselle), meno di dieci km sommando l’andata con il ritorno, visto che il cartello della zona industriale sotto la via Flaminia dà il Santuario di Salmata , https://centrosoggiornolasalette.it/, che oggi funziona anche come ricettiva località turistica per supportare il turismo, con tanto di cartello a km 3. Ovviamente se si fa la via Flaminia occorre ricordare che il primo criterio per godersi una passeggiata in bicicletta è quello di rispettare tutti i criteri della sicurezza: rispetto delle traiettorie rigorosamente a dx, abbigliamento vistoso, casco e via dicendo, CAUTELA e PREVENZIONE prima di tutto. C’è la salita prima Salmata che potrebbe provocare crampi per chi esercita ciclismo condominiale con finalità turistiche e di conoscenza del territorio come il sottoscritto. Ma al di là di queste piccole sofferenze sempre presenti localmente data la toponomastica di colline variegate, il percorso è da relegare a una facile percorribilità se si fa MOLTA attenzione al traffico locale che è sempre imprevedibile e potenzialmente pericoloso per la nostra salute di ciclisti. Esisteranno di sicuro anche strade sterrate di campagna che in qualche modo possono portare a destinazione seguendo la logica della pluralità di soluzione: come nella programmazione del software esistono diversi soluzioni per risolvere un problema e tenendo conto della infinità di stradine di strade sterrate che si dirmanao nella parte posteriore di Salmata non abbiamo dubbi che ci siano labirinti sterrati da esplorare, magari che portano proprio verso Isola o Molina che abbiamo visto analizzando il percorso C7, https://umbriawayinfo.wordpress.com/ .In ogni caso quello che si respira a Salmata soprattutto verso le ore 14 del pomeriggio quando la gente è concentrata più su una pennichella che a fare turismo è un autentica bolla di serenità a contatto con la natura anche se non si voglioni mettere in gioco gli aspetti spirituali fortemente suggestivi presenti. Passeggiata MTB consigliatissima per scattare foto e immergersi in un silenzio zen dove una leggera brezza aiuterà i nostri pensieri a ricomporsi e a rigenerarsi meglio dell’ assunzione di magnesio e potassio. Per la cronaca come si può facilmente reperire in rete, “il santuario é dedicato alla Madonna de La Salette, apparizione della Vergine Maria del 19 settembre 1846 a due ragazzi Massimino e Melania, sulle Alpi francesci a 1.800 metri di altitudine, immerso nel verde delle colline umbre, dispone di ampi spazi per vivere un tempo di silezio e di raccoglimento. Il Santuario è un luogo ideale per chi vuole trascorrer momenti di pace interiore e di riposo, o per chi vuole dedicare il tempo alla meditazione facendo gli esercizi spirituali, incontri di spiritualità, ritiri, etc… ed è allo stesso tempo un luogo tranquillo e di svago per bambini e ragazzi”.

Riassumendo al momento per fare il punto della situazione abbiamo esplorato nei link indicati da umbriaway footer in chiave di conoscenza del territorio MTB i seguenti itinerari della salute e caselle della scacchiera:

e6: vecchia Flaminia e Roveto
c7: MOLINA e frazione ISOLA
f2: l’antica strada degli Uliveti e Boschetto
f1: la sorgente del RIO FERGIA a Boschetto
a3: SALMATA

Albrecht Duerer: il Cavaliere, la morte e l’operatore LIKE!

web design umbria

Mai sentita l’espressione il diavolo é nei dettagli? Si sente ovunque da Netflix alla TV di stato, dalle serie di telegabibbo a radio Clerici dedicata alle torte. Ma nell’ ambito front end developer che sta a significare? Risponde lo stesso Albrecht Duerer, classe ’71 (non facciamo scherzi dell’ anno millequattrocento eh) artista definito eliocentrico dalla critica perchè aveva l’ardire di far scivolare di soppiatto se stesso nelle opere senza dare troppo nell’ occhio. E’ il massimo esponente della pittura tedesca rinascimentale, immette nelle sue creazioni simbolismi e significati esoterici e lo fa tenendo conto di due grandi sguardi, quello che ogni progettista web ha ereditato anche da lui senza saperlo: la visione olistica della pianura vista dall’ alto e lo sporcarsi le mani toccando dal basso i dettagli. Se si guarda appunto l’opera dell’ incipit si scoprirà che quello che fa la differenza nella visione generale è proprio il diavolo, cioè il dettaglio. Ma tradotto nella vita complicata di un frontend developer di tutti i giorni che mi sta a significare? Che quando si mettono in piedi dei progetti sembra tutto facile, tutto olistico. E’ tutto idealizzato, sembra quasi che con uno schiocco di dita come per magia le cose si materializzino tanto per tornare all’ esoterismo sibolico dell’ artista tedesco. Invece sono i dettagli che invadono il tuo corpo, esattamente come il diavolo. Prendiamo ad esempio un problema stupido come quello di un meccanismo di ricerca da far funzionare come https://www.farwebdesign.com/umbriagallery/ : funziona bene, perchè se digito Spoleto salta fuori l’informazione che cerco e idem sia per le cittadine umbre sia per le frazioni sperdute tra le montagne. Ora prendiamo una frazione in località Nocera Umbra cap 06025 che si chiama Ponte Parrano e ipotizziamo che vittime dell’ anzianità ci ricordiamo che questo posto si chiama solo Parrano. Ora minuscolo o maiuscolo è indifferente, ma lo spazio in mezzo fa la differenza, che cosa sta succedendo? Perchè Parrano non salta fuori dalle mie ricerche e come faccio a materializzarlo nella pagina? Bella domanda, vediamo la query cosa dice:

$stmt = $dbh->query(“SELECT * FROM gallery WHERE descrizione LIKE ‘$search%'”);

web design umbriaDiavolo di un operatore like, quando qualcosa non funziona c’è un solo modo per risolvere il problema, ossia ogni frontend developer che non è nato da un falegname e una donna pia e misericordiosa deve andare a cercare quello che gli serve, consultare documentazioni varie e assortite presenti sul web (un imprenditore spietato potrebbe benissimo recidere il cavo della connessione della sua azienda e scoprirebbe in seguito ad un annuncio di selezione pubblicato su uno dei tanti siti di ricerca personale, che non esistono candidati ideali degni di essere assunti a 5000 euro al mese senza che possano cercare in rete le informazioni per risolvere un problema, ed è per questa ragione che un sito come https://stackoverflow.com/ ha così tanto successo, perchè milioni di piagnistei di aspiranti frontend developer trovano conforto in cerca di soluzioni!). Ora dobbiamo capire come funziona il meccanismo nel suo insieme ma poi bisogna prendere il diavolo per le corna. La pagina funziona che in ingresso raccoglie il risultato dello SPARO effettuato dal bottone SEARCH del FORM, questo proiettile viene accolto a braccia aperte con l’espressione:

if (!isset($_GET[‘search’]) || $_GET[‘search’] == null) {
header(“Location:404.php”);
} else {
$search = $_GET[‘search’]; }

che sta a significare se la variabile superglobalse $_GET è diversa da piena (presenza del punto esclamativo di nuovo un dettaglio da non trascurare!) oppure é nulla, ossia se una delle due condizioni diventa vera (OR logico espresso da || significa appunto che basta che solo una delle due condizioni si trasformi in reale) devi annullare la ricerca e tramite una istruzione javascript (header location) devi rimandare l’utente quasi al mittente, ossia mandalo sulla pagina 404.php, altrimenti (che è quella che interessa a noi) la variabile $search diventa uguale al valore della $_GET[‘search’]; ora essendo questo un bel diavolo da gestire, se torniamo indietro e guardiamo la query scopriamo che l’immonda creatura di variabile è proprio inserita dopo l’operatore LIKE e tuttavia continua a sfuggirci qualcosa…ma cosa? Allora bisogna studiare non c’è altro modo, altrimenti da animali onniscienti potremmo fare il mestiere di messia e profeta in terra non quello di frontend developer:

L’operatore LIKE utilizza due tipi di caratteri jolly per verificare le uguaglianze parziali. I due caratteri sono il simbolo percento ‘%’ e l’underscore ‘_’. Il primo carattere jolly sostituisce un insieme di caratteri, il secondo si limita a sostituirne uno solo. Il carattere jolly % aggiunto all’inizio o alla fine (o entrambi) di una stringa consentirà che 0 o più di qualsiasi carattere prima dell’inizio o dopo la fine del modello corrisponda.

Ok dopo aver cosparso con la conoscenza tecnica di internet il nostro diavolo siamo colti da una improvvisa intuizione e scriviamo questo codice che sta a significare “stupida macchina includi nella mia stringa di ricerca tutto il conoscibile, nel senso che adesso mi tirare fuori anche delle stringhe parziali senza senso del tipo ole per estrapolare SPoleTO, per esempio“:

$stmt = $dbh->query(“SELECT * FROM gallery WHERE descrizione LIKE ‘%$search%'”);

web design umbriail risultato finale è degno di un esorcismo, ovviamente prima di mandare la modifica in produzione ci preoccuperemo di risolvere il locale tramite XAMPP o altri software a corredo delle situazioni che sembrano generarsi da sole quando si lavora su progetti concreti che all’ inizio erano pianificabili con estrema facilità anche nelle tempistiche. Per esempio, adesso come faccio a fare ricerche multiple? Ossia se volessi anche cercare come CAP nello stesso form lo posso fare e se si come? Scarichi ormai dall’ impresa di aver riportato il diavolo di Albrecht Duerer nell’ incisione il Cavaliere, la morte e …. web design Umbria delega questa incombenza in uno dei prossimi post, al momento l’obiettivo che ci eravamo prefissi è stato raggiunto, adesso anche lo smemorato può trovare anche una minuscola frazione umbra dal nome composito! La conclusione è che non si può sapere tutto di tutto, soprattutto in un settore dove al forntend developer è richiesto dal mercato di essere uno e trino e deve conoscere tutto della Nina, la Pinta e la Santa Maria. Quando non si sa o non si ricorda qualcosa per risolvere un problema bisogna consultare la documentazione!

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

web-design-umbria

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul li {
list-style: none;
}

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

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

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

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

h1 {
@extend .heading;

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

.footer h3 {
@extend h1;
}

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

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

dove da notare c’è:

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

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

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

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

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

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

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

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

ul li {
list-style: none;
}

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

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

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

h1 {
@extend %heading;

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

.footer h3 {
@extend h1;
}

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

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

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

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

display: flex;

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

<div id=”parent”>

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

</div>

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

<style>

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

</style>

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

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

 

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

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

e vediamo a video l’effetto che fa:

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

 

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

.childitem { width:100px }

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

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

 

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

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

 

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

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

 

vediamo anche l’esempio per la riga:

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

e per la colonna:

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

Viverre pericolosamente con OOP in PHP, costruttori e distruttori, quarta puntata

All’ indirizzo https://umbriawayvalorizza.wordpress.com/2020/04/20/vivere-pericolosamente-con-le-classi-php-terza-puntata/ abbiamo visto come implementare METODI all’ interno di una CLASSE. A questo punto non ci resta che approfondire un importante concetto, quello del COSTRUTTORE. Prendiamo in esame questa classe:

class gm
{
public $nome;
public $cognome;
public $elo;
}

$gm=new gm();
$gm->nome=”Fabiano”;
$gm->cognome=”Caruana”;
$gm->elo=2999;

che cosa succede quando scrivo $gm=new gm(); fuori dal blocco per istanziare l’oggetto fisico figlio della classe? E’ come se ordinassi di creare qualcosa che poi alloggerà in memoria, di fatto sto costruendo dal nulla un oggetto. Ma allora se posso far nascere un oggetto posso anche inizializzare la classe con un costruttore che anzichè farmi richiamare la funzione manualmente come accadeva negli esempi presenti in https://umbriawayvalorizza.wordpress.com/2020/04/20/vivere-pericolosamente-con-le-classi-php-terza-puntata/ mi carica direttamente delle istruzioni e mi inizializza l’oggetto secondo le mie modalità?

Vediamo questo esempio aggiungendo del codice sempre in http://phptester.net/:

class gm
{
public $nome;
public $cognome;
public $elo;

function __construct($n, $c, $e)
{
echo “ORA nasce l’oggetto GM”;
$this->nome=$n;
$this->cognome=$c;
$this->eta=$e;
}
}

//qui siamo usciti dalla classe e istanziamo l’oggetto

$gm=new gm(“Michele”, “Godena”, 2500);

var_dump($gm);

qui applico il metodo costruttore function __construct che assegna i valori iniziali con le proprietà dell’ oggetto, dopodichè contrariamente a quello che succedeva negli esempi precedenti qui siamo in grado di EVOCARE le proprietà della classe semplicemente istanziando l’oggetto con la parola chiave NEW che inietta nell’ output le nostre priorità di visualizzazione in maniera del tutto automatica, senza richiamare nessun nome di funzione. A questo punto il programmatore talentuoso potrà fare la domanda “ma se esiste un metodo costruttore esiste anche un metodo distruttore?”. Certamente vediamo un esempio:

class gm
{
public $nome;
public $cognome;
public $eta;

function __construct($n, $c, $e)
{
echo “ORA nasce l’oggetto $n $c <br>”;
$this->nome=$n;
$this->cognome=$c;
$this->elo=$e;
}

function __destruct()
{
echo “*** $this->nome $this->cognome viene distrutto *** <br>”;
}

}

$gm=new gm(“Fabiano”, “Caruana”, 1987);

var_dump($gm);

La funzione costruttore accetta tre parametri in ingresso. Che cosa vedrò a video dopo aver inizializzato un nuovo oggetto che questa volta ha anche il metodo __destruct() incluso nella classe?

ORA nasce l’oggetto Fabiano Caruana
object(gm)#1 (4) { [“nome”]=> string(7) “Fabiano” [“cognome”]=> string(7) “Caruana” [“eta”]=> NULL [“elo”]=> int(1987) }
*** Fabiano Caruana viene distrutto ***

Sostanzialmente prima viene creato e inizializzato l’oggetto, poi eseguo il metodo var_dump() per vedere il tipo di dati presenti nell’ oggetto $gm dopodichè il costruttore finita la sua missione deve lasciare il posto al distruttore che non fa altro che eliminare dalla memoria l’oggetto.

Javascript e le regular expression parte due: interrogare una stringa

Dopo aver esplorato il potenziale delle espressioni regolari all’ indirizzo https://www.umbriaway.eu/2020/04/07/javascript-e-le-regular-expression-illuminazioni-celesti-pronte-all-uso/ , prendiamo in esame una ulteriore applicazione, quella dell’ interrogazione delle stringhe. Nell’ articolo precedente ci siamo soffermati in particolare sul metodo TEST messo a disposizione dall’ oggetto regular expression, ma di fatto abbiamo a disposizione molte frecce utili come il metodo SEARCH per esempio. Del resto l’uso delle espressioni regolari per interrogare una stringa è aggiuntivo rispetto a tutta una serie di funzioni messe a disposizioni da javascript per modellare le stringhe per l’appunto come substring () che estrapola pezzi di stringa anche inserendo dei parametri tra le parentesi, ossia dicendo da dove iniziare e cosa cercare, oppure la proprietà LENGHT che ci fa tirare fuori la lunghezza in caratteri o anche CHARAT per concatenare in coda altre stringhe al posto del consueto PUNTO o anche SLICE (per dividere in pezzi) piuttosto che REPLACE (che sostituisce) o INCLUDES(“li”) che circoscrive tra parentesi degli elementi specifici, o ancora TOUPPERCASE per trasformare tutto in maiuscolo o TOLOWERCASE per trasformare in minuscolo o piuttosto INDEXOF (“o”) che tira fuori l’indice di un certo carattere o tanto altro come STARTSWITH che interroga una stringa a partire da una data posizione. Insomma con la manipolazione classica delle stringhe abbiamo a disposizione una globalità di metodi da scrivere con la sintassi a gobba di cammello (ad esempio toUpperCase) che ricorrere alle regular expression è una risorsa aggiuntiva però molto utile da conoscere. Abbiamo visto che le regular inseriscono tutti i criteri che l’utente deve rispettare per inserire i dati all’ interno del blocco /……./ e alla fine potremmo anche inserire dei parametri del tipo /……./ g oppure /……./i o anche /………/m che significa rispettivamente una ricerca globale nel contesto analizzato, oppure una situazione no case sensitive nel caso della i dove non ci interessa fare differenza tra maiuscole e minuscole o indicazioni per la gestione multinlinea per la m finale. A questo punto prendiamo ad analizzare una stringa dove sono presenti dei nomi, quindi ipotizziamo di dover lavorare sulla seguente frase dove sono presenti tre nomi che vorremmo estrapolare per esempio dal contesto:

Il sodalizio di questi tre nomi Tizio proveniente da non si sa dove, Caio che arriva dall’ isola che non c’è e Sempronio è ormai consolidato da secoli. Oggi l’espressione si utilizza per citare tre nomi comuni qualsiasi, persone ipotetiche che servono come esemplificazioni schematiche o discorsive…

quindi dichiariamo una variabile e definiamo il suo contenuto usando gli apici ` del nuovo ecma script sei che si ottengono con ALT 96 da tastiera:

var testo = `Il sodalizio di questi tre nomi Tizio proveniente da non si sa dove, Caio che arriva dall’ isola che non c’è e Sempronio è ormai consolidato da secoli. Oggi l’espressione si utilizza per citare tre nomi comuni qualsiasi, persone ipotetiche che servono come esemplificazioni schematiche o discorsive`;
document.write(testo);
document.write(“<br><br>”);

Dopodiché dichiariamo una variabile regularexpression che conterrà al suo interno i criteri di ricerca. Per tirare fuori i nomi vediamo che abbiamo un appiglio e cioè quello delle lettere maiuscole visto che i nomi iniziano in questo modo per cui il criterio della stringa dovrà stabilire che serviranno delle lettere maiuscole a sostegno:

var regularexpression = /[A-Z]/;

per capire meglio questa sintassi si faccia riferimento all’ analisi già messa in atto all’ indirizzo https://www.umbriaway.eu/2020/04/07/javascript-e-le-regular-expression-illuminazioni-celesti-pronte-all-uso/ qui semplicemente stiamo dicendo al nostro pattern che l’utente dovrà digitare delle lettere maiuscole all’ interno del campo. Ma non basta perchè i nomi sono seguiti da lettere minuscole e quindi dobbiamo dire al pattern che ALMENO UN CARATTERE minuscolo dovra essere presente a sostegno dopo il primo blocco e questo lo si ottien tramite il +, quindi la nostra formula magica diventa:

var regularexpression = /[A-Z][a-z]+/;

a questo punto aggiungiamo un modificatore alla fine per dire che ci interessa sottoporre questa espressione contestualmente a tutta la globalità del testo presente e questo comando viene semplicemente messo in atto inserendo una g finale:

// inizio script

var regularexpression = /[A-Z][a-z]+/g;

a questo punto possiamo usare il metodo SEARCH per estrapolare la prima occorrenza dove verrà individuata la prima maiuscola quindi:

var exp = /[A-Z] [a-z]+/g;
risultato = testo.search(exp);
document.write(risultato);
document.write(“<br><br>”);

// fine script

che cosa vedrò a video come risultato? Un bel numero zero e il motivo è evidente perché la frase in posizione zero inizia con una maiuscola quindi ripetiamo l’esperimento portando a minuscola la prima lettera. Ripetendo l’esperimento dopo un aggiornamento a video scopro che quello che ottengo adesso è un bel 32 che sta a significare che la prima lettera maiuscola che incontra parte dalla posizione 32 partendo da zero, provare per credere, pardon contare per credere. Infatti la prima lettera maiuscola di Tizio si trova proprio in posizione 32 e questo non è male come punto di partenza per le nostre ricerche. Ma se volessi qualcosa di più potente che mi dice quali sono tutti gli elementi? dovro usare il metodo match al posto di search:

var exp = /[A-Z] [a-z]+/g;
risultato = testo.match(exp);
document.write(risultato);
document.write(“<br><br>”);

che cosa ottengo questa volta a video? Il browser mostrerà: Tizio,Caio,Sempronio,Oggi non male vero? Se volessi tradurre il mio pattern che ha come criterio la ricerca di una maiuscola seguito da minuscole in una ricerca di occorrenze intese come array? Potrei aggiungere

document.write(“Trovate “+res.length+” occorrenze <br>”);
document.write(res);
document.write(“<br><br>”);

il browser a video mostrerebbe:

Trovate 4 occorrenze
Tizio,Caio,Sempronio,Oggi

essendo il tutto diventato un array adesso è semplice estrapolare con operazione mirate elementi target. Per esempio se volessi estrapolare solo Caio che è il primo elemento dell’ armadio partendo da zero mi basterebbe scrivere:

document.write(res[1]);
document.write(“<br><br>”);

per ottenere la scritta CAIO. E se volessi estrapolare un solo elemento alla volta dalla lista array? Lo posso usare utilizzando il metodo EXEC tipico delle espressioni regolari che mantiene memoria di quanto fatto precedentemente:

document.write(exp.exec(testo));
document.write(“<br>”);

Ok adesso proviamo a fare un ultimo esperimento finale, togliamo la g da:

var exp = /[A-Z] [a-z]+/g;

che cosa otterrei a video ad esempio per il metodo EXEC? La domanda ai posteri ma intuitivamente possiamo già capire la portata di quel piccolo modificatore o punto G: EXEC non conserverebbe memoria delle sue operazioni precedenti per esempio da qui l’importanza di saper mettere modificatori performanti quando richiesto.

FILIP MARIUS LIVIU vs FARAONI ENRICO provinciale Terni turno 5 , 1-3-2020, 0-1 24 m

Al recente torneo provinciale di Terni pur essendo finito per lo spareggio fuori classifica con 3 e mezzo su cinque (quinto assoluto) e quindi deluso per la mancanza di un risultato sportivo, il mio gioco seppure difettoso come dimostra questa partita, è sempre stato combattivo e senza compromessi, cercando di creare squilibri dinamici in tutte le partite (questo significa anche rischiare di finire in posizioni con il bicchiere mezzo vuoto quando ci si spinge troppo oltre per cercare il bicchiere mezzo pieno, per esempio al terzo e quarto turno). Vittoria facile con un esordiente con il sommo Pirc al primo turno, poi Blackmar-Diemer e sacrificio di qualità ricambiato da parte del mio avversario per pareggiare con una ripetizione di posizione al secondo, al terzo sacrificio di donna teorico per due alfieri e pedone culminato con una ripetizione di posizione in una est-indiana famosa (una Kramnik-Kasparov lampo degli anni novanta finita 0-1, vedere https://youtu.be/VommuOQabIw), al quarto interessante gambetto di re con posizioni ricche di tensione e all’ ultimo turno una partita di attacco dove il mio avversario ha dimenticato il re al centro che sarebbe stata memorabile se non fosse viziata da un errore alla tredicesima mossa ricambiato al tratto successivo. Soddisfatto per la ricerca del gioco, ma non per il risultato! Alla fine il prode Achille torna a casa un pò amareggiato ma con belle partite combattute senza sconfitte tra cui anche questa scorretta creazione finale e soprattutto per aver giocato varianti di apertura inusuali che sembrano vietate nella prassi di torneo!

1 d4 d6

Una mossa flessibile che apre i giochi all’ est indiana, alla vecchia indiana, alla pirc, all’ olandese Leningrado, utile anche per lasciare a bocca asciutta i fan di 2 Ag5

2 g3 f5

il nero sembra aver deciso per impiantare una olandese Leningrado

3 Ag2 Cf6 4 Cd2!?

una mossa giocabile anche se lascia mano libera all’ avversario al centro

4..e5 5 de5 de5 6 c3!

creando problemi sulle diagonali bianche a2-g8 (in congiunzione con una ipotetica Cf3-g5) e h1-a8

6..Cbd7 il nero vuole impedire Db3 7 Db3?!

Non precisa ma il bianco non ha nulla da temere per il prosieguo. 7 Cc4 avrebbe generato una lotta complessa

7..Cc5 8 Dc2 c6 9 Cb3!? (9 b4!?) 9..Ae6 10 Cf3 Dc7!

il nero il nero si prepara all’ arrocco lungo senza temere al momento 11 Cg5 per la ritirata dell’ alfiere momentanea sulla casa c8 (d7 da valutare) con successiva h6

11 Ad2?! 11 Cg5 sembrerebbe comunque migliore con gioco pari 11..h6!

giusta ma giocata con troppa superficialità in quanto la generazione di complicazioni proposta da questa mossa produce un impegno di calcolo che il nero forte del suo titolo di coffee house player trascura, del resto se esite un titolo che è quello di GMC (Grande Maestro Condominiale) ci sarà un perché

12 Ch4!

il mio avversario non titolato mette subito il dito nella piaga, provocando nella testa del nero eventi sismici imprevedibili

12..Cb3

13..Df7! ma questa semplice mossa che tiene equilibrato il gioco con le sue insidie tattiche (punto debole b3, inoltre prendendo in f5 di cavallo si va incontro al boomerang Cg4 per esempio) non mi è mai sfiorata per l’anticamera del cervello!

13 ab3 000?

ecco l’idea del nero, sicuramente sbagliata a livello di GM, ma creativa per perdere a livello di GMC! Anche qui 13..Df7 è ok per il nero ma per qualche strano motivo questa mossa non è mai comparsa negli scenari che avevo in testa. Portando in gioco la Ta8 difendo f5 tatticamente a causa della replica Txd2 che costerebbe cara al bianco (occorrerebbe un gioco preciso per pareggiare dopo 14 Cf5? Td2 15 Rd2 Dd7 16 Dd3 Af5 17 Dd7 Cd7 18 Ta7 Cb6 19 e4 Ae6 20 Rc2=) e cerca di distogliere l’attenzione dalla mossa giusta e cioè quella che porterebbe il bianco in vantaggio con 14 Cg6! dopodichè il nero cade in posizione inferiore dopo 14..Tg8 15 Cf8 Tf8 16 Ta7 Rb8 17 Ae3 (anche la ritirata di torre sembra ok, il nero giocherà g5-f4 sull’ arrocco corto del nemico che però ha una posizione solida con un pedone in più) 17..f4 18 Ac5 Cd7! 19 Af8 Ra7 20 Ag7 con complicazioni vincenti per il B;  Il nero vorrebbe alimentare idee di attacco e di sviluppo, la cosa funziona ma solo se gli viene permesso.

14 Ta7?

L’abbaglio tattico ha funzionato, adesso gli eventi svoltano a favore del nero. Come dice Soltis la partita a scacchi è un insieme di mosse sbagliate, così anche il bianco umanamente mette il piede in fallo. Così come il nero ha dimenticato Df7, anche il Bianco dimentica Cg6, con conseguenze drammatiche.

14..Rb8 15 Ta1 Ac5

il nero punta minacciosamente un alfiere contro il re nemico, trascurando il fatto che dopo la spinta in b4 e successiva Da4 il bianco creerebbe delle minacce di matto immediato che costringerebbero alla difesa

16 b4!? se il bianco opta per 16 00 il nero con g5 potrebbe intorbidire le acque, mentre adesso a 16 Cg6 con la famosa idea Cxe5 e diagonale h2-b8 scricchiolante  il nero oltre a 16..Cg4 con l’idea 17 Ch8? (17 00 The8 produce posizioni caotiche) 17..Af2+ 18 Rf1 Db6 ed è vinta per il nero, potrebbe replicare energicamente con 16..Txd2! e gioco poco chiaro 16..Af2!?

Con il senno di poi l’alternativa 16..Ab6 17 c4 g5 18 Cf5 Td2 dovrebbe tenere, ma ormai il nero ha deciso di cercare la gloria come il prode Achille, se non altro guardiamo l’aspetto positivo, non ci sono più le minacce di matto del bianco sulla colonna A e si gioca a una porta sola!

17 Rf2 Cg4 18 Re1 Db6

il nero ha un pezzo in meno ma una forte iniziativa

19 e3?

e finalmente la pressione del nero produce l’errore desiderato, il bianco fino a questo punto aveva retto botta! Era forzata 19 Tf1 che avrebbe portato a grandi complicazioni favorevoli al bianco dopo 19…Txd2! unica (19..Ch2 è inguardabile a causa di 20 Cg6 +-) 20 Dd2 21 Dc1 (21 Dc2 Ce3 dovrebbe far tirare al nero un respiro di sollievo dopo un cumulo di complicazioni che scaturiscono da 22 Da4 g5!) 21..g5 22 Ah3 Ce3 23 Cg2 Td1 24 Dd1 Cd1 25 Td1 g4 il bianco dovrebbe restare con un pedone in più anche se la posizione rimane caotica

19..Txd2!

dopo 19…Ab3??  20 Db3 Td2 21 Rd2 +- il bianco scappa verso la casa a2. Con la mossa del testo il nero alimenta l’attacco e si ritrova con una torre in meno ma a ben guardare quello che fanno i pezzi avversari ci sono ottime chanche di portare a casa il punto perchè bordate di questo tipo psicologicamente fanno perdere lucidità e freddezza ed è un attimo a subire una miniatura. Per inciso anche 19..g5 sembra buona per alimentare l’attacco dopo 20 Cf3 f4 ma la mossa del testo è più spettacolare e soprattutto mostra come diversi pezzi bianchi siano sui bordi della scacchiera inattivi, cosa che permette al nero di giocare anche senza una figura importante

20 Dd2 Td8 21 De2 Ce3

il momento critico della partita, bisogna assolutamente cercare di portare un pezzo a protezione della casa e2 con Af1 o Af3 ma l’attacco del nero è promettente, ad esempio dopo 22 Af1 f4 23 Df2 va incontro a mosse fantasy tipo 23..Da7!! 24 Ta7 (se sposto la torre in c1 24..Da4 dovrebbe produrre kaos tattico) e il nero riesce per lo meno a dare il perpetuo; dopo 22 Af3 e4! il nero non può perdere. A dimostrazione di quanto sia delicato difendersi qui con il bianco c’è anche la linea 22 b3 g5 e la posizione del bianco è insostenibile

22 Cf3??

il bianco collassa

22..Ac4 23 Df2 Cg2+

o anche 23..Cc2+ seguita dal matto in due

24 Dg2 De3

0-1

Operazione P.I.C. un mistero nelle isole Partenopee – &myBook edizioni

Ambientare una storia alle isole partenopee significa già a prescindere essersi meritati una valutazione positiva sull’ intero lavoro complessivo anche se poi approfondendo l’analisi dovessero comparire delle zone d’ombra. Guardiamo ad esempio che cosa è stato in grado di fare su vasta scala con uno dei capisaldi della creative-writing il grande Francis Scott Fitzgerald, noto esponente della lost generation, con il tema dell’ AMBIENTAZIONE in TENERA E’ la NOTTE, lavoro sottovalutato dalla critica che ne segnò il declino, vedere dettaglio https://umbriawaytarget.wordpress.com/2019/09/13/tenera-e-la-notte-capolavoro-di-ambientazione-che-segno-il-declino-di-francis-scott-fitzgerald/. Achi con OPERAZIONE P.I.C. (titolo che incuriosisce) sfruttando le suggestioni naturali di luoghi bellissimi come Capri, Ischia e Procida mette in moto un complotto di sette speculative e non che costringono due giovani ambiziosi studenti (Rossy alias Rossella Spargo psicologa forense e Arcos Mele antropologo) a districare un fitto e articolato mistero dove tre sacerdoti vengono giustiziati, sotto la minaccia incombente di un gruppo di esaltati che forse con la religione hanno ben poco a che fare e che altro non sono che entità facilmente manipolabili da una cupola piramidale rovesciata che manda in prima linea biechi subalterni per fare il lavoro sporco. Così quando a fatica si riesce a districare la matassa grazie all’acutezza investigativa dei due ragazzi e a imbastire un processo contro quella che è la base allargata che gli organi giudiziari trovano in superficie, adepti attivi in tutta Italia, non può mancare inevitabilmente qualche presenza invisibile che dall’ alto si muove dalla punta della piramide per rimettere tutto a posto e scagionare i suoi affiliati dalla persecuzione probatoria usando un potere occulto e risorse negate ai più comuni mortali, un meccanismo che tutti quelli che hanno attraversato la storia reale della prima repubblica italiana dovrebbero conoscere bene. Paradossalmente è proprio qui che la vicenda diventa più action movie divertente e cinematografica rispetto al troppo veloce ingresso monocorde che porta al punto di esplosione, coinvolgendo il lettore con più varietà di tono e con i nostri due eroi, presi anche da conflitti sentimentali irrisolti come si conviene a un buon scritto di tensione, costretti a sfuggire a personaggi senza scrupoli che non hanno remore a risolvere i problemi con lapidarie esecuzioni orizzontali. I punti di forza di questa lunga vicenda sono senza ombra di dubbio AMBIENTAZIONE e STORIA, dove parlando dello scheletro portante di ossa e vertebre simboliche del dinosauro che tiene in piedi la storia, fatta di muscoli e fibre e sangue, quindi di eventi e luoghi cronologicamente circoscritti, il misterioso autore dimostra di POSSEDERE ELEMENTI CONOSCITIVI sul processo penale e sulle fasi giuridiche che danno consistenza all’ intreccio. Certo non possono mancare le zone d’ombra come è inevitabile per ogni autore che ha un potenziale di scrittura superiore alla prestazione, primo fra tutti l’idea che per far transitare e accompagnare il lettore attraverso una lunga scala verso il finale si presume a lieto fine, debbano essere usati gradini tratteggiati più grandi di quelli che sono i piedi in transito, perchè per far funzionare tutto in maniera perfetta con le dovute sfumature tra un passetto e l’altro della trama, sarebbero state necessarie almeno il doppio delle pagine. Poi non è il caso di fare troppo i precisini, ma l’inserimento del colorito napoletano avrebbe potuto essere più consistente e funzionale, perchè il gergo locale dei personaggi sicuramente aiuta a rafforzare l’idea di ambientazione. Nel complesso una storia interessante ricca di potenziale, scritta in maniera fluida e scorrevole, che lascia una traccia positiva di sè, anche per la presenza di temi sensibili che colpiscono il nostro attuale momento storico, come quello dei polveroni mediatici raccontati mirabilmente dall’ autore che accompagnano la nostra vita quotidiana con le loro emanazioni di fuffa altisonante, tanto da costringerci a cercare irricuperabili verità perdute, capisaldo che dovrebbe essere dottrina portante di ogni cronaca giornalistica. Sul sito di &MyBook abbiamo anche una interessante intervista fatta al misterioso autore: https://www.andmybook.it/2018/12/06/intervista-ad-achi-lautore-di-operazione-p-i-c-un-mistero-nelle-isola-partenopee/ mentre per la scheda del libro possiamo visitare https://www.andmybook.it/prodotto/operazione-p-i-c-un-mistero-nelle-isole-partenopee/. Impeccabile 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/ .

Tenera è la notte, capolavoro di AMBIENTAZIONE che segnò il declino di Francis Scott Fitzgerald

Come risolse il problema dell’ atmosfera per coinvolgere il lettore Francis Scott Fitzgerald in Tenera è la notte nella Francia degli anni venti? Con l’ambientazione! AMBIENTAZIONE? La storia è una prerogativa dei luoghi e dei personaggi, del loro modo di esprimersi e del loro gergo dialettale, delle loro abitudini, del loro modo di viviere il territorio. Certo nei favolosi anni venti mi tiri fuori la Costa Azzurra in quel di Cap d’Antibes per forza che ci si ferma ammagliati ad ammirare il paesaggio insieme all ‘autore, vivendo un viaggio di picaresche avventure. Poi negli anni il mondo aveva caratteristiche diverse proprio in quegli anfratti, la gente aveva una sola preoccupazione in testa: divertirsi, divertirsi e ancora divertirsi! Certo questa è la cupola dive si svolgerà la storia, ma poi dopo c’è il famoso scheletro del dinosauro, se nella storia ci metti solo la testa senza le vertebre finali della coda il rimpimento non funzionerà e il tutto rimarrà mutilato. E se sei un ambizioso romanziere tieni conto che solo dopo aver scritto la tua storia che funziona (e la cosa non è semplice) devi ricominciare da capo perché senza una revisione critica hai solo fatto il cinquanta per cento del lavoro. Certo, all’ inizio se devi farti le ossa ti conviene ripiegare sul racconto che ha una revisione più gestibile che puoi controllare. IIn fondo il lettore percepisce che dall’ altra parte ha a che fare con un pittore che dispensa pennellate di sfondo dove a breve i personaggi ne combineranno di tutti i cfolori, ma la situazione contestuale è già tratteggiata (il contenitore) e siamo catapultati negli ambienti giusti per assaporare i contenuti. E’ facile stregare l’interlocutore con il sapore della salsedine marina o con il fraseggio dell’ acqua che sbatte su un corpo che si bagna eh?! Per chi conosce la storia ci sono all’ interno del racconto degli elementi autobiografici da parte di Fitzgerald che ricordiamoci doveva fronteggiare nel mondo reale una grave malattia mentale dell’ amatissima moglie. Francis non superò i 44 anni di età, prerogativa spesso degli autori americani che scrivevano più o meno nello stesso periodo e che affogavano i loro dispiaceri nell’ alcol. Ottenne il successo con di qua del paradiso divenendo l’idolo dei giovani ma anche presto ricco e famoso, cosa che gli consentì viaggi in Europa e la permanenza in Francia e a Parigi con la sua amata Zelda Sayre che sposò. La sua produzione era caratterizzata da una cronaca del suo mondo reale, quello delle feste e dell’ euforia spensierata fatta di appagamenti sensoriali, uno stile anticonformista e romantico tipica di quella generazione anni venti che tante analogie ha anche con Hemingway di cui era amico. Era un esponente della lost generation e il declino iniziato con Tenera è la notte avvenne in concomitanza con il tracollo nervoso della moglie, che lo costrinse a ripiegare sul lavoro di sceneggiatore a Hollywood dove non riuscì a ottenere grandi risultati ma lascio in eredità gli “ultimi fuocchi” completato poi postumo dall’ amico Edmund Wilson. Del resto che cosa può fare l’ambientazione nel sottovalutato romanzo maledetto “Tenera è la notte” dell’ epoca lo possiamo immaginare. I sensi durante l’estate sono sollecitati in fondo parliamo della stagione degli amori. Le vacanze sono sinonimo di libertà e di libera espressione. Il mare invita a lasciarsi andare. La bellezza del paesaggio si fa specchio dell’ interiorità dei personaggi e in tenera è la notte diventa una esplosione di vitalità grazie alla spiaggia al mare e al sole! Da notare come Fitgerald nello scritto che segue dosa sapientemente gli aggettivi quasi a voler suggerire il sapore di certe situazioni e farcele assaporare! Se azzecchi l’ambientazione se già a buon punto caro aspirante scrittore anche se difficilmente potrai arrivare in tempi brevi all’ eleganza stilistica del maestro Francis Scott Fitgerald!

 

Sulla bella costa della riviera francese, a mezza strada tra Marsiglia e il confine italiano, sorge un albergo rosa, grande e orgoglioso. Palme deferenti ne rinfrescano la facciata rosata, e davanti a esso si stende una breve spiaggia abbagliante. Recentemente è diventato un ritrovo estivo di gente importante e alla moda; dieci anni fa, quando in aprile la clientela inglese andava verso il Nord era quasi deserto. Ora molte villette vi si raggruppano intorno; ma quando questa storia incomincia, soltanto i tetti di una dozzina di vecchie ville marcivano come ninfee in mezzo ai pini ammassati tra l’Hotel des Etrangers di Gausse e Cannes, cinque miglia più in là. L’albergo e quel luminoso pezzetto di stuoia che era la spiaggia, erano una sola cosa. La mattina presto l’immagine lontana di Cannes, il rosa e crema delle vecchie fortificazioni, le Alpi purpuree che cingevano l’Italia, venivano gettate nell’acqua e giacevano tremolanti nei gorghi e negli anelli spinti alla superficie dalle piante marine attraverso la limpida acqua bassa. Prima delle otto un uomo scendeva sulla spiaggia in un accappatoio azzurro, e dopo molte applicazioni preliminari di acqua fredda sul corpo, e molti brontolii e molti sospiri, si agitava un minuto in mare. Quando se ne era andato, spiaggia e baia restavano in pace per un’ora. Qualche mercantile arrancava verso occidente sull’orizzonte; i fattorini dell’autobus gridavano nel cortile dell’albergo; la rugiada asciugava sui pini.Un’ora dopo le trombe delle macchine incominciavano a suonare dalla strada tortuosa che costeggiava la bassa catena dei Maures, che divide il litorale dalla vera e propria Francia provenzale.

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

Su ↑