1

Dagli appennini alle Ande con De Amicis? No dagli appennini alle Alpi con il film di Francesco Nuti Tutta colpa del Paradiso e un intrepido trekkista e anche con il CAI locale!

web design umbriaDiciamocelo, noi umbri siamo fortunelli, circondati come siamo da montagne e da sentieri e da vette alla nostra portata da conquistare certo il contatto con la natura non ci manca e nemmeno le visioni mozzafiato che quietano l’anima e ci riconciliano con le bellezze create dall’ universo (facendo bene attenzione a non calpestare qualche sostanza dall’ aroma sospetto, ndr) , senza neanche andare troppo lontano basta andare a vedere le suggestive vedute dal Serrasanta locale per trovare conferme all’ assioma iniziale.web design umbria

Del resto persino registi brillanti sono rimasti stregati dalle vedute mozzafiato offerte dalla natura e dalla montagna, un esempio su tutti il film del 1985 Tutta colpa del Paradiso di Francesco Nuti con Ornella Muti, approfondimenti https://it.wikipedia.org/wiki/Tutta_colpa_del_paradiso, ambientato prevalentemente in Valle d’Aosta, nella Val d’Ayas, in una tipica baita nei pressi della località Champoluc, nel comune di Ayas. Alcune scene sono state girate nella frazione Pellaud di Rhèmes-Notre-Dame. La trama del film é leggera e poetica come prevede lo stile di questo sfortunato artista e anche l’originalità del dettaglio legata allo stambecco bianco da toccare, avvistare e fotografare dal marito della ex-moglie di Nuti dà un tocco di originalità a tutta la costruzione come chi insegue una balena per tutta la vita a caccia di una irraggiungibile felicità.

web design umbriaC’è il dilemma di questo figlio e il suo futuro da costruire: Nuti si rende conto (Romeo nel film) che la vita del ragazzo che non conosce il suo vero padre é perfettamente inserita in un contesto sano e che stravolgere il suo habitat naturale per trascinarlo in un futuro incerto forse senza prospettive sarebbe una scelta sconsiderata. Finale positivo, scegliendo la cosa giusta il nostro regista/attore finalmente si sente amato da tutti (cosmo compreso) e riesce persino a vedere lo stambecco bianco come chi toccando il mito riservato a pochi placa le sue ansie assaporando un mondo di affetti ritrovato con fratture interiori risanate.web design umbria

Da segnalare bellissimi itinearari tratteggiati e costruiti da trekkisti locali, come questo che estrapoliamo da uno dei tanti anonimi appassionati di montagna estratti random dalla rete che confessa la sua passione per il trekking proprio a partire dal film e così alla domanda é nato prima l’uovo o la gallina (l’amore per la montagna e la natura e l’aria buona in generale) la risposta non può che essere che ovvia: se non ti piace la montagna e non apprezzi la natura, prima vedi il film “tutta colpa del paradiso” e poi aspetti un pò per vedere l’effetto che fa con un risultato prevedibile a giudicare da video come https://www.youtube.com/watch?v=7UyVEqQBMYQ&feature=youtu.be che ci invogliano ulteriormente ad avvicinarci ad alpi, ande o appennini che siano. Anche perché come suggerisce il protagonista stesso, con le tre “emme” sinonimo sì di montagna ma anche di Michele (il nome del nostro intrepido videomaker che ha scritto in solitaria gli itinerari) e soprattutto di “magnate” aspetto ludico gastronomico che compensa lo spreco di calorie usate per adempiere agli sforzi programmati per raggiungere rifugi ad altezze importanti dove c’è sempre un cuoco che lavora, vai sempre sul sicuro. A questo punto essendo stati contagiati postitivamente dall’ entusiasmo dimostrato dal trekkista anonimo in questione non ci resta che uscire di casa (quando un nuovo decreto lo prevederà eh eh) e correre subito al CAI locale, per esempio http://www.caigualdotadino.it/ e iscriverci, per iniziare a scoprire mondi di cui non sospettavamo neanche l’esistenza!




Cinquanta sfumature di sessione, quello che Anastasia con il manuale del framework non ti dirà mai nella stanza torbida di Codeigniter

Oggi ho risolto il problema delle sessioni, eureka, era da una ventina di giorni che speravo di sistemare! Ma il titolo che ci azzecca? Mica è la stanza dei peccati del libro pakko più letto del pianeta dove le confessioni scabrose diventano business da intrattenimento! No qui abbiamo a che fare con il manuale di Codeigniter dove si leggono un sacco di cose belle e meravigliose ma manca poi quel “quid” che consente al NEWBIE di APPLICARE poi la tecnica o la singola istruzione sciorinata dalla bibbia sacra del framework per RISOLVERE UNA QUESTIONE PRATICA. Vediamo prima in sintesi di cosa stiamo parlando. Andando su http://umbriawayformazione.altervista.org/ci_project_competenze/ e facendo il login si entra in informazioni riservate (ma non troppo, non ci sono numeri di carte di credito) che sono protette dall’ esterno su altri browser dalle sessioni, identificate univocamente da id esclusivo. Come tutti Il protocollo HTTP usato per la connessione e la trasmissione delle pagine Web, è un protocollo SENZA MEMORIA o STATELESS. Per aggirare questa situazione possono tornare utili le sessioni. In procedurale avremo una classica situazione caratterizzata daL PULSANTE CHE ACCENDE LE DINAMICHE IN OGGETTO:

