Dovete imparare il PHP, dopo aver imparato i fondamenti di HTML

L’HTML √® un linguaggio client di visualizzazione. Ovvero le istruzioni presenti interpretate dal browser sul vostro client (computer, smartphone, tablet, …) vi permetteranno di visualizzare la pagina graficamente in un modo piacevole.
Permette di visualizzare immagini, link, testo (font), utilizzare tabelle, …
Difficilmente viene percepito come un linguaggio e difficilmente si programma in html. Si utilizzano tool che nascondono la programmazione html, si parla di videoscrittura, così come con Word.

Ma se avete bisogno di un linguaggio server di programmazione inserito nell’html?
Ovvero immaginate di aver bisogno di chiedere informazioni a chi legge le vostre pagine html e con quelle informazioni fare delle operazioni.
Ad es. Google (motore di ricerca) come funziona?
E’ una pagina html con una semplice finestrella< ed un bottone. Introducendo le chiavi e schiacciando il bottone dite ad un server (o pi√Ļ server) cerca nel tuo archivio e trova i risultati pi√Ļ attinenti alle mie chiavi e fammi vedere il tutto.

Il linguaggio pi√Ļ naturale per questo tipo di programmazione √® il PHP.

L’html prevede le form (la possibilit√† di fare le finistrelle) ma i dati inseriti verranno poi gestiti da un linguaggio di programmazione server e qui entra in gioco il php.

Ad es.

<form action=”action.php” method=”POST”>
<p>Il tuo Nome: <input type=”text” name=”nome” value=”” /></p>
<p>La tua et√†: <input type=”text” name=”eta” value =”” /></p>
<p><input type=”submit”></p>

significa: crea due finestrelle dove l’utente pu√≤ introdurre del testo. Nella prima l’utente potr√† inserire il suo nome e verr√† scritto nella variabile nome, nella seconda l’utente potr√† scrivere la sua et√† e verr√† scritta nella variabile eta quando l’utente avr√† pigiato il bottone invia (submit tradotto in italiano) ed il tutto sar√† passato al programma php contenuto nel file action.php

Il tuo Nome:

La tua età:

Questo action.php

<html>
<p>Ciao <strong><?php echo htmlspecialchars($_POST[‘nome’]); ?></strong>.</p>
<p>La tua et√† √® di <strong><?php echo (int)$_POST[‘eta’]; ?></strong> anni.</p>
<p>Se li hai gi√† compiuti quest’anno allora sei nato nel <strong><?php echo 2016-(int)$_POST[‘eta’]; ?></strong> altrimenti nel <strong><?php echo 2016-(int)$_POST[‘eta’]-1; ?></strong>.</p>
</html>

Ovvero nell’html i comandi php sono del tipo¬†<?php …..?>
echo
√® come print un comando per “stampare” il contenuto di una variabile.
Il server (web) esegue i contenuti delle righe php, stampa i risultati delle variabili ed invia il file html al nostro browser che lo visualizzerà.

Nello stesso modo potrebbe compiere qualsiasi attivit√† sul server o su altri server come estrarre dati da un database, eseguire applicazioni, …

Queste sono le basi per capire come funziona internet e la rete di computer interconnessi che si nascondono dietro.

Corso di introduzione all’html che feci nel 2014 per le mie figlie

C’erano gi√† germi di Codescuola.it prima della sua creazione. Questo un corso di introduzione all’html che feci nel 2014 ad uso e consumo delle mie figlie.

Le mie figlie (10 e 12 le pi√Ļ grandi) sanno utilizzare poco il computer (hanno imparato l’utilizzo a scuola), lo usano quasi solo per ricerche scolastiche, non posseggono smartphone o tablet.
Non sono interessato ad insegnare loro come si utilizza un computer, lo impareranno. Mi piacerebbe che capissero cosa si nasconde dietro un computer e quindi dietro un qualsiasi oggetto delle vita quotidiana. Mi piacerebbe capissero l’importanza delle comunicazioni tra computer, internet.

Per iniziare a comprendere cosa si nasconde dietro bisogna imparare i rudimenti di un linguaggio di programmazione. Meglio se il linguaggio è nato con internet e con i browser in modo tale da riuscire a visualizzare quello che si sta facendo. Ho deciso perciò di iniziare con HTML il linguaggio fondamentale di internet, un linguaggio di visualizzazione.

Il file: un file HTML è un file di testo con estensioni .htm o .html
Usando un programma per editare testo (ad esempio notepad, blocco note in italiano, su Windows) salviamo un file senza niente in esercizio.htm [per un editor pi√Ļ attuale¬†vi ricordo l’articolo relativo a¬†Atom].
Vedrete che il sistema operativo lo riconosce (tramite l’estensione) come un file html sapendo cos√¨ che se lo mandate in esecuzione (doppio click in Windows) dovr√† aprire il browser e far vedere all’interno i comandi da voi introdotti.

