JQUERY può assolvere con intelligenza alla funzione di precaricamento della pagina? E’ un dilemma che non fa dormire la notte eh?!

Continua il viaggio avventuroso di Giacobbo di web developer Umbria  e di Umbriaway Consulting alla scoperta dell’ acqua calda, pardon alla scoperta di come ci si mette nella condizione di perdere in poche mosse e subire scacchisticamente una miniatura. Gli scacchisti si sa hanno avute molte esperienze agonistiche e allora viene da chiedersi ma posso farmi mangiare la regina e invece che ristabilire l’equilibrio riprendendo il mal tolto faccio una mossa di attesa posizionale che scombina i progetti difensivi del mio avversario? Certo che si anche se per la verita la mossa 9..b2!! di Balogh giocata contro Nagy a Budapest nel 1948 in un gambetto siciliano é alquanto telefonata e scenografica anche se spaventosamente letale. Liquidata la parte scacchistica da parte di Faraoni Enrico CEO di Umbriaway Consulting (così imparano a giocare il gambetto siciliano!) ci porta a riconsiderare la religione JQ, non avrai altro dio all’ infuori di me. Imparare JQuery ha una curva di apprendimento lieve rispetto a Javascript, anche senza grande esperienza di programmazione é possibile andare a manipolare il DOM con estrema facilità in modo semplice e intuitivo. JQuery é essenzialmente una libreria Javascript ma ha il vantaggio di ottimizzare il codice rendendolo facile, semplice ed essenziale. Con una riga di codice puoi toccare l’intero universo dei figli del DOM afferma web developer Umbria! Certo bisogna prima familiarizzare con gli elementi genitori e figli, capire che nel DOM ci sono delle relazioni che si possono sfruttare per accedere in qualunque punto della magina contrassegnata dai marcatori HTML i famosi TAG che però qui diventano oggetti JavaScript che hanno attributi proprietà e metodi.Il document object model ha una struttura semplice e logica che semplifica l’architettura della pagina. Paradossalmente per il neofita che non ha nessuna base di programmazione potrebbe essere una idea interessante quella di approcciarsi prima a JQuery in quanto scalda i motori poi per passare a Javascript e Node o altri framework come angolar per esempio. Se ho una immagine che fa parte di un paragrafo attraverso una semplice relazione gerarchica padre figlio posso partire dall’ elemento che sta più in alto di tutti che é DOCUMENT per passare all’ oggetto WINDOW, passando poi per il BODY e il paragrafo e arrivare all’ immagine. Web developer Umbria ricorda che JQuery con una riga di codice fa tanto rispetto a JS e c’è anche una versione minimalista da scaricare che si preoccupa solo di assolvere al miglior funzionamento della USER Interface, quindi parliamo di un framework estremamente potente e flessibile. Possiamo accedere alle proprietà degli elementi molto velocemente. Risalire nodo per nodo fino al punto CHILD di mio interesse grazie all’ uso dei SELETTORI che aprono le porte per infinite possibilità. So what can Jquery do? Analizziamo l’esempio presente all’ indirizzo http://www.farwebdesign.com/jquery/1/cicerone.html ebbene carico la pagina e cosa succede? Apparentemente un bel nulla ma sotto le quinte JQuery ha predisposto al meglio il caricamento della pagina vediamo in dettaglio la funzione inserita nel post. La prima parte della funzione che si vede in gallery inizializza il documento mentre la seconda parte, classica funzione javascript che riempe l’oggetto window figlio dell’ oggetto document e legato ad esso da una relazione gerarchica si preoccupa di caricare le immagini, i banner e tutta la parte grafica annessa. E’ utile inserire questa funzione perché gli script devono girare solo quando tutto il teatro degli eventi é pronto per assicurare uno spettacolo decente agli spettatori e solo quando il body é stato completamente caricato. Detto questo vediamo anche alcune stravaganze della pagina che realmente non hanno nulla di dinamico ma che dietro le quinte lavorano benissimo. Ad esempio nella parte dei CSS abbiamo inserito un carattere Jolly che sta a significare che tutti gli elementi presenti all’ interno del document seguiranno lo stesso regime di settaggio imposto. Nello specifico l’asterisco rappresenta l’intero universo, tutti gli elementi di un documento, in pratica il simbolo dell’asterisco potrà esssere utilizzato per definire una regola globale per ua pagina o per modellare tutti gli elementi presenti all’interno di un selettore. L’area dei contenuti e il confine interno dello spazio del box dell’ elemento viene definita in CSS padding, utile ad esempio in quei casi dove il background é colorato e si vuole distanziare lo scritto dal bordo per una migliore leggibilità. A volte si vedono nelle dichiarazioni quattro valori ma é bene ricordare che fanno riferimento come partenza al TOP per finire al LEFT. Il Margine invece ha a che fare con l’idea di spazio esterno del BOX per cui se mi ritrovo un paragrafo attaccato alla pagina posso distanziare le frasi scritte con la proprietà MARGIN per l’appunto che come per il padding si suddivide nelle sue declinazioni in top, right, bottom e left. Poi ci sono altre due stravaganze inserite nella pagina con link che é bene ricordare per gli aspiranti web developer in Umbria, il sito dei fonts di Google all’ indirizzo https://fonts.google.com/ e il famoso sito della fuffa per venditori di pentole http://it.lipsum.com/ che serve a delimitare le aree di testo provvisoriamente per lasciare contenuti temporanei.