Session_start();

Quando la sessione viene ATTIVATA E APERTA viene inizializzato un ARRAY SUPERGLOBALE di nome

$_SESSION[];

un cassetto che andrà a ricevere tutti i dati che si intende ricordare, spesso username e password di chi si sta per LOGGARE. La domanda retorica “ma la $_SESSIONweb design umbria é vuota o piena” serve a proteggere con una istruzione condizionale IF / ELSE tutte le pagine che si intendono occultare al visitatore scaltro che magari alle nostre spalle adocchia un indirizzo web e intende replicarlo su altro browser presso altra macchina. Per esempio potremmo includere un file per queste pagine dove all’ interno esternamente lavora una condizione del tipo se la superglobals é piena e contiene la variabile X,Y,Z fai vedere il contenuto della pagina, altrimenti reindirizza il curiosone troppo curioso altrove, magari al form di login! Ok il manuale di Codeigniter darà per scontato che un minimo di PHP bisogna conoscerlo per seguire almeno le indicazioni base, ma di fatto poi la pratica quando hai un corpo fatto di vestiti di anima e di carne ed ossa (rispettivamente la VIEW, il controller e il Model) che differisce dalla linearità non sai dove devi scrivere le cose e neanche se la sintassi poi suona bene perché di fatto devI procedere a tentoni cercando di incapsulare con delle graffe questo o quell’ elemento, finche alla fine l’azzecchi e la risposta arriva; per far funzionare le sessioni devi richiamare per ogni pagina che si desidera

($this->session->userdata(‘nomevariabilesessione’))

intorno alla QUERY del MODELLO che ovviamente é diversa per ogni progetto e ha le sue specificità legato alla pagina a cui il controller con il suo metodo é legato! Ma mica il Newbie é come la maga Circe che le cose le sa per nascità onnicomprensiva divina?! Ma per impare l’inglese conoscere almeno una lingua alternativa base per capire quali sono i pronomi e i verbi e i complementi oggetto non sarebbe utile?! Più che utile , indispensabile! Avere un minimo di destrezza con la grammatica di base, in questo modo passare a Codeigniter dopo aver sperimentato un pò di procedurale é un balsamo benefico. In ogni caso scomporre i problemi grandi in piccoli pennelli (chi non ricorda la pubblicità cinghiale?) produce enormi vantaggi e una volta entrati nella stanza segreta delle sessioni con Anastasia ogni più torbido segreto sarà rivelato!




Diventa PRIMA NAZIONALE in due giorni risolvendo il problema della gestione di un FORM in CODEIGNITER FRAMEWORK

web developer umbria

A Roma dicono te fai paura da solo a no quello era te sei parlato da solo, ma quello che é successo dal punto di vista di crescita del punteggio elo tra Lunedì due novembre e oggi Mercoledì 4 novembre ha dell’ incredibile dal punto di vista della risoluzione dei problemi. Sul punteggio elo e le categorie negli scacchi ormai ne parlo da diverso tempo ma per fare un ripasso vediamo quali sono questi step di crescita sportiva che un agonista in erba (definito inclassificato) dovrebbe compiere verso l’alto prima di arrivare alla TRASCENDENZA della categoria GM:

Non Classificato (NC)
Terza Sociale (3S)
Seconda Sociale (2S)
Prima Sociale (1S)
Terza Nazionale (3N)
Seconda Nazionale (2N)
Prima Nazionale (1N)
Candidato Maestro (CM)
Maestro (M)
Maestro FIDE (MF)
Maestro Internazionale (MI)
Grande Maestro (GM)