I tag: come tutti i linguaggi anche l’html ha delle regole, i tag.
introducendo all’inizio <html>
e alla fine </html>
con <html> dichiariamo qui inizia l’html
Con </html> qui finisce l’html
I tag <…> sono sempre di inzio, i tag </…> di fine

Ed ora?
Scrivete quello che volete!
Ecco il contenuto del mio file esercizio.htm ūüėČ

<html>
Scrivete quello che volete!
</html>

In Windows doppio click su esercizio.htm e magia, si apre il browser ed in una pagine nuova possiamo leggere Scrivete quello che volete!

Ora andate a capo e scrivete Questa è la seconda riga e provate a visualizzare
la modifica. NON VA A CAPO!
Esatto: c’√® un tag speciale per andare a capo: <br />

<html>
Scrivete quello che volete!<br />
Questa è la seconda riga
</html>

In teoria potreste gi√† scrivere in vostro primo¬†romanzo html, diciamo che per essere¬†dei veri raffinati bisognerebbe utilizzare anche i tag di inizio e fine¬†paragrafo <p>…</p>, i tag di grasseto <strong>…</strong>, i tag di corsivo <em>…</em>
Ad esempio

<html>
<p>
Scrivete quello che volete!<br />
Questa è la seconda riga<br />
Questo è evidenziato in <strong>grassetto</strong><br />
Questo è evidenziato in <em>italico</em><br />
</p>
</html>

Se farete degli errori nello scrivere i tag il browser non riuscirà ad interpretarli correttamente e cercherà di farvi vedere quello che ha capito.
Ad es.

<html>
<p>
Questo è un errore molto comune <strong>grassetto<strong> perché ho chiuso il grassetto con il tag di apertura
</p>
</html>

Dovreste già capire perché esistono programmi che vi aiutano a scrivere pagine html ma ora conoscete la base di quello che si nasconde dietro.
Ora gli ultimi due tag complessi che hanno segnato la rivoluzione internet.

Il LINK: <a href=”il link”>il testo che cliccato porter√† al link indicato</a>
Ad esempio: <a href=”http://www.pivari.com”>questo √® il mio sito</a>

<html>
<p>
<a href=”http://www.pivari.com”>questo √® il mio sito</a>
</p>
</html>

Il link sembra sempre una magia ma √® proprio un comando semplice: clicca sul¬†testo indicato ed andrai a vedere un’altra pagina html (nello stesso o in un¬†altro sito)

Caricare le immagini: <img src=”l’immagine da caricare” />
Ad esempio
<img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” />
caricherà il logo di Pivari.com

Combinando link ed immagine possimo fare in modo che cliccando l’immagine si¬†vada a vedere una pagina
<a href=”http://www.pivari.com”><img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” /></a>

Questo il nostro esercizio.htm FINALE

<html>
<p>
<a href=”http://www.pivari.com”><img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” /></a><br />
Scrivete quello che volete!<br />
Questa è la seconda riga<br />
Questo è evidenziato in <strong>grassetto</strong><br />
Questo è evidenziato in <em>italico</em><br />
<a href=”http://www.pivari.com”>questo √® il mio sito</a><br />
Questo è un errore <strong>grassetto<strong> perché ho chiuso il grassetto con
il tag di apertura
</p>
</html>

Dovreste vedere


Scrivete quello che volete!
Questa è la seconda riga
Questo è evidenziato in grassetto
Questo è evidenziato in italico
questo è il mio sito
Questo è un errore grassetto perché ho chiuso il grassetto con
il tag di apertura

Il migliore text editor è Atom, fondamentale per la programmazione tradizionale

Quando si realizzare programmi utilizzando il codice è fondamentale scegliere un ottimo text editor, meglio sarebbe scegliere il migliore.
Io iniziando sui primi sistemi unix imparai vi (emacs non mi piaceva molto). Non √® certo semplice da imparare, le varie sequenze di tasti, … E’ per√≤ vero che se si impara ad utilizzare al meglio le RE (regular expression) ogni linguaggio di programmazione diventer√† semplice.
Oggi l’evoluzione di vi, vim, permette un utilizzo su qualsiasi sistema operativo a finestre e la possibilit√† di avere per ogni linguaggio di programmazione evidenziati i caratteri e parole speciali e dei controlli sull’utilizzo corretto delle regole (ad es la verifica della chiusura di parentesi, …).
Ma questi editor sono di vecchia generazione e richiedono tempi di apprendimento ed utilizzo veramente lunghi.

Editor pi√Ļ moderni consentono un apprendimento quasi immediato ma scarsa possibilit√† di approfondimento.

Ieri ho scoperto Atom.

Ho trovato il suggerimento in una guida di perl6 e l’ho subito installato!
Ora sto provando le potenzialità.

Code, digitalizzazione, Italia e Europa (DESI 2016)