Annunci

Confondi il Viagra con il Vagrant? Allora valuta il trattamento sanitario obbligatorio (TSO)

Quante volte avete incontrato un collega che con sorriso sardonico salta fuori mentre voi siete nelle canne (non quelle fuffogene) e avete bisogno di completare il codice del vs portentoso programma su hardware e software presi in prestito e quello con un ghigno di soddisfazione satanica in volto vi dice con tono suadente e lascivo: funziona solo sulla mia macchina ma sto andando via perché sono le 17! All’ indirizzo https://www.vagrantup.com/ abbiamo il nostro Viagra ma perché dal punto di vista tecnologico questa risorsa é molto importante? Indaga Umbriaway Consulting con piglio alla Poirot per ottenere le successive informazioni. Vagrant è uno strumento per creare e gestire ambienti di macchine virtuali in un singolo flusso di lavoro e fin qui sembra tutto ok. Con un flusso di lavoro di facile utilizzo e automatizzato, Vagrant abbassa il tempo di installazione dell’ambiente di sviluppo, aumenta la parità di produzione ed elimina tutti quegli alibi legati al famoso detto del disfattista: non si può fare che da sempre viene utilizzato da tutti i gatti baggi del pianeta (neologismo ed espressione ecumenica che sta ad indicare aria bastonata dello sfigato fantozziano che non é in grado di fare). Sul sito troverai ampia documentazione per districarti con questo potente elisir. Perché dunque usare Vagrant e non il Viagra? Chje controindicazioni ci sono? Vagrant fornisce ambienti di lavoro semplici da configurare, riproducibili e portatili costruiti in cima alla tecnologia standard del settore e controllati da un unico flusso di lavoro coerente per aumentare la produttività e la flessibilità di Umbriaway Consulting e del vostro team. Per ottenere la sua magia, Vagrant si trova sulle spalle dei giganti. Le macchine vengono fornite in cima a VirtualBox, VMware, AWS o qualsiasi altro provider. Quindi, gli strumenti di provisioning standard del settore, come gli script di shell, Chef o Puppet, possono installare e configurare automaticamente il software sulla macchina virtuale. Tutto chiaro no? Se sei uno sviluppatore, Vagrant isolerà le dipendenze e la loro configurazione all’interno di un unico ambiente coerente e disponibile, senza sacrificare nessuno degli strumenti con cui si utilizza (editor, browser, debugger, ecc.). Una volta che tu o qualcun altro crea un singolo file di Vagrant, dovrai solo cercarlo e tutto è installato e configurato per lavorare. Altri membri del tuo team creano i loro ambienti di sviluppo dalla stessa configurazione, quindi, se si lavora su Linux, Mac OS X o Windows, tutti i membri del tuo team eseguono il codice nello stesso ambiente, contro le stesse dipendenze, tutte configurate allo stesso modo. Dite addio ai bug “funziona solo sulla mia macchina”, l’evoluzione non tiene conto dei Tornasol da Palio di Siena! Ambiente di sviluppo, programmi preinstallati, riproducibilità, configurazione, macchine virtuali: ma sei sicuro di stare bene, le hai prese le medice? Tutto sotto controllo e pensare che non abbiamo nemmeno parlato di https://www.virtualbox.org/ e Homestead che è l’ambiente di sviluppo di default per quanto riguarda Laravel, un potente framework PHP strutturato sul modello MVC. E se aggiungessimo altra carne al fuoco parlando di Commit e GitHub e di link come https://github.com/Swader/homestead_improved? Basta , aiuto, non se ne può più! Andate a cercare qualcuno che parla italiano!