web developer umbriaSe una guerra è composta da molte battaglie, così come un torneo di scacchi fatto di diversi turni é segnato da sconfitte e vittorie, così l’avventura formativa QUOTIDIANA iniziata su una tecnologia sconosciuta lunedì 12 novembre si sta rivelando un viaggio ricco di insidie ma anche NON PRIVA DI soddisfazioni e di vittorie parziali, esattamente a quello che accade all’ agonista di scacchi in torneo. Lunedì fino alle 21 e 15 ero equiparato (o meglio autoequiparato!) a livello simbolico di conoscenze alla terza sociale. Poi alle 21 e 15 riesco a realizzare il passaggio da SERVER LOCALE A SERVER DI PRODUZIONE e passo di categoria guadagnando elo (sempre simbolicamente) diventando TERZA NAZIONALE. Categoria che é perdurata fino alle 21 e 40 di Martedì 3 Novembre, quando per grazia divina sono riuscito a far funzionare il mio form grazie ai suggerimenti indiretti presenti in https://umbriawayformazione.wordpress.com/2020/11/03/imparare-dagli-errori-non-sono-gli-scacchi-ma-e-codeigniter/ dove si capisce una cosa sostanzialmente ribadita anche alla mia prima richiesta sul forum ufficiale, https://forum.codeigniter.com/, cioé il fatto che non PUOI RISOLVERE UN PROBLEMA se non consulti una fonte che può aiutarti a risolvere il problema è questa sorgente di acqua fresca é il MANUALE, https://codeigniter.com/userguide3/index.html . Quindi ieri leggendo alcune sezioni specifiche del manuale SONO RIUSCITO A FAR FUNZIONARE IL MIO FORM, passando simbolicamente alla categoria SECONDA NAZIONALE. Ma questa mattina sempre spulciando il manuale sono riuscito a risolvere i problemi legati ALLA SICUREZZA DEI FORM, passando simbolicamente PRIMA NAZIONALE! Quante emozioni nell’ arco di poche ore! A questo punto se nei prossimi giorni riesco a risolvere il problema della PAGINAZIONE passo a tutti gli effetti CM di Codeigniter nel senso che poi c’è comunque un abisso di conoscenze da colmare! Ma vediamo in dettaglio cosa è successo sui FORM che quando vengono messi in piedi (FASE 1) sono delicati sotto il punto di vista della sicurezza (FASE 2). All’ indirizzo http://umbriawayformazione.altervista.org/ c’è in alto a destra un form che ora funziona grazie alle istruzioni presenti sul manuale alla voce specifica https://codeigniter.com/userguide3/libraries/input.html?highlight=form :

Accessing form data
Using POST, GET, COOKIE, or SERVER Data

CodeIgniter comes with helper methods that let you fetch POST, GET, COOKIE or SERVER items. The main advantage of using the provided methods rather than fetching an item directly ($_POST[‘something’]) is that the methods will check to see if the item is set and return NULL if not. This lets you conveniently use data without having to test whether an item exists first. In other words, normally you might do something like this:

$something = isset($_POST[‘something’]) ? $_POST[‘something’] : NULL;

With CodeIgniter’s built in methods you can simply do this:

$something = $this->input->post(‘something’);

The main methods are:

$this->input->post()
$this->input->get()
$this->input->cookie()
$this->input->server()

TRADOTTO non riuscivo a risolvere i problemi perché nel mio MODEL mancava una istruzione MOLTO IMPORTANTE messa a un certo punto ossia

$something = $this->input->get(‘something’);

A questo punto tutto si è messo a funzionare come per magia nel senso che se digito il nome di un regista l’operatore LIKE fa il suo sporco lavoro ma poi il novizio deve interrogarsi e chiedersi in particolare:

se digito nulla che cosa accade?
se digito un nome inesistente restituisci all’ utente un messaggio specifico?
e la questione di SQL iniecton come la gestisci?

Allora che cosa è stato fatto Martedì 3 novembre 2020 verso le 22? Sono state risolte le prime due questioni con una clausola IF – ELSE IF in modo da dire all’ utente “guarda che se fai questa cosa qui vai incontro a questo messaggio etc”. Dopodichè soddifatto SONO SBIANCATO quando verificando che inserendo un singolo APICE ingrediente tipico degli ATTACCHI SQL INIECTJON tutta la mia applicazione diventava vulnerabile anche perché il messaggio di sistema riportava ulteriore info da dare all’ utente per capire la struttura del mio database! PANICO ASSOLUTO, che fare, devo trovare subito il modo di disabilitare il FORM senza alterare il codice e scartabellando in rete e anche sul manuale è saltato fuori all’ indirizzo https://codeigniter.com/userguide3/libraries/input.html?highlight=input%20security:

Input Filtering
Security Filtering

The security filtering method is called automatically when a new controller is invoked. It does the following:

If $config[‘allow_get_array’] is FALSE (default is TRUE), destroys the global GET array.
Destroys all global variables in the event register_globals is turned on.
Filters the GET/POST/COOKIE array keys, permitting only alpha-numeric (and a few other) characters.
Provides XSS (Cross-site Scripting Hacks) filtering. This can be enabled globally, or upon request.
Standardizes newline characters to PHP_EOL (\n in UNIX-based OSes, \r\n under Windows). This is configurable

