101 mosse da giocare per dare scacco matto a MONGO DB e alla collection Morphy!

DALLA TEORIA ALLA PRATICA: costruire una collection dati con Mongo Db

Salta subito all’ occhio il numero di mosse, ci vuole così tanto? Magari una bella miniatura in 17 mosse alla Paul Morpy come nella https://www.chessgames.com/perl/chessgame?gid=1233404 no? Si perchè Mongo DB della Atlas in questo momento è in crescita vertiginosa come strumento per memorizzare i dati, se non altro per le sue particolarità uniche che lo vedono salvare gli input da da tastiera in formato stringa per esempio, senza l’ausilio di database tradizionali come mysql che presuppongono un lavoro di preparazione. Da qui l’individuazione di un vantaggio immediato, quello di non dover lavorare prima sul DB per iniettare campi e valori, perché Mongo crea tutto in automatico. Quando si installa da https://www.mongodb.com/ ci avvisano che MongoDB è un database distribuito per scopi generici, basato su documenti, creato per i moderni sviluppatori di applicazioni e per l’era del cloud. Ok si ma quando lo inserisco sulla macchina di default dove va a finire fisicamente? All indirizzo “C:\Program Files\MongoDB\Server\numero.versione\bin” ok e poi conviene anche modificare la variabile di ambiente su Pannello di controllo\Sistema e sicurezza\Sistema dove sceglieremo l’opzione di sicurezza avanzate, questo per addizionare il path dell’ eseguibile in entry level. Ok ma come mi districo, ad esempio se volessi mettere in piedi una appllicazione con php e mongo lo posso fare? Si ma preparando prima l’ambiente, occorre installare una patch che consente ai due di parlarsi e modificare il php.ini nella sezione extension cosa che vedremo in un altro articolo con Umbriaway Consulting. Inoltre sul menù di avvio Mongo ci mette a disposizione una Compass GUI che ci consente di collegarci direttamente al DB sfruttando una visualizzazione grafica incisiva per cui possiamo fare tutto senza finestra CMD e comandi manuali, perché abbiamo a disposizione tutti i metodi per creare, inserire, aggiornare cancellare i dati con un semplice click, senza ricordare a memoria i comandi per gestire il DB. Tuttavia questi comandi bisogna conoscerli così come certe particolarità legate agli oggetti javascript circoscritti dalle parentesi {graffe}. Superiamo quindi il trauma iniziale con alcune mosse di approccio. Partiamo dal link sopra: https://www.chessgames.com/perl/chessgame?gid=1233404. Scorporiamo i dati del nostro database: i campi tolto ID che generalmente viene inserito dalla macchina (identificativo unico che rende la singolarità impossibile da clonare, record quindi non ridondante all’ interno del DB sucui possiamo fare operazioni di filtraggio esclusive) a noi serviranno:

Nome del giocatore analizzato, player
Game vs un avversario, game
Apertura giocata, opening
classificazione di apertura, eco
luogo di scontro, where
data di scontro, when
esito dello scontro, result
mosse giocate, moves
link di riferimento per vedere la partita, nome campo link

tradotto nella pratica nel caso specifico:

Nome del database = Morphy
game = Paul Morphy vs Duke Karl / Count Isouard
opening = Philidor Defense: Main Line
eco = C41
luogo = Paris FRA
when = 1858
result = 1-0
moves = 17
link = https://www.chessgames.com/perl/chessgame?gid=1233404

A questo punto come faccio a creare il database con Mongo? E a inserire i dati? In quale formato? E’ buona regola comportamentale per un web developare che deve lavorare in autonomia consultare sempre la documentazione, quindi nel caso specifico: https://docs.mongodb.com/ dove ci sono tutti i riferimenti utili per iniziare dalle basi e anche quelli esterni per approvvigionarsi: https://university.mongodb.com/ per esempio. Ma iniziamo a esplorare i comandi base da dare a terminal (per chi utilizza studio code come editor ci sono molti plug in che consentono una connessione diretta grafica con i database presenti, basta digitare mongo nella stringa di ricerca plug-in, in ogni caso ricordiamoci che COMPASS GUI ci viene installato di default se la nostra esigenza è fare tutto da click e tasto destro senza impartire comandi). Lanciato Mongo se voglio vedere tutti i databases presenti lancio il comando:

> show dbs

ottenendo a video:

admin 0.000GB
chatHistory 0.000GB
config 0.000GB
local 0.000GB

per entrare in un database uso il comando use seguito dal nome db:

> use chatHistory

switched to db chatHistory

> use admin

switched to db admin

diciamo che voglio creare una collections di dati per morphy sotto il DB Admin come fare?

> db.createCollection(“morphy”)

{ “ok” : 1 }

se volessi vedere quante collection ho dentro il database admin per vederle come faccio?

> show collections

morphy
system.version

se volessi vedere i dati? Uso > db.morphy.find() ma al momento la collection è vuota quindi inserisco il primo record usando la sintassi javascript che usa i blocchi di graffa per catturare i dati chiave/valore con:

db.morphy.insertOne({})

dobbiamo passare questi dati:

Nome del database = Morphy
game = Paul Morphy vs Duke Karl / Count Isouard
opening = Philidor Defense: Main Line
eco = C41
luogo = Paris FRA
when = 1858
result = 1-0
moves = 17
link = https://www.chessgames.com/perl/chessgame?gid=1233404

quindi usando la sintassi javcascript il tutto diventa:

> db.morphy.insertOne({nome:”Morphy”, game:”Paul Morphy vs Duke Karl / Count Isouard”, opening:”Philidor Defense: Main Line”, eco:”C41″, where: “Paris”, when: “1858”, result:”1-0″, moves:”17″, link:”https://www.chessgames.com/perl/chessgame?gid=1233404″})

e il risultato è un successo:

{
“acknowledged” : true,
“insertedId” : ObjectId(“5ec4ecfebb517f0d4ece84cd”)
}

web developer umbriaFANTASTICO! Siamo riusciti a superare il primo livello di difficoltà per comprendere Mongo DB, “acknowledged” : true è utile da settare in quei casi dove ad esempio ho dei log e non mi interessa entrare in una condizione vero/falso per il riconoscimento di chi ha immesso i dati, nel senso che inserendo false potrò dire se c’è il log dammi semplicemente i dati in output altrimenti non mostrarmi altro, operazione che velocizzerebbe di più l’estrazione. Immediatamente sotto ho il mio ID creato con “insertedId” : ObjectId(“5ec4ecfebb517f0d4ece84cd”) e chi smanetta con mysql vede subito la differenza rispetto a mysql dove dovevo settare in anticipo che ID doveva essere primario, intero, autoincrementante etc etc, qui è tutto automatizzato. Proviamo a rilanciare ora il comando find che prima non funzionava e vediamo l’effetto che fa:

> db.morphy.find()

mi viene restituito a video l’oggetto di interesse.

{ “_id” : ObjectId(“5ec4ecfebb517f0d4ece84cd”), “nome” : “Morphy”, “game” : “Paul Morphy vs Duke Karl / Count Isouard”, “opening” : “Philidor Defense: Main Line”, “eco” : “C41”, “where” : “Paris”, “when” : “1858”, “result” : “1-0”, “moves” : “17”, “link” : “https://www.chessgames.com/perl/chessgame?gid=1233404” }

c’è da dire che la creazione delle collection può anche non passare entrando per un DB di default. Posso sempliciemente dichiarare il nome della collection con o senza il CREATE e in entrambi i casi il contenitore per i miei documenti mi verrebbe generato in automatico. In uno dei prossimi articoli affronteremo con Umbriaway Consulting le questioni legate all’ aggiornamento e alla cancellazione dei dati, nonchè ai filtri di estrazione informazioni da una collection.

CONCLUSIONI

Il trauma iniziale per i problemi di configurazione e l’uso di Mongo DB è stato superato e la porta si è aperta, siamo in grado di selezionare i DB, creare collection, inserire dati e creare oggetti. Ma avanzando abbiamo di fronte un labirinto di porte che apre universi complessi, ce ne rendiamo conto solo approdando a https://docs.mongodb.com/ dove la mole di info per l’operatività dell’applicativo è corposa. La semplicità salta subito all’ occhio, così come l’immediatezza del risultato. Sicuramente uno strumento da conoscere e usare in ambito web development.

Node: terrore dallo spazio profondo, prima puntata

Node é la dimostrazione lampante di come gli aspetti nuovi dell’ esistenza, quelli che ci fanno uscire dalla nostra zona di confort, siano perfetti per spaventarci ed intimorirci con i suoi inediti comandi da common line interface o CLI o anche CMD, l’antica finestra dos che usavamo tanti anni fa per digitare comandi manuali sulle directory. Terrore dallo spazio profondo (Invasion of the Body Snatchers) è un film del 1978 diretto da Philip Kaufman, remake del classico del 1956 L’invasione degli ultracorpi, tratto dall’omonimo romanzo del 1954 dello scrittore Jack Finney. ll fatto è che Node con il suo javascript lato server non solo ha portato un vento innovativo rispetto ai vecchi clichè, ma anche tante angosce esistenziali dal momento che ci costringe a programmare in un modo del tutto nuovo, decisamente dinamico. Il software installabile da https://nodejs.org/it/ . Abbiamo già detto che il framework lavora in backend e che rappresenta un ambiente di esecuzione asincrono? Supporta nativamente i file json, ha un manager che si preoccupa di installare pacchetti, non è difficile da imparare come Angular. Come al solito per lavorare con node servirà un editor a piacere tipo il bellissimo Visual Studio Code: https://code.visualstudio.com/ . Molti programmatori al top usano WebStorm ricco di funzionalità ma possiamo dunque definire le scelte personali mode? Soprattutto se sono a pagamento? Anche brackets non é male, insomma c’è l’imbarazzo della scelta. Ora tocca a NPM il gestore dei moduli da installare: https://www.npmjs.com/; a questo punto sappiamo che dobbiamo prima entrare nella cartella di lavoro, magari sul desktop per semplicità, poi una volta puntata dobbiamo inizializzare il progetto con il comando npm init che crea il famoso package.json, questo come fase di preparazione dove abbiamo nella root l’indicazione del file da lanciare o rendere eseguibile (index.js) e tutte le altre dipendenze scarne al momento di un progetto vuoto ancora da riempire con moduli come express per esempio che si occupa della gestione server. Questo nel caso che non si vogliano modificare le impostazioni di default altrimenti posso modificare il mio entry level e il nome del file a inizio processo. Con npm install express posso installare il mio modulo funzionalità per la gestione HTTP e delle richieste post e get e asincrone. Con npm install creo le dipendenze, installo le dipendenze nella cartella node_modules locale. In modalità globale, ovvero, con -g o –global aggiunti al comando, installa il contesto del pacchetto corrente, ovvero la directory di lavoro corrente, come pacchetto globale. Per impostazione predefinita, npm install installa tutti i moduli elencati come dipendenze nel pacchetto json. Per disinstallare i moduli uso npm unistall express per esempio. Analizziamo ora questo semplice script:

const http = require(‘http’);

function checkTime(i) {
if (i < 10)
i = “0” + i;

return i;
}

http.createServer(function(req, res){

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();

// Adds a zero in front of numbers < 10
m = checkTime(m);
s = checkTime(s);

res.end(h+ “:” + m + “:” + s);

}).listen(8080);

essendo il modulo http simile a una rete che smista chiamate e risposte, request e response, gli esperimenti che potremmo fare riguardano proprio questo ambito, con risposte o schiaffi alla palla tennistica che avvengono simultaneamente (io chiedo e tu mi rispondi senza fare altro ma se c’è un processo in corso viene penalizzato con un abbondanza di risorse) o palle-metafora che vengono gestite con intervalli di tempo asincrono a seconda dei compiti da svolgere a sistema. La funzione all’ inizio richiama un modulo che gestisce le chiamate server, poi definisce una funzione che prende in ingresso un argomento che non fa altro che controllare lo stato della pagina e aggiornarla ogni dieci secondi. Sotto abbiamo una semplice funzione di chiamata server in cui diciamo anche di rispondere e di aggiornare lo stato dei minuti e dei secondi al tempo che abbiamo definito dalla funzione checkTime. Questo potremmo considerarlo un esempio funzionale di chiamata asincrona elementare gestita solo da HTTP module senza l’intervento di express. Quindi alla domanda ma siamo in grado di mettere in piedi server artigianali dell’ era primordiale senza installare moduli esterni ma richiamando le risorse già integrate in node la risposta é sì! Andiamo oltre e analizziamo un caso ancora primordiale di richiesta ma leggermente più complicata rispetto al solo metodo http. Qui si tratta di materializzare una pagina che però ha delle risorse costruite dinamicamente in un ciclo che le localizza e che avrà due stati: se queste risorse non vengono viste allora siamo nel blocco errore dove compariranno i messaggi tematici, altrimenti significherà che é andato tutto bene e che la request avra avuto una sua response con una serie di goie sullo stato 200 (success!) di conferma ricezione preliminare al rendering della pagina index.html:

const http = require(‘http’);
const fs = require(‘fs’);
const url = require(‘url’);
const path = require(‘path’);

http.createServer((req, res) => {

if (req.url == ‘/’) {
req.url = ‘/index.html’;
}

var urlParts = url.parse(req.url);

fs.readFile(urlParts.pathname.substr(1), (err, data) => {

if (err) {

res.writeHead(404);
res.end();
return;

}

var headers = null;
var fileExtension = path.extname(urlParts.pathname.substr(1));

switch (fileExtension) {

case ‘.html’:
headers = {‘Content-Type’: ‘text/html’};
break;

case ‘.css’:
headers = {‘Content-Type’: ‘text/css’};
break;

case ‘.js’:
headers = {‘Content-Type’: ‘text/javascript’};
break;

case ‘.jpg’:
headers = {‘Content-Type’: ‘image/jpeg’};
break;

default:
headers = {‘Content-Type’: ‘application/octet-stream’};

}

res.writeHead(200, headers);
res.end(data);

});

}).listen(8080);

da notare lo script come controlla le richieste in base ai criteri di autorizzazione Content-Type: identifica il tipo di contenuto e decide quali moduli possono contribuire al risultato a video della nostra chiamata asincrona; andando sulla porta 8080 di default della localhost sarà il seguente:

Se volessi creare un semplice collegamento sincrono come faccio? Analizziamo questo file:

const http = require(‘http’);
const fs = require(‘fs’);

http.createServer( (req, res) => {

var data = fs.readFileSync(“../index.html”);
res.end(data);

}).listen(8080);

Lo script integra con il metodo require i moduli http e fs (file system) per poter funzionare, poi mette in moto una funzione abbreviata arrow secondo la nuova sintassi javascript che fa una richiesta per avere una una risorsa e ottiene una risposta infine con la proprietà end del metodo res. E se volessi ottenere una risposta asincrona come faccio? Analizziamo il seguente file script:

const http = require(‘http’);
const fs = require(‘fs’);

http.createServer( (req, res) => {

fs.readFile(‘../index.html’, (err, data) => {

if (err) throw err;

res.end(data);

});

}).listen(8080);

mentre il file di prima si limitava a leggere una risorsa e a restituirla con l’oggetto fs importato, qui la funzione ARROW che si appoggia su fs.readFile che di default è asyncrono se non specificato, mette in scena una istruzione condizionale con un controllo d’errore che prima non c’era, la risorsa viene letta e restituita nel suo contenuto. Sui metodi e le proprietà dell’ oggetto HTTP di NODE si rimanda alla documentazione ufficiale all’ indirizzo: https://nodejs.org/api/http.html . A questo punto facciamo entrare il CR7 della situazione, analizziamo il seguente file server.js che carica il contenuto di una risorsa previa interrogazione:

const http = require(‘http’);
const fs = require(‘fs’);
const url = require(‘url’);
const path = require(‘path’);
const qs = require(‘querystring’);

var doc = null;

http.createServer((req, res) => {

if (req.method == ‘GET’) {

if (req.url == ‘/’) {

req.url = ‘/index.html’;

} else if (req.url == ‘/load’) {

if (doc == null) {

res.writeHead(200);
res.end();

} else {

res.writeHead(200, {‘Content-Type’: ‘application/json’});
res.end(JSON.stringify(doc));

}

}

var urlParts = url.parse(req.url);

fs.readFile(urlParts.pathname.substr(1), (err, data) => {

if (err) {

res.writeHead(404);
res.end();
return;

}

var headers = null;
var fileExtension = path.extname(urlParts.pathname.substr(1));

switch (fileExtension) {

case ‘.html’:
headers = {‘Content-Type’: ‘text/html’};
break;

case ‘.css’:
headers = {‘Content-Type’: ‘text/css’};
break;

case ‘.js’:
headers = {‘Content-Type’: ‘text/javascript’};
break;

case ‘.jpg’:
headers = {‘Content-Type’: ‘image/jpeg’};
break;

default:
headers = {‘Content-Type’: ‘application/octet-stream’};

}

res.writeHead(200, headers);
res.end(data);

});

} else if (req.method == ‘POST’) {

var body = ”;

req.on(‘data’, (data) => {

body += data;

});

req.on(‘end’, () => {

var postData = qs.parse(body);

if (Object.prototype.hasOwnProperty.call(postData, ‘title’) && Object.prototype.hasOwnProperty.call(postData, ‘body’)) {

doc = postData;
res.writeHead(200);
res.end();

} else {

res.writeHead(400);
res.end();

}

});

}

}).listen(8080);

In questo script vengono contemplate diverse richieste dalla tipologia diversa, se è una richiesta GET fai qualcosa, se è una richiesta di tipo POST, fai qualcos’ altro, se utilizzi il metodo LOAD comportati in maniera diversa: Nel file sono presenti metodi per convertire il contenuto da js a json e poi metodi per parserizzare la restituzione. Il file è di supporto a una pagina html appoggiata a sua volta a una cartella script che salva il contenuto del documento e lo invia con il metodo post alla pagina localhost:8080, la richiesta è gestita a seconda della tipologia dalla pagina server.js in chiave dinamica. Possiamo definirla una applicazione completa per scrittori perchè il testo aggiunto viene salvato grazie ai metodi offerti dalle librerie :

require(‘http’);
require(‘fs’);
require(‘url’);
require(‘path’);
require(‘querystring’);

La domanda sorge spontanea se volessi pubblicare tutto questo su server tradizionale tipo Aruba lo posso fare? Si sui servizi dedicati immaginiamo ma in realtà esistono servizi specifici che fanno funzionare gli script NODE. Per una vissione completa rimandiamo ad articoli presenti in rete del tipo https://trovalost.it/hostare-progetto-node-js-e-quali-hosting-usare/ ; siamo arrivati a un punto critico della navigazione node a questo punto non ci resta che parlare di EXPRESS e del suo labirinto! Per installare un modulo sappiamo di dover usare il comando npm install express puntando alla cartella di progetto. Fatto? Ok adesso mettiamo anche Helmet con il comando npm install helmet. Helmet ti aiuta a proteggere le tue app Express impostando varie intestazioni HTTP. Non è un proiettile d’argento, ma può aiutare! Ok! Cosa deve fare la nostra APP usando Express? La stessa cosa che vediamo fare dal secondo file postato e quindi vediamo le differenze sostanziali tra il qui presente Express attivo in una comparazione del file server.js, da notare come i metodi usati conferiscano una sintessa agile e snella rispetto al primo caso, non solo ma adesso la console risponde celermente con dei messaggi di avvenuta esecuzione per la nostra localhost:8080. Da notare anche l’espressione app.use(helmet()) , un modulo che raccoglie 12 funzioni più piccole che impostano le intestazioni di risposta HTTP:

const express = require(‘express’);
const helmet = require(‘helmet’);

const app = express();
app.use(helmet());

app.use( (req, res, next) => {

console.log(“Request made at time: “, Date.now());

next();

});

app.get(‘/’, (req, res) => {

res.sendFile(__dirname + ‘/index.html’);

});

app.use(‘/assets’, (req, res, next) => {

console.log(“Serving a file from the assets directory”);

next();

}, express.static(‘assets’));

app.listen(8080);

 

il risultato è lo stesso del secondo esempio, la pagina viene caricata, ma le dinamiche che si nascondono dietro il sipario sono state enormemente semplificate e migliorate in termini di sicurezza

 

 

 

 

CONSLUSIONI: una volta di come si entra nella forma mentis di NODE con le sue installazioni di moduli e le sue dipendenze, con le sue iniziazioni per creare il file packages.json, con le sue gerarchie e il modo di lanciare gli eseguibili e modificare anche in entry level le chiamate da CLI, con le sue visualizzazioni su localhost porta 8080 di default, il terrore iniziale diventa meno incisivo e il tutto si affievolisce. L’unico modo per entrare nel vivo del funzionamento di NODE è quello di sperimentare il codice.

Analnatrac utvasbeethod dokiel dienvè: perchè WordPress e mago Merlino vanno d’accordo, magia di Exalibur di Borman – parte one

Certo tradurre la citazione correttamente in italiano in “Anál nathrach, orth’ bháis’s bethad, do chél dénmha” non è facile come mostra anche il video all’ indirizzo https://youtu.be/_4I_zbi3Sak ma il succo è che il film Exalibur di Borman del 1981 rimane uno dei più suggestivi della storia del cinema: https://it.wikipedia.org/wiki/Excalibur_(film). Ecco perchè con WordPress ci accingiamo a esaltare i contenuti di questa pellicola che esalta i cicli storici di Vico, con la spada magica che si inabissa per poter risorgere ogni volta dalle nefandezze generate dagli uomini. Quindi non ci resta che armarci e partire tenendo conto che il progetto è una esercitazione pratica suggerita dall’ interessante sito didattico https://devacademy.it/ che è un ottimo strumento per migliorare le proprie tecniche di sviluppo in ambito sviluppo web. L’idea è molto semplice: quella di trasformare un sito statico con un tema scaricabile free download in rete come il Sydney, indirizzo https://athemes.com/theme/sydney/#athemes-free-download in qualcosa di dinamico che possa funzionare come template grafico per tutte le necessità offerte dal CMS più famoso del mondo (https://it.wordpress.com/ e https://it.wikipedia.org/wiki/WordPress) . Come procedere quindi? Come editor di testo utilizzeremo Visual Studio Code, download all’ indirizzo https://code.visualstudio.com/, dovre avremo necessità di installare particolari estensioni per facilitarci il lavoro. Poi abbiamo bisogno di un web server per lavorare in locale, ce ne sono molti tipo MANP o XAMPP e Easy php, vedere indirizzi https://www.apachefriends.org/it/index.html e https://www.mamp.info/en/windows/ e anche https://www.easyphp.org/, ma questa volta daremo un occhiata al progetto https://laragon.org/ che ha funzionalità semplici con il vantaggio della portabilità anche di esportazione di progetti su chiavetta USB. Poi abbiamo bisogno di plug-in tematici come Timber che utilizza un motore scripting Twig per separare la logica di presentazione da quella di programmazione, perchè sappiamo che tutti i contenuti di un cms blog come wordpress ciclano dinamicamente in continuazione, siano essi categorie, post o voci di menù, quindi andremo a scaricare https://it.wordpress.org/plugins/timber-library/ e https://twig.symfony.com/ .Infine per creare campi personalizzati all’ interno della pagina poi etichettabili per la visualizzazione dinamica a video usiamo https://www.advancedcustomfields.com/ come proposto da dev academy. A questo punto gli ingredienti per la ricetta ci sono tutti, occorre solo amalgamare il tutto per sfornare il dolce. Adesso che siamo equipaggiati seguiamo una delle frasi celebri di Artù nel film che ci accingiamo a consacrare: “preparatevi a combattere, cavalcherete di nuovo col vostro re” , che detto in altro modo significa: installate sulla vostra macchina tutto ciò che vi necessità per raggiungere l’obiettivo fissato all’ inizio che è quello di trasformare un sito tematico Sidney in un template dinamico per wordpress. Attenti! Se pensevate di mettere in piedi un Excalibur – WordPress Theme dovete sapere che siete sulla cattiva strada, in quanto tutto quello che vi frulla per la testa è stato quasi tutto sondato! E’ difficile il mestiere dell’ innovatore. Si proceda quindi a mescolare la farina, pardon a installare https://laragon.org/ . A questo punto bisogna anche prendere un pò di familiarità con Timber e il template engine Twig e il suo sistema per ciclare i contenuti con le graffe, il suo modo di filtrare i dati e applicare le funzioni, contassegnare dei blocchi per l’inclusione, istruire le condizioni ef-else, applicare insomma una sintessa particolare per ogni situazione tipo commentare un blocco di codice. Serve anche simulare il template come file system con Timber bootstrap come struttura di file facilmente recuperabile per visione di struttura su github previa facile ricerca. Il plug-in https://www.advancedcustomfields.com/ ci serve per creare una serie di campi personalizzati che dovranno essere poi legati al contenuto degli articolo e al modo in cui Timber attraverso il suo engine che esegue i comandi va poi ad incorporare i contenuti di una pagina, piuttosto di un blog o altro. Dopo aver installato Laragon in basso a sinistra cliccare su AVVIA TUTTO per mettere in moto i servizi dopodichè in basso sulla barra delle applicazioni a destra comparirà una iconcina azzurra dove andremo a fare tasto destro scegliendo l’opzione creazione veloce e wordpress dai menù a tendina che si apriranno. Verrà generato un indirizzo http://magomerlino.test/ alla fine dell’ installazione per generare la configurazione e quindi si proceda scegliendo lingua e parametri di collegamento con admin e password da scegliere. Una volta dentro inizio a ragionare sulle pagine che voglio vedere e quindi in particolare vorrei una pagina introduttiva che mi parla del film e dei temi che affronta in generale con una sinossi allargata, poi voglio un link che parla della regia, poi voglio un link che parla degli attori, poi voglio un link che parla della produzione in generale e dati vari come quanto è costato il tutto, quanto ha incassato, se ci sono storie interessanti da citare e infine metterò un link ad aforimi ed eventualmente un altro a video, quindi riassumento le pagine nuove da creare una volta eliminate le vecchie saranno per questo progetto di prova sei: movie, regia, attori, produzione, aforismi, video (da prelevare da you tube). Si proceda quindi in tal senso! A questo punto andiamo a lavorare sui plug-in eliminando quelli di default e andando a mettere i nuovi TIMBER e Advanced Custom Field e li attivo. Dopodichè vado a personalizzare in lettura (quindi IMPOSTAZIONI LETTURA) la pagina statica definendo la home e i post (nel mio caso per post scelgo blog) e salvo le modifiche. Poi vado in menù , ne creo uno nuovo assegnandogli un nome e seleziono le voci di menù corrispondenti alle pagine. Una volta creato il menù sulla destra riordinerò a seconda delle mie priorità l’ordine da mostrare a video. Bene a questo punto la fase di amalgama degli ingredienti con l’impastatura è fatta. Adesso bisogna creare il tema vero e proprio, cosa che affronteremo in una seconda puntata dopo esserci annotati gli aspetti salienti della prima, perchè come dice mago Merlino in Exalibur: “la maledizione degli uomini è che essi dimenticano”.

Quando Node ti fa arrivare sul lettino dello psicoanalista: come cambia la programmazione tradizionale con tecnologie di javascript dinamico come react, node, vue, angular da riga di comando

E bei tempi quelli in cui si poteva creare una bella cartellina statica dentro ci si metteva dentro di tutto , dagli assets, la cartella delle risorse che contenevano le images o altre librerie di supporto, la famosa cartellina css e quella js per inserire gli script esterni javascript o jquery. Bè perchè tutta quella roba là è andata perduta come lacrime nella pioggia verrebbe da chiedersi tanto per citare un film famoso anche in linea apocalittica con queste sciagure moderne da anno ambiguo nella sua dicitura (2020 che vordì? Che la prima lama ti fa male ma quella che viene dopo ti deturpa definitivamente? No i progetti web seguono ancora una pressa che non è andata perduta, ma accanto a queste tecniche edili del software che viene eretto a partire dalle fondamenta sono germogliate già da diversi anni tecnologie invasive o meglio pervasive o meglio omnicomprensive che stanno rivoluzionando l’antico modo di creare un software con le nuove implicazione server side conferite al potentissimo dio javascript appunto lato server. Prendiamo node per esempio. Che cosa sarebbe questa roba da riga di comando, la CLI, la common line interface dove io progetto applicativi da sonori megabyte altisonanti (quelle statiche una volta sparati i file sul server via ftp sono davvero leggere) impartendo comandi sulla famosa cmd di windows per esempio? Analizziamo una cosa spaventosa per un neofita avvezzo di grafica al top che non sa nulla di mestieri come il full stack developer. Come si fa ad avvicinarsi a una creatura terribile come node? Innanzitutto che roba è node? Ci si ripete, è semplice javascript lato server, una novità sconvolgente quindi per come eravamo abituati a infliggere quegli alert ammiccanti al centro di browser che non supportavano nulla. Node è come la famosa biblioteca di Alessandria, leggiamo da wikipedia: “la Biblioteca reale di Alessandria fu la più grande e ricca biblioteca del mondo antico ed uno dei principali poli culturali ellenistici. Andò distrutta nell’antichità, probabilmente più volte tra l’anno 48 a.C. e il 642 d.C.; in suo ricordo è stata edificata, ed è in funzione dal 2002, la moderna Bibliotheca Alexandrina“. Ok, quindi node è un serbatoio di software simile ai repository di Linux, cioé dei luoghi dove sono depositati software che svolgono le più svariate mansioni. Chiunque può finire in node risolvendo un problema universale con un software portentoso creato appositamente per arginare quella insana situazione. Ok ma io sento parlare anche di NPM che roba é? Al di là dei giochetti che vengono attribuiti all’ acronimo la versione più ragionevole dovrebbe suonare come node packager manager, ossia uno strumento amministrativo di gestione dello sviluppatore che ha accesso tramite opportuni comandi da riga di comando alla più grande libreria dell’ epoca moderna. Ok, allora siamo di fronte a un trauma, prima eravamo costretti a scrivere milioni di righe di codice direttamente sull’ editor adesso prima bisogna imparare a parlare con l’antica finestra dos di window richiamabile con il comando cmd? Si, ma un primo approccio è possibile in maniera indolore, il primo mattone che ci farà avvicinare a una ipotetica Messina senza ponte da Reggio Calabria (per imparare una tecnologia da qualche parte bisognerà pur iniziare per colmare la distanza abissale che ci separa da quell’ entità sconosciuta). Quindi? Primo passo installare node dal sito https://nodejs.org/en/ e seguire una delle tanti guide presenti in rete tipo https://www.nodeacademy.it/installare-node-js-windows/ dopodichè armiamoci e partite. Bisognerebbe avere una vaga idea di interazione client-server che non è altro che una partita a tennis tra due soggetti uno dei quali chiede e l’altro risponde. A questo proposito viene citata spesso una applicazione REST ossia acronimo di Representational State Trasfer ossia una situazione dove l’utente fa delle richieste GET o POST tramite il protocollo HTTP a un server. Senza addentrarci in situazioni complicate con situazioni che riguardano la stringa dei dati sulla URL e sulla rimodulazione degli end point in node, node si occupa in maniera performante di lavorare in modalità asincrona questo gli consente di non rimanere bloccato su singole richieste. Impostare l’ambiente di lavoro è semplice, dopo aver installato la libreria ci serve un buon editor del tipo visual studio code https://code.visualstudio.com/ , poi un browser come mozilla, safari o il più usato dagli sviluppatori come chrome. Servirà anche un software specifico per le interrogazioni REST come POSTMAN, indirizzo https://www.postman.com/ . Le versioni di node si devono riaggiornare dopo qualche mese, basterà rinominare la cartella specifica e rimettere la nuova release. Poi ci sono delle problematiche particolari legati alle nuove sintassi vedi per esempio domanda specifica su modulo Babel da installare se ci sono problemid i questo tipo: https://it.quora.com/Quando-devo-usare-babel-con-NodeJS. A questo punto non ci resta che tuffarci e piangere! Sfruttando la riga di comando gestibile anche da visual studio nella sua area specifica attivabile tramite tasto CTRL e O accentata, una voltra creata una cartella su desktop con il nostro progetto e una volta arrivato a posizionarmi all’ interno tramite i comandi classici del DOS come CD nome cartella posso richiamando la cmd impartire il seguente comando:

npm init

il sistema richiederà una serie di cose che noi possiamo lasciare scorrere, tutto tranne l’entry point dell’ applicazione di solito index.js da scrivere alla richiesta di node. Poi confermiamo tutto e node ci creerà un packages json che servirà a gestire tutta la nostra applicazione che partirà come punto di partenza da un nome arbitrario che noi abbiamo ribattezzato index.js (o meglio se abbiamo confermato tutto ci verrà assegnato di default). A questo punto come per magia all’ interno della nostra cartella ci ritroviamo dal nulla un file con estensione JSON di nome per l’appunto package.json. Questo è il pannello di controllo di tutta l’applicazione come già detto, qui possiamo inserire dei comandi e verranno assegnate in automatico delle dipendenze in caso di assegnazione di moduli. A questo punto sorge spontanea una domanda: ma se volessi creare la mia classica prima applicazione in node come faccio, qualcosa del tipo ciao mondo? Allora creo un file entry level ossia il mio punto di partenza definito da JSON come index.js e all’ interno ci andrò a scrivere una istruzione per testare se abbiamo fatto in questa prima fase di avvicinamento a Node tutto giusto:

console.log (“ciao mondissimo”)

a questo punto torno sulla mia CLI, e da riga di comando impartirò l’ordine alla macchina di far correre il mio primo potentissimo applicativo scrivendo:

node index.js

il risultato sarà che il programma si metterà in modo a video sulla stessa CLI comparirà il messaggio

ciao mondissimo

per iniziare non c’è male, ma considerato che node mi fa installare server virtuali (il modulo EXPRESS ha un grande successo nei download per esempio), mi fa gestire anche siti statici grazie alle ROUTE e agli instradamenti delle richieste GET e che posso anche recuperare dei valori all’ interno della mia applicazione tramite servizi di database particolari come Mongo DB per esempio, si capisce subito che siamo di fronte a una autentica rivoluzione. Certo un progetto che prima occupava 1 mega di memoria su file system qui ne occupa cento proprio perchè node crea moduli nella sua cartella specifica aggiunge dipendenze ed elabora anche traduzione sulle nuove versione di ecmascript JS tramite strumenti come Babel per esempio. Insomma sia che si voglia costruire un profilo da front end developer sia che ci si voglia spaccare la testa con uno sviluppo più massivo lato back-end con profili come quello di web developer full stack, passare attraverso tecnologie come node, react, angular, vue e simili è passaggio obbligato. Ovviamente ci va del tempo ad assimilare tutto, ne consegue quindi che conviene concentrarsi su poche alternative per esplorarle ed estrapolare da esse cose utili. In ogni caso io dentro al file js avrei potuto scrivere qualsiasi programmino semplice che mi fa magari una addizione tra due numeri per essere sicuro che il risultato sia che usi JS lato client piuttosto lato server come fa NODE non cambi. Il prossimo passo per diminutire la distanza tra Reggio Calabria e Messina o tra la terra e la luna con il famoso ponte della conoscenza è passare necessariamente dal modulo EXPRESS che gestisce le richieste REST, ma questa è un’ altra storia!

BASI DI JAVASCRIPT: overview

Ha mai sentito parlare di Front end developer come figura professionale? Di HTML5, CSS3 e JS6? Il primo crea l’edilizia strutturale della pagina, CSS3 arriva per vestire e arredare la casa e JS interviene per offrire interattività alle pagine. Recentemente si sente parlare di NODE JS in quanto il limite che aveva JS era quello di intervenire solo sulla parte FRONT END senza operare in ambito SERVER. Attenzione a non confondere JS con JAVA però sono due cose completamente diverse! Quindi non ci resta che partire con questo viaggio per vedere le basi della programmazione JS, la sintassi per la corretta scrittura ed esecuzione del codice. Vedremo quali sono i contenitori e come possono essere riempiti, vedremo come stampare a video stringhe o tipi di dati numerici. Vedremo diciamo il potenziale base che offre il linguaggio. Il modo migliorare pe imparare a programmare è solo quello di programmare! Ci sono molti editor di testo utili per sperimentare il codice JS lato FRONT END, tipo Sublime Text o Visual Studio Code o molti altri. Procediamo pertanto con il più classico dei programmi che in questi tempi difficili chiameremo, devi stare a casa anzichè hello world! Quindi creo una pagina HTML semplicemente con tasto destro nuovo dando estensione HTML. Qui scriverò quanto segue:

che cosa dovrebbe fare questa istruzione? Quando con doppio click aprirò la pagina casa.html comparirà quanto segue:

il motivo è evidente non compare nulla perchè tra le virgolette non abbiamo la nostra stringa da stampare quindi facciamo diventare lo script così:

da notare che sto usando blocco note come editor di testo al posto di quelli citati sopra. Ora se lancio la pagina modificata vedrò:

Quindi abbiamo capito che l’istruzione ALERT ci manda iun esecuzione una finestra di dialogo che interagisce con noi a video. Ok a questo punto se io volessi per comodità di gestione questo JS in una cartella esterna per poterlo riutilizzare quando necessità con un semplice collegamento come posso fare? Creo una cartella js e dentro creo un file con le stesse modalità descritte sopra che chiamerò casa.js. A questo punto per agganciare questo file esterno (se il JS non è interno non è necessario includere l’istruzione dentro i tag SCRIPT) possiamo semplicemente scrivere nel nostro HTM questa semplice istruzione:

da sottolineare l’uso dell’ attributo sorgente SRC (source), mentre dentro la famosa cartella js avrò:

risultato finale di tutto questo lavoro di agganci:

ossia lo stesso dell’ inclusione del js nella stessa pagina in quanto l’istruzione è la stessa e il browser interpreta il tutto lato client perchè qui non abbiamo a che fare con Node JS che invece è molto difuso lato server come php per esempio. Adesso proviamo a scivere nel JS esterno altre istruzioni per capire l’importanza della progrmmazione procedurale e del punto e virgola che delimita la fine di una istruzione. Scriviamo altre direttive e facciamo diventare il sorgente js in questo modo:

per vedere l’effetto che fa la nuova istruzione digitata nella seconda riga che entrerà in azione solo dopo aver dato OK all’ ALERT, quindi dopo l’immagine di cui sopr comparirà:

A questo punto sorge spontanea una domanda, se uso i file js esterni dove devo agganciarli all’ interno della mia pagina html? La didattica classica vuole gli script posizionati per bellezza di scrittura e stile nell’ head ma siccome il browser carica prima il body, ha senso inserire tutto prima della chiusura del body finale, in questo modo avremo una pagina caricata più velocemente per l’utente. E’ bene precisare che il sale della programmazione è l’errore. A volte si dimenticano le virgolette per stampare una stringa oppure non si ricorda il nome esatto di una istruzione e manca una lettera, vediamo come intercettare questo errore usando gli strumenti per sviluppatori di CHROME e l’oggetto console diponibile per facili aiuti. Ipotizziamo di aver scritto documen.write inb tal caso inevitabilmente si genererà un errore. Che fare quando ci sono centinaia di righe di codice e non si ha la percezione di dove andare a cercare? Usiamo quindi l’oggetto console! E’ da sottolineare come gli editor moderni di fatto indichino la scorrettezza di una parola digitata con il colore, per questo motivo non conviene digitare blocco note, in quanto srtumento primitivo privo di funzionalità. Se scrivo DOCUMEN al posto di DOCUMENT per dsitrazione io non posso dire al compilatore lato client di eseguire correttamente la seconda istruzione che mi mostrerà il video bianco dopo la corretta visualizzazione dell’ ALERT e la sua conferma. Perchè? Dove devo andare a intervenire? Facendo tasto destro e cliccando ISPEZIONA apro la mia analisi della pagina e recandomi sulla seconda slide CONSOLE ecco l’indicazione che mi serve per risolvere il problema:

alla riga due documen non è definito, quindi facile tornare ora alla riga due e risolvere! Gli errori sono una parte importante della programmazione, chi non fa non li ottiene e non li risolve! C’è anche una istruzione simile alla stampa sul documento per scrivere sulla console con gli stessi criteri e ciè alla funzione console.log(“messaggio”); A questo punto passiamo ad analizzare le variabili. Sono contenitori che contengono tipi di dati e valori. Dentro una cassetta posso avere mele pere e patate ma anche acqua se il contenitore è a chiusura ermetica. Un programma è pieno di variabili che non possono usare le parole chiave del linguaggio nella loro dichiarazione. Adesso proviamo a realizzare un task: nell’ alert anzichè stai a casa , stampiamo solo una variabile, come fare? Di fatto il risultato genera cose già viste sopra ma ilc odice adesso ha questa forma:

Sulle variabili posso cambiare il valore quando voglio quindi proviamo a modificare il codice in questo modo e ad eseguire il tutto in maniera procedurale:

per ottenere questo risultato:

per stampare una variabile all’ interno delle parentesi non devo ovviamente usare le virgolette altrimenti si genererebbe un errore. Poi abbiamo variabili locali e variabili globali, ossia variabili accessibili solo all’ interno di una funzione o ovunque, qui sotto abbiamo un esempio di variabile globale per esempio:

var miaVariabile = “stiamo tutti a casa”;

function mia_funzione() {
alert(miaVariabile);
}

Per commentare ed escludere righe che un domani nell’ ambito di un programma potrebbero riservirmi uso //, ad esempio sopra trasformo tutto in variabile locale usando il simbolo di commento:

//var miaVariabile = “stiamo tutti a casa”;

function mia_funzione() {
var miaVariabile = stiamo tutti a casa;
alert(miaVariabile);
}

La spaziatura in JS è automatica solo alla dichiarazione var il compilatore deve riconoscere uno spazio che precede il nome della variabile. A questo punto vediamo come possoin JS ricevere ingformazioni dall’ utente, il comando specifico è prompt quindi la riga diventa prompt(“hai capito che devi stare a casa?”);

però così non riusciamo a catturare il valore digitato dall’ utente quindi ecco come fare, inserendo var risposta = prompt(“hai capito che devi stare a casa?”); e se volessimo successivamente verificare se abbiamo fatto tutto giusto possiamo stampare risposta con il metodo document.write già visto:

che produrrà dopo una serie di passaggi:

da questo esempio si capisce quindi l’utilità di immagazzinare le variabili in contenitori specifici. Adesso prenderemo in esame un portentoso esercizio dove andremo a concatenare le stringhe. Catturiamo il nostro nome, poi concateniamo il valore catturato con un seguito per dare maggiore senso compiuto (ad esempio un saluto) e infine stampiamo tutto a video:

var nomeutente=prompt(“hai capito che devi stare a casa?”);
var messaggio = (“ciao ” + nomeutente);
document.write(nome);

in rete possiamo trovare moltissimo materiale che ci illustra la concatenazione, le stringhe sono anche oggetti e hanno dei metodi, qui vediamo la concat per vedere un altro modo di fare le cose, il nostro obiettivo quando si inizia a programmare non è imparare a memoria tutto, ma andare a cercare quello che ci serve, i metodi si possono trovare facilmente nella documentazione ufficiale JS, sotto vediamo appunto un metodo dopo il punto caratterizzato da un argomento all’ interno della parentesi:

// Join two strings
var str1 = “Hello “;
var str2 = “world!”;
var res = str1.concat(str2);

// OUTPUT: Hello world!

 

per le stringhe ci sono molti metodi (ossia delle azioni da compiere) e molte proprietà, possiamo recuperari dati legati alla lunghezza della stringa o magari modificare in corsa maiuscole o minuscole

Il giallo di via San Giorgio, uno strano caso per Astore Rossi

Indagando su Riccardo Landini e il suo ultimo il giallo di via San Giorgio estrapoliamo: nato in Emilia ma d’origine romagnola, ha alle spalle studi classici e nel cuore una grande passione per Piero Chiara e per il cinema italiano degli anni Settanta. Nel 2009 ha esordito nella narrativa con il romanzo E verrà la morte seconda. Sono seguiti Il primo inganno, Non si ingannano i morti e Ingannando si impara, volumi di una trilogia. Nel 2013 è stato vincitore del premio Giallo Stresa. La critica di circostanza quella che scolpisce epigrammi sull’ ultima di copertina circoscrive l’avventura di Astore Rossi come incalzante, serrata, avvincente. Certo sembra quasi di rientrare a villa Scott, https://it.wikipedia.org/wiki/Villa_Scott, e negli incubi vissuti con Dario Argento nel suo indelebile Profondo Rosso, ma in questa reggia caduta in disgrazia simile alla casa Usher persa tra i boschi dell’ appennino tosco emiliano, vi è un dramma sepolto che è la concentrazione di tutte le nefandezze mai fatte affiorare dell’ essere umano intenzionato al male assoluto come ideale servile. Lo scantinato segreto che la chiave iniziale vagheggia una volta caduta in possesso di Astore il restauratore dalle mille lacerazioni interiore irrisolte, è un luogo dove l’orrido e l’orripilante fanno germogli che qualcuno dovrebbe definitivamente estirpare. Lo farà lo strano protagonista stesso, forse eccitato dall’ idea di una promessa, forse preoccupato per cancellare le tracce di un suo sentito coinvolgimento in tutta la vicenda, mettendo in piedi uno spettacolo pirotecnico finale alla Nerone che laverà tutti i peccati e consentirà all’ eroe di assolvere alla promessa iniziale di rimediare agli errori del passato. Ma iniziamo per gradi. Si capisce subito che il nostro eroe in realtà è un antieroe, un misantropo che sta scappando da qualcosa e che cerca rifugio in se stesso per trovare un riparo sicuro ovviamente senza trovarlo. Quando la sua dirimpettaia vicina di casa morirà in strane circostanze, si ritroverà in mano senza volerlo una misteriosa chiave che dovrebbe nascondere terribili segreti da sopprimere, con la signora Luisa stralunata dopo un suo ritorno alla villa di famiglia che farnetica di antichi peccati da cancellare. Così senza volerlo Astore, il cui cognome rimanda alla medioevale falconeria di rango, sarà costretto suo malgrado a conoscere la conturbante Barbara nipote della vicina scomparsa, titolare di una galleria d’arte a Milano, che lo instraderà progressivamente verso un fatale ritorno alla vita costringendo a uscire da un sarcofago che si è costruito per difendersi dalle aggressioni del mondo, in cui solo i mobili antichi da restaurare, trovano un balsamo rivitalizzante per sopravvivere, così simili alle incrinature interiori umane da ricostruire. Ma l’immersione nella famiglia Ruggeri/Spada non può avvenire senza fare la scomoda conoscenza del famelico corrotto avvocato Umberto, consumatore abituale di cocaina e dedito alla bella vita di sperpero, che non vede l’ora di vendere la reggia Ruggeri che sta cadendo a pezzi dopo la morte dell’ ultima reggente (la signora Luisa), a un potenziale acquirente per risanare i suoi debiti. Così Astore che aveva fatto un sopraluogo (non autorizzato) per cercare di individuare quale porta la chiave aprisse per carpire chissà quali segreti conturbanti che avevano portato alla morte di Luisa, si ritrova sotto ricatto da parte dell’ avvocato che gli dà dieci giorni di tempo per convincere le sorelle (suora Addolorata sorella di Barbara è la titolare di una istituzione a supporto di bisognosi) a vendere casa per una equa divisione dei beni, cosa che però si presenta irta di ostacoli in quanto il progetto di Umberto non è condiviso. Ma c’è anche il giovane perverso Ruggero espatriato in Inghilterra che durante il racconto da famiglia Adams che scaturisce nel prosieguo, sembra il responsabile delle misteriose scomparse di giovani ragazzine inghiottite dal fiume della cittadina di Rodeno che costeggia la villa di famiglia. L’unica accortezza per chi legge è quella di considerare che la realtà che gli viene somministrata non è rigidamente scolpita per non essere messa in discussione perchè alla fine scopriremo che le valutazioni su Ruggero sono solo di comodo. Nel frattempo la vicenda si evolve e Umberto che deve pagare i suoi ricattatori viene suicidato spingendo il suo fuoristrada in fondo a un burrone, liberando così Astore da una potenziale denuncia per aver commesso una serie di piccole infrazioni. I misteri si infittiscono e intorno alla villa spariscono altre figure critiche: il custode, il giovane fratello etichettato da Barbara come psicopatico, mentre Astore è profondamente turbato per le complicazioni sentimentali con la nipote di Luisa, consapevole anche di dovere alla sua gentile vicina di casa defunta il mantenimento di una promessa strappata afferrando quella misteriosa chiave intrisa di peccati. Così gli interrogativi si accumulano inquietanti costringendo il nostro eroe a ricerche incessanti che lo spingeranno a indagare anche sulle oscure ombre del passato di Rodeno, quando una scomparsa in particolare venne attribuita a uno scultore in stato di indigenza residente in luoghi di fortuna nei boschi, che venne trasformato per un insano accordo non scritto dei Ruggeri/Spada in un fermo penale, poi rientrato per mancanza di indizi significativi a suo carico. Quello che Astore intuisce sul campo sporcandosi le mani è che Oscar (questo il nome del disadattato che vive nei boschi) in realtà ha assistito all’ omicidio e ha anche immortalato nei suoi ricordi il vero responsabile del misfatto, una entità che si muove a distanza di anni con la necessità di eliminare un potenziale pericolo di denuncia. E così tra una devianza e l’altra nei racconti di famiglia (il padre e la madre non sono certo immuni da peccatucci pesanti e sono i primi responsabili per aver sfornato una progenia di mostri), si continua a scavare per risolvere il mistero della chiave, fino all’ inevitabile regolamento di conti finale con doppia sorpresa. Certo se leggi un thriller sai bene che alla fine qualcosa non quadra e che l’assassino deve essere sempre il più insospettabile. Ce ne accorgiamo quando finalmente spalancata quella misteriosa porta che conduce Astore negli scantinati, ci immergiamo in una chiesa sconsacrata fatta di teschi, teste mozzate e da corpi martoriati e crocifissi (Ruggero nello specifico, il più giovane ritornato in Italia a caccia lucrose di finanze dopo la morte della zia). A quel punto niente sarà più come prima con finale decisamente incandescente. Giallo divertente, un pò spartano e atipico per la capacità di cogliere i vizi di forma della provincia, personaggio centrale quello di Astore difficilmente dimintecabile per la sua misantropia ma anche per la sua capacità di resistere agli urti (è stato vittima di una aggressione giudiziaria che lo ha segnato da giovane), belle anche le trasfigurazioni messe in atto in tecnica photoshop sui 4 fratelli, un peggiore dell’ altro come si conviene a un ceppo di sbandati adolescenti figli a loro volta di genitori assolutamente fuori di testa (in particolare il padre, con la madre soltanto attenta a tenere alto il rango della casata occultando ogni marachella come un innocente omicidio che inflazionasse lo stemma araldico). Bella la location della reggia in rovina, completamente isolata dal contesto urbano e foriera di suggestioni da letteratura horror sinistre e ancestrali (ad esempio viene descritta all’ inizio la decapitazione della vecchia madre sola nella villa intenta ad ascoltare musica classica che ormai sentendo approssimarsi l’ora della morte vorrebbe denunciare tutti i segreti di famiglia ai posteri, ma che naturalmente viene bloccata con un colpo netto di scure nel suo intento sconsiderato). Una bella storia trasversale dove le deformazioni sono di casa. Anzi di reggia.

Raccontare in diretta: quando i dialoghi sono senza sale, una lezione dal Manzoni

Così non fa male, sarà ma se mangi insipido che gusto ci provi che traslato nella lettura per l’autore sta a significare un pò di brio in questi discorsi diretti ce li vogliamo mettere o no?! Nel discorso parlato serve trasferire al lettore un discorso di immediatezza, per compiere questa operazione l’autore deve conoscere molto bene i suoi personaggi, sapere tutto di loro, che estrazione sociale hanno, il contesto in cui agiscono, il linguaggio che usano tra di loro, le peculiarità della regione in cui vivono. Vediamo come affronta la questione il sommo maestro Alessandro Manzoni nel suo capolavoro i Promessi Sposi che ebbe due versioni, la prima del 1823 intitolata Fermo e Lucia mentre la seconda definitiva con il titolo che conosciamo. A un certo punto Lucia si trova nella prima versione a faccia a faccia con l’Innominato ed esclama:

-dio è qui a vedere s’ella si muove a peità di me, per usarle pietà in ricambio un giorno-, che sembra una frase scopiazzata da un libro di teologia e messa qui per riempire la pagine. Nella seconda versione Manzoni rivede il suo scritto e ci ripensa e fa dire a Lucia:

-Oh ecco! Vedo che si muove a compassione: dica una parola, la dica, Dio perdona tante cose per un’opera di misericordia! – dove si percepisce un pò più di brio ed aggressività nella voce narrante.

A un certo punto Lucia nella versione definitiva dice all’ Innonimato la semplice frase che impone e ordina:

-mi faccia condurre in una chiesa-, mentre nella versione precedente del 1823 sentiamo dire alla protagonista:

-lasci che io mi ricoveri in qualche chiesa,su le montagne, in un bosco-, a sottolineare un cambio caratteriale della protagonista significativo. La tempra di Lucia si fa più incisiva anche nel dialogo con donna Prassede. Questa cerca continuamente di sondare se la ragazza pensa ancora al suo moroso, ma Lucia ormai più scltra e matura nella seconda edizione dà una risposta repentina, secca e lapidaria, che si prende quasi gioco della sua interlocutrice troppo curiosa:

-ebbene? Dunque non ci pensiamo più a colui?-
-io non penso a nessuno-, rispose Lucia.

Attraverso la negazione continua ripetuta NON Nessuno (che rimanda a un qualcuno), Lucia sa bene che sta dicendo ci penso sempre in ogni istante della mia vita, a lui e a nessun altro, ma la sua inquisitrice non è in grado di coglierne le sfumature della fulminea battuta, che nell’ economia del romanzo serve a Manzoni per indicare al lettore “guarda che Lucia non si fa mettere i piedi in testa da nessuno”. Ecco invece come rispondeva la sventurata nella prima versione: “la povera Lucia protestava da principio con voce angosciosa e timida che ella non pensava a nessuno”. Un bel restyling per questo personaggio che sembra diventare sempre più forte nel procedere degli eventi in una visione dinamica voluta dall’ autore che vuole mostrarci una via per reagire alle avversità! L’impatto con il lettore nelle risposte della seconda edizione diventa più battagliero e mordace. Lucia non si fa seppellire dagli eventi e sembra quasi creare una tensione con i personaggi con la quale interagisce. Le regole della conversazione scritta non sempre seguono i canovacci del parlato quotidiano. Dire mi importa o mi interessa potrebbe anche volere dire non mi interessa o non mi importa e vale il contrario come ha dimostrato Lucia con donna Prassede. Un dialogo troppo eplicito con il tutto detto può deludere. Come sosteneva Sterne Laurence, una pagina ben scritta a volte è solo un modo diverso per fare conversazione. Per la cronaca le risposte date da donna Lucia a donna Prassede creano un effetto ombra sul secondo personaggio che è indotto a chiedersi nella seconda versione del Manzoni che stesse veramente pensando la sua inquisita. Tra l’altro in orgoglio e pregiudizio della Austene la sua eroina mostra il potenziale della tecnica della negazione, a un certo punto dirà “di non pentirsi assolutamente di aver rifiutato la proposta di Darcy, di non provare nè trasporto nè stima per quest’ uomo che è stato scortese con lei”, ma in realtà il lettore percepisce questa ombra contraria in cui l’eroina ostenta in realtà confusi sentimenti non ancora del tutto chiariti. Il lettore deve percepire i personaggi attraverso i dialoghi dei personaggi, per cui bosgna costruire il tutto con estrema attenzione dosando parola per parola gli scambi. Scrivere è come ingaggiare una lotta sportiva con il lettore dove serve un gioco di equilibri attento e meticoloso per non oltrepassare linee critiche.

Progettare un carrello elettronico con PHP e MySql per i nostri acquisti interstellari? SI può fare!

Presto quelli di Venus 6 verranno sulle nostre spiagge doatati da potenti motori a curvatori a propinarci tutta una serie di nuovi oggetti intergalattici che non potremmo fare a meno di acquistare. Quindi la necessità di progettare un carrello elettronico anche se rudimentale che ci faccia fare business é una esigenza quanto mai reale. Presto questi alieni qui verranno da noi per venderci anche arbitri interstellari pronti a dire no var o si var solo in cambio di una carbonara. In sostanza quello che dobbiamo progettare come web developer è un meccanismo base di carrello elettronico da ampliare in futuro per renderlo sito e-commerce istituzionale, non importa se in questa prima fase non abbiamo abilitate le funzioni di checkout e di pagamento effettivo. Quindi sostanzialmente l’alieno ci propina la roba sui nostri dispositivi mobili tramite una breve schermata che presenta un campionario di oggetti con relativo prezzo. Cliccando sugli articoli di nostro interesse alluneremo in una pagina dove avremo un riassunto di quello che stiamo acquistando con una funzione somma che mette insieme il totale delle singole componenti. Quello che dobbiamo fare è creare un file index.php che come sappiamo di default è anche quello che si vede anche senza digitarlo sulla url, poi ci servirà una stringa di connessione da mettere in link nelle nostre pagine perchè dietro naturalmente abbiamo un DB MySql di appoggio, poi ci servirà un file esterno di appoggio che elencherà tutta una serie di variabili responsabili dei calcoli e degli aggiornamenti e infine il carrello rassuntivo da gestire con tutte le opzioni per le modifiche nel caso l’utenti cambi idea o voglia modificare il suo ordine, vediamo quindi il file più semplice, responsabile della connessione al DB, il connect.php:

/*
<?php
$con = mysqli_connect(‘localhost’, ‘root’, ”, ‘shoppingcart’);
?>
*/

ma i dati? Creo un DB di nome shoppingchart e faccio la seguente importazione con il copia e incolla sulla TAB SQL;

/*
— phpMyAdmin SQL Dump
— version 4.1.14
http://www.phpmyadmin.net

— Host: 127.0.0.1
— Generation Time: Apr 30, 2015 at 09:23 PM
— Server version: 5.6.17
— PHP Version: 5.5.12

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;


— Database: `demo`

— ——————————————————–


— Table structure for table `product`

CREATE TABLE IF NOT EXISTS `product` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
`price` decimal(10,0) NOT NULL,
`quantity` int(11) NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;


— Dumping data for table `product`

INSERT INTO `product` (`id`, `name`, `price`, `quantity`, `description`) VALUES
(1, ‘Name 1’, ‘1000’, 2, ‘good’),
(2, ‘Name 2’, ‘2000’, 3, ‘good’),
(3, ‘Name 3’, ‘3000’, 4, ‘good’);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

*/

vediamo poi il contenuto del file item.php che contiene la classe omonima con un elenco di proprietà o variabili secondo la dicitura procedurale:

/*
<?php
class Item{
var $id;
var $name;
var $price;
var $quantity;
}
?>

dopodiche passiamo ad analizzare la pagina index.php che ci mostrerà i prodotti che vogliamo acquistare:

/*
<link rel=”stylesheet” href=”css/table.css”>
<?php
require ‘connect.php’;
$result = mysqli_query($con, ‘select * from product’);
?>
<table cellpadding=”2″ cellspacing=”2″ border=”0″>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
<th>Buy</th>
</tr>
<?php while($product = mysqli_fetch_object($result)) { ?>
<tr>
<td><?php echo $product->id; ?></td>
<td><?php echo $product->name; ?></td>
<td><?php echo $product->price; ?></td>
<td><a href=”cart.php?id=<?php echo $product->id; ?>”>Order Now</a></td>
</tr>
<?php } ?>
</table>

*/

a questo file abbiamo aggiunto come prima riga un file css di nome table.css per abbellire la nostra tabella che avrà all’ interno della cartella css, il seguente contenuto e che in automatico formatterà tutti i selettori indicati, i tag presenti nell’ html:

/*
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
*/

a questo punto manca il file dove io ho il ripeilogo gestione degli oggetti precedentemente selezionati per l’acquisto, il file cart.php, che risulta essere il più complesso di tutta la nostra applicazione se non altro per i suoi contenuti dinamici, anche qui abbiamo lincato il nostro file css per vestire la parte grezza dei contenuti:

/*
<link rel=”stylesheet” href=”css/table.css”>
<?php
session_start ();
require ‘connect.php’;
require ‘item.php’;
if (isset ( $_GET [‘id’] )) {
$result = mysqli_query ( $con, ‘select * from product where id=’ . $_GET [‘id’] );
$product = mysqli_fetch_object ( $result );
$item = new Item ();
$item->id = $product->id;
$item->name = $product->name;
$item->price = $product->price;
$item->quantity = 1;
// Check product is existing in cart
$index = – 1;
if (isset ( $_SESSION [‘cart’] )) {
$cart = unserialize ( serialize ( $_SESSION [‘cart’] ) );
for($i = 0; $i < count ( $cart ); $i ++)
if ($cart [$i]->id == $_GET [‘id’]) {
$index = $i;
break;
}
}
if ($index == – 1)
$_SESSION [‘cart’] [] = $item;
else {
$cart [$index]->quantity ++;
$_SESSION [‘cart’] = $cart;
}
}

// Delete product in cart
if (isset ( $_GET [‘index’] )) {
$cart = unserialize ( serialize ( $_SESSION [‘cart’] ) );
unset ( $cart [$_GET [‘index’]] );
$cart = array_values ( $cart );
$_SESSION [‘cart’] = $cart;
}
?>
<table cellpadding=”2″ cellspacing=”2″ border=”1″>
<tr>
<th>Option</th>
<th>Id</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
</tr>
<?php
$cart = unserialize ( serialize ( $_SESSION [‘cart’] ) );
$s = 0;
$index = 0;
for($i = 0; $i < count ( $cart ); $i ++) {
$s += $cart [$i]->price * $cart [$i]->quantity;
?>
<tr>
<td><a href=”cart.php?index=<?php echo $index; ?>”
onclick=”return confirm(‘Are you sure?’)”>Delete</a></td>
<td><?php echo $cart[$i]->id; ?></td>
<td><?php echo $cart[$i]->name; ?></td>
<td><?php echo $cart[$i]->price; ?></td>
<td><?php echo $cart[$i]->quantity; ?></td>
<td><?php echo $cart[$i]->price * $cart[$i]->quantity; ?></td>
</tr>
<?php
$index ++;
}
?>
<tr>
<td colspan=”5″ align=”right”>Sum</td>
<td align=”left”><?php echo $s; ?></td>
</tr>
</table>
<br>
<a href=”index.php”>Continue Shopping</a>
*/

Chi lo avrebbe mai detto che mettendo insieme questi semplici pezzettini abbiamo giù un dispositivo grezzo ma funzionale che costituirà il nostro punto di partenza per il nostro shopping cart interstellare?

Match del secolo: difesa Alekhine, la nona

[Site “Chess.com”]
[Round “9”]
[White “enricof8”]
[Black “homunculus1”]
[Result “0-1”]
[ECO “B03”]
[WhiteElo “1842”]
[BlackElo “1823”]
[EndDate “2019.01.22”]

visualizzazione dinamica della nona: https://www.chess.com/daily/game/216402780

Prima partita del match: https://umbriawaydeveloper.wordpress.com/2019/01/19/il-match-del-secolo-per-il-titolo-di-campione-condominiale-globale-interplanetario-prima-del-match-huebsch-gambit-faraoni-enrico-vs-homunculus1-0-1/

Seconda :https://umbriawaypotenzia.wordpress.com/2019/01/20/seconda-del-match-mondiale-condominiale-vs-homunculus1-dopo-io-pensa-ma-qui-posizio-persa-micko-philidor-defence/

Terza: https://umbriawaytarget.wordpress.com/2019/01/21/il-match-del-secolo-condominiale-terza-del-match-gm-faraoncic-accorcia-le-distanze/

quarta: https://umbriawaynoir.wordpress.com/2019/01/21/quarto-turno-del-campionato-mondiale-elo-under-di-scacchi-patta-tra-due-supergm-condominiali/

quinta: https://umbriawayfocus.wordpress.com/2019/01/21/quinta-del-match-per-il-titolo-faraoncic-vs-homunculus1/

sesta: https://umbriawayfidelizza.wordpress.com/2019/01/21/sesta-del-mondiale-di-scacchi-seguito-anche-su-altair-4-gm-faraoncic-accorcia-le-distanze/

settima: https://umbriawaydeveloper.wordpress.com/2019/01/22/est-indiana-da-brivido-ora-puoi-limmortale-condominiale-gm-faraoncic-riagguanta-il-fuggitivo/

ottava: https://umbriawaydesign.wordpress.com/2019/01/23/il-match-del-secolo-riveduto-e-corretto-patta-definita-la-sempreinbianco-dai-critici-gm-faraoncic-riesce-a-salvarsi-con-pellegrinaggio-ad-assisi/

punteggio dopo la game: 5 a 4 per homunculus!

1.e4 Nf6 2.e5 Nd5 3.d4 d6 4.c4 Nb6 5.f4 g6 6.Be3 Bg7 7.Nc3 Be6 8.Nf3 O-O 9.d5 Bg4 10.h3 Bxf3 11.Qxf3 dxe5 12.f5!? NT

una novità che però consente subito al nero di minare il centro quando con 12 000! C8d7 13 f5 si poteva migliorare la linea anche se 13..e4 é fastidiosa

12..c6! 13.O-O-O cxd5 14.cxd5 (+0.39 → -0.61)

Inaccuracy. A better move was 14. ♘xd5 Nxd5 15.fxg6 fxg6 16.Qxd5+ Qxd5 17.Rxd5 e6 18.Rd6 Nc6

14…N8d7 15.Kb1 Nf6 16.g4 Rc8! strong move

17.Rh2? (-0.72 → -2.13)

un grave errore quando 17. ♘e4 salvava capra e cavoli, ad esempio 17..Nc4 (17…Nfxd5?? 18.Bxb6 e 17..Nbd5?? 18 Nf6) 18.Bxc4 Rxc4 19.Nxf6+ Axf6 20.fxg6 20…hxg6 21.h4 Qd6 con leggero vantaggio nero)

17…Rxc3!

il bianco ha fatto di tutto per ricevere questa telefonata, sacrificio di qualità ineccepibile, una interrurbana che porta al tracollo

18.bxc3 Na4 19.Rc2 e4 20.Qe2 Nxd5 21.Kc1? (-3.86 → -6.65)

quando si dice é un giocatore preciso, soprattutto nella fase difensiva ah ah, si imponeva la patetica 21. ♖xd5

21..Naxc3 22.Rxc3 Nxc3

0-1

conclusioni: le idee c’erano ma la ciambella non é riuscita con il buco, occorre trovare un miglioramento

JavaScript per aspiranti programmatori – A overview

JavaScript è uno dei linguaggi di programmazione più popolari al mondo e viene utilizzato per aggiungere interattività alle pagine Web, elaborare i dati e creare varie applicazioni (app mobili, app desktop, giochi e altro ancora) Imparare i fondamenti di una lingua ti consentirà di creare il programma che desideri, sia sul lato client che sul lato server. Iniziamo con l’aggiunta di JavaScript a una pagina web. JavaScript sul Web vive all’interno del documento HTML. In HTML, il codice JavaScript deve essere inserito tra i tag script e / script che può essere incluso nel corpo del documento o nell’ head. tieni presente che lo script, che è posto nella sezione head, verrà eseguito prima che il body sia reso. Se vuoi ottenere elementi nel corpo, è una buona idea posizionare il tuo script alla fine del tag body. Per scrivere ciao mondo:

<code>
<html>
<head> </head>
<body>

document.write(“Hello World!”);

</body>
</html>
</code>

Proprio come in HTML, possiamo usare i tag HTML per formattare il testo in JavaScript. Ad esempio, possiamo produrre il testo come intestazione:

<code>
<html>
<head> </head>
<body>

document.write(“

Hello World!

“);

</body>
</html>
</code>

È possibile inserire qualsiasi numero di script in un documento HTML. In genere, il tag dello script è inserito nella testa del documento HTML:

<code>
<html>
<head>


</head>
<body>
</body>
</html>
</code>

C’è anche un tag noscript. Il suo contenuto verrà mostrato se il browser del client non supporta gli script JS. In alternativa, includi il codice JavaScript nel tag body.

<code>
<html>
<head> </head>
<body>


</body>
</html>
</code>

è una buona idea posizionare gli script nella parte inferiore dell’elemento body. Questo può migliorare il caricamento della pagina, perché la visualizzazione HTML non è bloccata dal caricamento degli script. Il tag script può assumere due attributi, lingua e tipo, che specificano il tipo di script; L’attributo language è deprecato e non dovrebbe essere utilizzato.

<code>


</code>

Nell’esempio seguente, abbiamo creato una casella di avviso all’interno del tag script, utilizzando la funzione alert ():

<code>
<html>
<head>
<title></title>

alert(“This is an alert box!”);

</head>
<body>
</body>
</html>
</code>

Anche l’attributo type: script type = “text / javascript” non è più necessario, poiché JavaScript è il linguaggio di scripting HTML predefinito. Gli script possono anche essere inseriti in file esterni. Gli script esterni sono utili e pratici quando lo stesso codice viene utilizzato in un numero di pagine Web diverse. I file JavaScript hanno l’estensione .js. Di seguito, abbiamo creato un nuovo file di testo e lo abbiamo chiamato demo.js. Avere script JS in file separati rende il tuo codice molto leggibile e più chiaro. Per utilizzare uno script esterno, inserisci il nome del file di script nell’attributo src (source) del tag script. Il tuo file demo.js include il seguente codice JavaScript, ma nota bene non il tag script che è già specificato nell’ estensione:

<code>
alert(“This is an alert box!”);
</code>

Puoi posizionare un riferimento di script esterno in head o body, quale preferisci. Lo script si comporterà come se fosse localizzato esattamente dove si trova il tag . Posizionare un codice JavaScript in un file esterno presenta i seguenti vantaggi:

– Separa HTML e codice.
– Rende HTML e JavaScript più facili da leggere e mantenere.
– I file JavaScript memorizzati nella cache possono accelerare i carichi di pagina.

Non tutte le istruzioni JavaScript sono “eseguite”. Il codice dopo una doppia barra //, o tra / * e * /, viene considerato come un commento. I commenti vengono ignorati e non vengono eseguiti. I commenti a riga singola utilizzano doppie barre.



// This is a single line comment
alert("This is an alert box!");

</code>

È una buona idea fare un commento sulla logica delle grandi funzioni per rendere il tuo codice più leggibile per gli altri. Tutto ciò che scrivi tra / * e * / sarà considerato come un commento su più righe. Ecco un esempio:

<code>

/* This code
creates an
alert box */
alert("This is an alert box!");

</code>

I commenti sono usati per descrivere e spiegare cosa sta facendo il codice.