Il ciao mondo come non l’avete mai visto in PHP

Nel famoso script phpinfo(); veniva generato un intero documento HTML comprensivo di tutte le intestazioni standard della pagina, ossia head, content, body, footer etc e il tutto serviva per illustrare le specifiche di sistema. Ora proprio a riguardo della generazione dell’ output ricordiamo che PHP oltre alla generazione di pagine web può anche lavorare su shell e interfacce grafiche complesse che qui nell’ ultimo caso non andremo a vedere come umbriaway consulting nello specifico. Sicuramente per chi inizia a programmare scrivere codice cross platform é un vantaggio, certamente java é più rigoroso. La prima cosa che si impara é il famoso ciao universo che vediamo insieme a Umbriaway Consulting:

 

<html>
<head>
</head>
<body>
<?
echo “ciao Giove!”;
?>
</body>
</html>

accedendo da localhost per vedere l’effetto che fa con questo script scopriremo che sulla pagina in esecuzione comparirà la famosa scritta giovesca sopra menzionata. Ora a livello di codice HTML se andiamo a curiosare con tastro destro il sorgente della pagina vedremo che il codice diventa il seguente:

<html>
<head>
</head>
<body>
ciao Giove!
</body>
</html>

echo é una funzione che stampa a video le stringhe delimitate da virgolette e questo esempio serve per far capire come viene generato il codice in output. La sintassi poteva anche essere echo (“ciao pinko”); ma qui si ha il vantaggio che posso solo eseguire una istruzione alla volta mentre con: echo “ciao pallino”, “questo é un saluto php”; le due frasi saranno stampate consecutivamente su una unica riga. Da shell questo script verrà eseguito prima lanciando il php.exe e poi il ciao.php il nostro script e a video comparirà lo stesso output a livello semantico. Path e percorsi per i comandi di riga di comando possono differire da sistemna a sistema (linux o windows). Ovviamente viene da chiedersi come mai devo scrivere anche i tag html se questi poi vengono generati automaticamente e dinamicamente, corretto quindi per ottenere l’effetto finale posso anche scrivere solo echo (“ciao Giove!”); nel mio script, mentre se invece volessi modellare il testo potrei scrivere qualcosa di funzionale del tipo:

<html>
<head>
</head>
<body>
<?
echo ‘<p align=”center”><b>ciao Giove!</b></p>’;
?>
</body>
</html>

da notare la sfumatura virgoletta singola e virgoletta doppia dove abbiamo usato le prime per delimitare l’intera istruzione stringa di stampa in quanto all’ interno della stringa stessa sono presenti le doppie che provocherebbero conflitti sull’ apertura chiusura. Usando solo doppie avrei generato un errore errore per l’interprete di comando. Dal punto di vista strategico restituire degli errori a video é controproducente lì dove si incontrano maleintenzionati disposti a trarre profitto dai punti di vulnerabilità del sistema. Come abbiamo giàù detto in uno dei tanti portali umbriaway consulting sul file php.ini é possibile modificare la direttiva del parametro error_reporting a =E_ALL in modo che vengano riportati tutti gli errori utili per il debug e in secondo luogo bisogna anche andarli a visualizzare tramite l’accensione del parametro: display_errors=ON che per motivi di sicurezza all’ inizio viene impostato a OFF. Se PHP viene eseguito come modulo di APACHE affinché le modifiche diventino effettive é necessario riavviare il server web.

che produce esattamente una pagina statica con questo codice:

<html>
<head>
</head>
<body>
<p align=”center”><b>ciao Giove!</b></p>
</body>
</html>