OK! Ottimo anche se ero seccato perché il form risultava inagibile, l’idea era di togliere la funzionalità di GET sul form in attesa di risolvere i problemi di sicurezza e allora vado sul CONFIG.PHP e cerco $config[‘allow_get_array’] per dargli un valore FALSE che non è di default! Carico i file e verifico che funzioni! Ottimo! Peccato però che l’inibizione sul GET é assoluta e questo mi ha portato a rendere inutile tutto il lavoro sul resto dell’ applicativo basato sul passaggio di querystring! Quindi mi sono detto che serviva altro e infatti l’ho trovato apparentemente:

$nomevariabile = $this->security->xss_clean($this->input->get(‘nomevariabile’));

 

ma questa soluzione non lavorava, per cui alla fine ho trovato anche:

$nomevariabile = $this->security->sanitize_filename($this->input->get(‘nomevariabile ‘));

 

e questa volta il malintenzionato che cerca di giocare con gli APICI sul mio form si vede restituire un PIKKE come risposta!

Grazie a queste incredibili scoperte raggiunte consultando il manuale di CODEIGNITER, https://codeigniter.com/userguide3/index.html , non senza difficoltà, oggi mi sento MOLTO PRIMA NAZIONALE. Ma sono bene che se voglio passare CM e guadagnare altro elo per acquisire almeno le basi di Codeigniter Framework devo RISOLVERE ancora il problema della PAGINAZIONE. Un ultimo scoglio fatale per http://umbriawayformazione.altervista.org/ ? La sfida con questo potentissimo e affascinante Framework continua, at the next battle! Intanto oggi siamo arrivati al giorno 24 con tre vittorie di fila negli ultimi tre turni di quotidianità (risultati reali raggiunti sul campo!). Non so dire se http://umbriawayformazione.altervista.org/ sia realmente sicuro adesso ma almeno mi sembra di aver fatto qualcosa per prevenire eventuali attacchi esterni!




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

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

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

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

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

Model
Librerie
Helpers
Plugins
assets (risorse grafiche)
scripts
etc

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

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

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

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

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

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

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

Che cosa è questa cosa?

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

Mossa numero 1, scaricare codeigniter

Mossa numero 2, scaricare grocerycrud

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

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

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

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

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

class Main extends CI_Controller {

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

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

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

}

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

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

$this->_example_output($output);
}

function _example_output($output = null)

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

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

 

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

Mossa N 8 scrivere le seguenti info nel file vista:

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

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

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

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

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

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

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

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

 

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

 

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

 

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

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

 

 




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

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




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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

var elo = “1987”;

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

var exp = /.+/;

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

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

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

var exp = /[0123456789]+/;

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

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

se ritornassi a stampare a video la sequenza:

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

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

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

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

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

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

var telefono = “011-250644”;

scriverò:

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

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

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




VUE JS FRAMEWORK e la GESTIONE DEGLI STATI

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

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

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

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

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

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

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

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

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

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

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

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

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

:focus {
outline: 0;
}

.hidden {
display: none;
}

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

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

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

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

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

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

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

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




NODE, javascript lato server, istruzioni per l’uso