Questa la sintesi del DESI 2016:
L’Italia, con un punteggio complessivo pari a 0,4 √® al 25¬į posto nella classifica dei 28 Stati membri dell’UE.
Nell’ultimo anno ha fatto pochi progressi in relazione alla maggior parte degli indicatori. Una delle eccezioni riguarda il ruolo maggiore del commercio elettronico nel fatturato delle PMI (8,2% del totale), ma l’industria italiana potrebbe trarre vantaggi da un uso pi√Ļ diffuso delle soluzioni di eBusiness. La copertura delle reti NGA √® passata dal 36% delle famiglie nel 2014 al 44% nel 2015, ma i progressi sono ancora troppo lenti, ostacolando anche la sottoscrizione di abbonamenti alla banda larga veloce (solo il 5,4% del totale, che √® limitato al 53% delle famiglie). L’assenza di competenze digitali di base √® la ragione principale del basso tasso di adozione della banda larga fissa. In effetti, il 37% della popolazione non usa internet regolarmente e il restante 63% svolge poche attivit√† complesse online. Per quanto riguarda i servizi pubblici digitali, l’Italia si avvicina alla media dell’UE.
L’Italia fa parte del gruppo di paesi che stanno recuperando il ritardo; sebbene le sue prestazioni siano ancora inferiori a quelle dell’UE nel suo insieme, nell’ultimo anno ha registrato rapidi progressi e si √® avvicinata alla media dell’UE. Le prestazioni dell’Italia sono tuttavia ancora inferiori alla media del gruppo di paesi in fase di recupero.

E per il coding? Sicuramente peggio ūüôĀ

Ai nostri figli dobbiamo spiegare non l’utilizzo ma cosa si nasconde dietro: Safe Internet Day 2016

Safe-Internet-DayRiporto da ‚ÄúKids need better protection ‚Äď An open letter to developers and decision makers‚ÄĚ di Mikael Albrecht, Security Specialist dei Labs di F-Secure.

Bisogna essere sinceri. I nostri figli amano i loro smartphone e la rete. Hanno accesso a un sacco di materiale che li interessa. Ed √® anche il loro nuovo modo ‚Äėcool‚Äô per restare in contatto con gli altri. Ma la rete non √® progettata per loro e bambini sempre pi√Ļ piccoli hanno tra le mani smartphone connessi a Internet. La tecnologia non viene in aiuto dei genitori, che finiscono con l‚Äôavere ben poca visibilit√† su ci√≤ che i loro figli stanno facendo online. Questo porta a un‚Äôampia gamma di problematiche, dalla dipendenza da Internet al cyberbullismo al grooming (adescamento online di minori). La situazione √® preoccupante!

Ci sono diversi fattori che contribuiscono a questo grande problema:

  • I principali dispositivi di connettivit√† del futuro, i palmari, non sono adatti ai bambini. Stanno cominciando ad apparire funzionalit√† rudimentali per aiutare a proteggere i bambini, ma il loro sviluppo √® ancora troppo lento.
  • I social media ignorano i bisogni di genitori e bambini. La maggior parte dei servizi offre solo una singola user experience, sia per gli adulti che per i bambini, e non riconoscono la relazione genitore-figlio.
  • Legislazioni e autorit√† di controllo sono nazionali, mentre Internet √® globale. Non otterremo molto senza un quadro armonizzato a livello globale a cui debbano aderire sia i produttori di dispositivi che i fornitori di servizi.

[…]
S√¨, √® vero, si tratta di un problema epico. E‚Äô chiaro che non si pu√≤ risolvere in un solo giorno. Ma dobbiamo iniziare a lavorarci prima possibile. Dispositivi mobili e Inetrnet saranno molto importanti nella societ√† di domani, nella societ√† in cui vivranno i nostri figli. A loro dobbiamo fornire una rete che sia pi√Ļ adatta per le esigenze dei piccoli. Non riusciremo ad ottenere questo durante l‚Äôinfanzia dei nostri bambini. Ma dobbiamo iniziare a lavorare ora per far s√¨ che questo diventi realt√† per i nostri nipoti.

Questi i soliti tasti:

  • ai nostri figli dobbiamo fornire internet
  • solo con internet e con¬†oggetti tecnologici¬†potranno primeggiare, avere un futuro roseo

Le mie obiezioni

  • ai nostri figli dobbiamo spiegare non l’utilizzo ma cosa si nasconde dietro (CodeScuola.it)
  • i nostri figli hanno bisogno di una connessione continua (always on, h24)?

Sto iniziando a creare una libreria di primitive grafiche: cerchio, quadrato, …

Il vero programmatore dopo un po’ che programma inizia a capire la necessit√† di creare una propria libreria di oggetti che gli torneranno utili in seguito per non ricreare sempre tutto ex novo o per non cercare librerie fatte da altri.
Questo vale anche e soprattutto per il programmatori visuali.
Il mio primo block (modulo) mi ha permesso di disegnare un cerchio, il mio secondo un quadrato. Seguiranno poi il triangolo equilatero, il rettangolo, il pentagono, l’esagono, …
Quando avr√≤ una libreria di primitive sufficiente sar√† poi semplice metterle assieme per disegnare semplicemente effetti molto belli come questo make squares dove il programma disegna quadrati leggermente sfalsati, dove si cambiano colori e dimensione del tratto, …