Se c’è qualcosa di interessante in questa epoca che stiamo vivendo è che la distribuzione della conoscenza non è più esclusiva di scienziati, prelati o uomini di armi come nel medioevo di Leonardo Da Vinci per esempio, che avrebbero avuto da perderci nei loro profitti favorendo i loro bellicosi competitors, oggi una quantità inesauribile di tecnologie per costruire web app sono a disposizione di tutti per favorire sviluppo e innovazione tecnologica. Javascript lato server è una tecnologia ormai di ampia diffusione e Node, https://nodejs.org/en/, in quanto runtime JavaScript guidato da eventi asincroni, il software è progettato per creare applicazioni di rete scalabili. Per seguire questo post è sufficiente avere un minimo di base con JS tradizionale e HTML, nulla di trascendentale. Rispetto alla programmazione classica dove il web developer deve costruire i suoi mattoni uno per uno a livello fisico con tanto di tocco di mouse, qui abbiamo il vantaggio di passare a una programmazione velocizzata grazie all’ uso dei comandi che DOBBIAMO eseguire da terminale, operazione un pò ostica all’ inizio se non si è abituati a un simile approccio. Nel seguente esempio “ciao mondo”, molte connessioni possono essere gestite contemporaneamente. Ad ogni connessione viene attivato il callback, ma se non c’è lavoro da fare, js asincrono dormirà, per usare una metafora letteraria. Ciò è in contrasto con il modello di concorrenza più comune di oggi in cui vengono utilizzati i thread del sistema operativo. Il networking basato su thread è relativamente inefficiente e molto difficile da utilizzare. Inoltre, gli utenti di Node sono liberi da preoccupazioni di blocco permanente del processo, poiché non ci sono blocchi. Quasi nessuna funzione in Node esegue direttamente I / O, quindi il processo non blocca mai. Perché nulla blocca, i sistemi scalabili sono molto ragionevoli da sviluppare in Node. Il nodo è simile nel design e influenzato da sistemi come Ruby’s Event Machine o Python’s Twisted. Nodo prende un po ‘più in basso il modello di evento. Presenta un ciclo di eventi come un costrutto di runtime invece che come una libreria. In altri sistemi c’è sempre una chiamata di blocco per avviare il ciclo degli eventi. In genere il comportamento è definito tramite callback all’inizio di uno script e alla fine avvia un server attraverso una chiamata di blocco come EventMachine :: run (). In node non esiste una tale chiamata di ciclo di avvio-evento. Il nodo entra semplicemente nel ciclo degli eventi dopo aver eseguito lo script di input. Node esce dal ciclo degli eventi quando non ci sono più callback da eseguire. Questo comportamento è simile al browser JavaScript: il ciclo degli eventi è nascosto all’utente. HTTP è un cittadino di prima classe in Node, progettato pensando allo streaming e alla latenza bassa. Ciò rende Node adatto alla fondazione di una libreria o di un framework web. Solo perché il nodo è progettato senza thread, non significa che non è possibile sfruttare i core multipli nel proprio ambiente. I processi figlio possono essere generati utilizzando la nostra API child_process.fork () e sono progettati per essere facili da comunicare. Costruito sulla stessa interfaccia è il modulo cluster, che consente di condividere i socket tra i processi per consentire il bilanciamento del carico sui core. Per lavorare con Node è sufficiente un editor performante tipo https://code.visualstudio.com/ per esempio o anche Sublime Text, Brackets o Atom. Il framework che lavora con Node è https://expressjs.com/it/ , libreria web veloce, non categorica e minimalista per Node.js installabile con una semplice riga di comando: $ npm install express –save dove per npm si intende il gestore dei moduli a disposizione per lo sviluppatore. Npm che gestisce le dipendenze modulari è fornito automaticamente al momento dell’ istallazione di Node, ulteriori informazioni sono reperibili anche all’ indirizzo https://www.npmjs.com/. Il comando npm-init create a package.json file ad esempio il comando $ npm init react-app ./my-react-app crea un nuovo progetto basato su React usando create-react-app. il comando npm i npm aggiorna alla versione più recente. Con il comando node posso entrare nella console di programmazione dove posso dire ad esempio che a = 1 e digitando a invio mi verrà restituito 1 e ancora digitando a = 2 posso cambiare il valore della variabile. Posso anche definire una costante con global.a = 3 per esempio; con il comando .exit ritorno alla root utente. Ora proviamo a creare un file con estensione JS nella stessa cartella dove abbiamo creato il JSON ad esempio module1.js e all’ interno scriviamo le seguenti righe di codice:

consol.log(“ciao”);
a = 2;
console.log(a);

quale sarà il risultato lanciando da console con il comando node module1.js il file creato? Vedremo esattamente prima il ciao stampato a video e successivamente nella riga successiva l’esecuzione della istruzione che viene dopo quindi un due. web developer umbriaNelle architetture basate su richiesta risposta nel processo tradizionale io ho una partita a tennis dove il lato client del browser interroga il lato server, con Node abbiamo già detto che questo meccanismo non corre il rischio di interruzioni in quanto il processo è asincrono. Ora nella stessa cartella test creata prima creiamo il file server.js e creiamo un localserver sulla porta 3000 come quello che mette a disposizione xampp per esempio. Nel file server.js scriveremo:

var http = require(‘http’);
var server = http.createServer(function(req, res) {
console.log(‘inizia la richiesta!’);
res.write(‘ho ottenuto la tua richiesta’);
res.end();
});
server.listen(3000);

lanciando il file con il solito comando node server.js (anche senza estensione) e aprendo la pagina 127.0.0.1:3000 o anche localhost:3000, vedremo come si comporta esattamente lo script dalla finestra terminale non appena avrò digitato a video il mio URL. Ovviamente con Node abbiamo il vantaggio di usare EXPRESS Server. Con il comando npm i express –save posso installare il mio pacchetto modulo all’ interno della cartella node_modules. Ora posso fare lo stesso rispetto alla creazione di un localserver, quindi creo il file serverex.js e dentro scriverò le seguenti istruzioni, precedendo questa operazione dalla creazione del famoso file index.html che si trova nella root che andremo a inserire dentro la famosa cartella PUBLIC tipica dell’ architettura da erigere per una web app, ossia l’area dove saranno visibili le parti interattive con l’utente a video. Quindi:

var express = require(‘express’);
var app = express();
var server = app.listen(3000, listening);
function listening() {
console.log(“sono in ascolto”);
}
app.use(express.static(‘public’));

web developer umbriaA questo punto lanciando il comando node serverex.js il terminale si metterà in ascolto e lanciando il nostro localhost noteremo che automaticamente il contenuto della nostra cartella PUBLIC verrà mostrato all’ utente. Riassumento in questo post abbiamo visto che javascript lato server o NODE è facilmente installabile sul nostro computer. Abbiamo anche visto come installare il modulo EXPRESS o il server dedicato che ha i suoi comandi per il restart o lo spegnimento. Abbiamo visto la semplicità di alcuni comandi (ma non tutti, ad esempio il parametro -g alla fine di una stringa viene usato per le installazione GLOBALI sulla propria macchina) per iniziare ad entrare nella shell di programmazione o per installare o lanciare eseguibili. Abbiamo anche dato una occhiata all’ architettura di base capito l’importanza di alcune cartrelle funzionali come PUBLIC o la cartella NODE_MODULES, oltre a padroneggiare a livello base alcuni strumenti legati al browser come la web.consol o gli editor di testo per gestire il codice. Come primo approccio può bastare, in uno dei prossimi appuntamenti entreremo nella progettazione vera e propria di una WEB APP con NODE!




Il seicento di Don Giovanni Cantoni e l’Italia in decadenza

Don Giovanni Cantoni il parroco che gestisce Collemosso nella prima metà del seicento in Umbria, con una Italia di sfondo che sembra equiparata a una sorta di bella addormentata nel bosco, ha ormai acquisito credibilità sul campo e legittimazione ad esistere dopo tre riconoscimenti ufficiali che lo vedono pubblicato a destra e a manca su alcune antologie nazionali nati da concorsi letterari. Ma chi è questo personaggio e come si inquadra nel periodo storico? Chi fa sport sa bene che il modo migliore di utilizzare il tempo quando l’atleta non ha prestazioni dirette da offrire sul campo è quello di prepararsi per la gara successiva, magari usando il tempo passivo per un lavoro di revisione critica o di conoscenza sugli avversari o programmando una tabella di marcia per i prossimi impegni. Anche l’aspirante campione che si cimenta nella letteratura condominiale ha gli stessi obblighi, nel senso che se ha in progetto di scrivere di storia, può usare la crisi cosiddettà delle terre di mezzo (mancanza di scintille creative e materiale fluente che abbia senso compiuto sulla carta) per ricaricare il fucile e acquisire competenza sul periodo storico in esame, per esempio. Don Giovanni Cantoni è un criminale travestito da prete sottomesso che ridistribuisce la ricchezza accumulata con la coercizione e il plagio dai suoi stessi governanti in favore dei compaesani e del popolo e questo lo può fare dopo che nei suoi trascorsi passati vi è stata una esperienza unica di addestramento come sicario alla tana degli assassini, un progetto finanziato dal duca di Urbino ma gestito da strane cariche al soldo del Papa, una località segreta orientativamente ubicata nel confine umbro marchigiano in un terreno boscoso caratterizzato da anfratti cavernosi lungo l’appennino, questo ai primi del seicento. Ma quello che accade a Collemosso non è altro che specchio di un gioco più grande che fa girare i suoi giganteschi ingranaggi nella grande storia, che malgrado tutto finisce per influenzare le beghe dei piccoli umani anche a livello locale. Allora come è questo seicento buio dove vengono consumati trucidi delitti legalizzati (vedi la morte di Bruno inizio secolo per esempio)? Salta subito all’ occhio il restringimento dell’ Italia come blasone internazionale, anche se solo la famosa banca di Genova amplificherà ancora per poco le sue gesta, dal momento che i prestiti agli spagnoli padroni non verranno onorati: questo perchè il rinascimento e i suoi riverberi sono alla frutta, perchè la scoperta dell’ America ha portato al declino delle repubbliche marinare che non possono competere con le grandi flotte commerciali di paesi come Olanda, Inghilterra e Spagna in rotta verso l’Atlantico e il Nuovo Mondo brulicante di ricchezze, un crollo prodotto da una Spagna che governa gran parte del territorio e che essendo egli stessa sommersa dai debiti e al declino nella sua classe dirigente ancora centrata su una fiducia da rigido feudalesimo che tramanda le sue cariche in virtù di logiche clientelari, non è in grado di portare innovazione e sviluppo sulla penisola a causa della sua politica vessatoria indotta sui popoli sottomessi per pagare il peso di guerre europee molto dispendiose. Il restringimento delle città marinare che dominavano l’Europa come Venezia per esempio, porta anche al restringimento del business come quello dei tessuti per citarne uno, in quanto non è più l’italia al centro del business, ma il mondo. Come se non bastasse lo stesso Manzoni parla di una famosa peste nel suo romanzo storico i promessi sposi (anni trenta) e anche le cronache locali riportano un terribile flagello nell’ indotto di Collemosso (Colle di Nocera Umbra nella realtà) e dintorni (anni cinquanta) che decimerà la popolazione mentre un parroco locale morirà nel tentativo di arginarne i suoi effetti nefasti (nella storia reale è Don Francesco Faraoni, ma nel mio filone rivoluzionario non è altro che Don Giovanni Cantoni che si pone alla stregua di un novello John Connor della saga di Terminator per organizzare una resisteza ideologica e culturale che web developer umbriadovrà servire come leva per rimuovere i regimi autoritari centrati sull’ oppressione e il controllo delle genti gravate da dazi e tasse insostenibili. Per compiere questa operazione deve educare le masse in gran segreto e accumulare libri strategici che la chiesa sta bandendo al rogo come quelli di Keplero, Galileo, Copernico ma anche quelli che inneggiano alla ribellione e alla rivoluzione, come la città del sole di un Campanella sopravvissuto solo per astuzia all’ inquisizione fingendosi pazzo e che abolisce il concetto tanto caro alla chiesa come quello di proprietà senza autorizzazione. Quindi se da un lato il personaggio fa buon viso con il vescovo che gli impone vincoli e restrizioni, dall’ altro fa cattivo gioco capeggiando egli stesso assalti guidati con i suoi briganti nascosti sulle falde del Monte Merlana per sottrarre alla chiesa in transito verso i porti marchigiani impegnati con una potenziale lotta contro le mire espansionistiche dell’ impero ottomano, ciò che ella stessa ruba senza rispettare le leggi. Gli scenari sono abbastanza contorti nel seicento ma quando pensiamo all’ arte di Caravaggio e alla rivoluzione etsetica del Bernini che ci mostra la persuasiva bellezza del declino nel settore artistico o nomi come quelli di Bacone e la sua filosofia naturalistica in Inghilterra, alla Francia e alla rivoluzione operata da Cartesio, alle indicazioni sconvolgenti di Keplero in campo astronomico e tutto quello che abbiamo contemporaneamente in Italia (appunto vedi intellettuali finiti abbrustoliti ma anche gente come Galileo o Campanella), possiamo pensare a un secolo che trasforma radicalmente il mondo antico per plasmarlo in un incubatore di quello moderno. Il seicento con i suoi laghi di sangue delle guerre anche religiose non è solo un ponte verso la costruzione della società moderna ma un sistema dove le rivolte ideologiche e culturali e militari vengono fomentate e messe in atto per liberare il popolo dall’ oppressore. Il tema della giustizia sociale che caratterizza anche la nostra epoca è centrale nel seicento così come quello del conflitto permanente tra le parti offese dal sistema e quelle invece che cercano di assicurarsi l’immobilità del tessuto sociale per meglio controllare e dissanguare. In questo quadro poco idilliaco dove per strada potevi essere sbranato da lupi armati di spade e archibugi solo in una stregua lotta per la sopravvivenza, trova fertile comparsa la figura di DGC che ha una personalità bipolare scissa tra il suo passato sanguinario che lo ha visto sopravvivere a esercitazioni crudeli e il suo bisogno di giustizia e di contemplazione della bellezza che gli fa ammirare anche le opere dei suoi contemporanei. Uno spirito nobile plagiato da istinti animali efferati che però vengono messi al servizio della comunità, con azioni silenziose che sfuggono alla tracciatura del vescovo Fiodenzi. Indubbiamente i moti di vitalità in tutta Europa che si spostano dal sud verso il nord, alimentati anche dal diffondersi da nuovi movimenti protestanti che lasciano l’Italia ancora scombussolata dagli echi del concilio di Trento, tolgono credibilità internazionale alla penisola, anche perchè le spinte nazionalistiche indotte dalle posizioni religiose provocano terremoti bellici di sanguinosa portata nel continente (guerra dei trenta anni a partire dal 1618). Il seicento è un secolo nero come la profondità del cosmo senza stelle e senza dio, come una statua di ebanite senza linee, come un quadro pervaso da una miriade di demoni affamati brulicanti di pece che emergono dalla tela per sostenere la cruenta lotta per la sopravvivenza. La sensazione è che DGC si trova a suo agio a combattere i campioni della prepotenza mentre molto meno può fare e ne esce sconfitto quando di fronte ha le estreme unzioni da consumare causate dalle carestie inaccettabili prodotte dall’ uomo, contro la fame indotta dall’ ingiustizia sociale DGC diventa in gergo inglese un powerless e il suo sguardo di parrocco ne esce impotente dopo l’ennesima morte di un popolano perso nella miseria che non è solo quella materiale o quella di un bambino ucciso prematuramente dalle malattie. Il seicento è un secolo dannato per definizione, pieno di squarci di luce ma anche di torrenti di sangue e ha anche inquietanti analogie con il mondo attuale, fortunatamente con alcune brutali malattie definitivamente sconfitte. Che sia anche il nostro tempo solo un trampolino di lancio verso la costruzione di società migliori prive del servilismo e dai comportamenti indotti dalla logica del denaro nel modello globalizzato? Se la risposta è si, allora anche in questa era esistono dei supereroi che stanno combattendo di nascosto per rivendicare equilibrio ed equità sociale? Ce lo auspichiamo in termini di prospettivee di crescita evolutiva e non implosiva, non lo sappiamo. L’unica cosa certa è che DGC è riuscito a mettere le mani su un altri libro eretico da sistemare nella sua biblioteca maledetta prima che venga bruciato dai suoi nemici che egli stesso serve: https://umbriawaynoir.wordpress.com/2019/06/05/triplete-con-don-giovanni-cantoni-coppa-italia-scudetto-e-champions-league-nella-letteratura-condominiale/




Progetto storico fotografico su Colle di Nocera Umbra

Stiamo allestendo un archivio documentale fotografico dotato di tutte le moderne comodità dei motori di ricerca per cercare ogni tipo di informazione su Colle di Nocera Umbra con l’idea di metterlo presto in linea: storia, location, tradizioni, curiosità, landscape, skyline, epoche vintage di come eravamo etc etc. Il progetto è open source e non ha fini di lucro se non rispondere alla domanda dantesca che Sante Cioli nel suo secondo libro su Castrum Collis pone come incipit di una avvincente narrazione storica: “chi fur li maggior tui?” . Colle appartenente alla Terre di Mezzo (meno male che non c’è Sauron..o sì?) ha dalla sua delle radici fortemente caratterizzate stigmatizzate per l’appunto dai due lavori del compianto SC, che è riuscito a vagliare una enorme quantità di materiale archivistico che consentono al collegiano di sapere tutto su chi era e dove sta andando (se mai servisse!). Il progetto è open source e non ha fini di lucro, se mai ha permesso a Umbriaway Consulting di risolvere alcuni problemi tecnici per costruire una interfaccia grafica minimale ma funzionale e precisa anche nei criteri di ricerca, nel senso che anche una semplice parola come “agricoltura” o “vintage”, può richiamare il materiale fotografico connesso, oltre naturalmente a estrapolare comodamente il materiale semplicemente selezionando dal menù a tendina per categoria. Chiunque può partecipare attivamente al progetto inviando foto o materiale che verrà catalogato con il nome imposto della sorgente. Hai una foto del paleolitico su Colle di Nocera Umbra che ci mostra come eravamo? Hai delle curiosità storiche-antropologiche da proporre con documentazioni testuali? Vuoi semplicemente valorizzare un tramonto collegiano su uno skyline che certamente non è come quello di Los Angeles ma altrettanto unico e irripetibile per un momento da cartolina? Per partecipare a questa iniziativa compilare il modulo di contatto presente all’ indirizzo https://www.umbriaway.eu/contatti/ sarete tempestivamente attivati! In ogni caso prossimamente il progetto verrà inizializzato con le informazioni base presenti e sarete informati sull’ indirizzo web pubblicato. Nel frattempo sono disponibili free le gallery https://www.umbriaway.it/collegallery/ e https://www.farwebdesign.com/collegallery/




Colle Search, il traduttore delle terre di mezzo!

web designer umbriaScine, none, damme la petriola, te dò una rocciata giù le gambe, che te sei nuggita e via cantando. Ma perchè sulla dorsale Gualdo Tadino Nocera Umbra parlano cuscine? Cuscine che significa cuscino? Se uno arriva da Oxford e legge il bollettino che fanno al Grottino ci ha bisogno di un traduttore dei termini dialettali? Niente paura Umbriaway Consulting sensibile a tutte le forme di erudizione ha messo in moto un progetto di decriptazione semantica per tradurre i geroglifici di Champollion con un semplice tocco del mouse. Basta recarsi all’ indirizzo: https://www.umbriaway.eu/collesearch/ e digitare il termine delle terre di mezzo (Colle del resto si trova a metà strada tra Nocera e Gualdo a cavallo tra i CAP 06025 e 06023) da tradurre in presunto italiano e il gioco è fatto, al momento l’ufficio tecnico ha inserito solo lo scine, il none, marraccione e la famosa rocciata a scopo dimostrativo ma c’è da giurare che qualche simpatica storpiatura borderline dei parlanti locali, invidiata persino dall’ accademia della crusca, finirà presto vivisezionata nel DB Colle Search! Google Search ce spiccia casa quando c’è da imprimere qualche lieve storpiatura agli avverbi comuni ma non solo quelli! Al di là degli aspetti ironici che non mancano sarebbe interessante capire come nascono certe espressioni idilliache locali, non sarà stato mica Dante quando bazzicava per l’Umbria che ha seminato proseliti dotati linguisticamente rifacendo il verso a Gengis Kahn nelle steppe asiatiche solo per fagocitare l’incremento demografico in volgare?! Mah! Comunque se non sai che cosa indicano i parlanti locali con l’espressione “sei proprio un marraccione” don’t worry! Oggi c’è il traduttore universale delle terre di mezzo di Umbriaway Consulting, consultabile all’ indirizzo: https://www.umbriaway.eu/collesearch/ !