HTML5, CSS3, JAVASCRIPT Un ebook di Alessandro Stella
Programmare per il web, lato client
Programmare per il web significa scrivere almeno due applicazioni,
una chiamata client e una chiamata server le quali, comunicando tra loro,
producono un'applicazione web.
Programmare per il web significa quindi
imparare a programmare sia un'applicazione client sia un'applicazione server.
Questo ebook si occupa di insegnare le tecniche necessarie alla realizzazione di
un'applicazione client e lo fa con quasi 500 pagine esplicitamente riferite
ai principianti o ai poco esperti.
Scorri il Tablet virtuale e leggi l'introduzione adesso!
ANTEPRIMA PDF LO VOGLIO!HTML5, CSS3, JAVASCRIPT
Programmare per il web,
lato client
Introduzione
La programmazione web si basa su un’architettura chiamata client-server in cui un’applicazione client richiede dati ad un’applicazione server che glieli fornisce. L’applicazione client quindi deve essere in grado di fare delle richieste e di interpretare le risposte. Per scrivere un’applicazione client in grado di assolvere a questi compiti si può procedere in diversi modi.
Potremmo, ad esempio, scrivere codice per Windows, producendo quindi un file eseguibile (.exe) che funga da client e che sia in grado di inviare le richieste e di ricevere le risposte da un’applicazione server. Tuttavia questo tipo di soluzione funzionerebbe solo su computer equipaggiato con Windows perché gli eseguibili funzionano solo su PC che usano Windows come sistema operativo.
Oppure potremmo seguire un’altra strada e scrivere l’applicazione client usando, ad esempio, codice Java. In questo modo la stessa applicazione client potrebbe essere usata su qualunque sistema operativo (o quasi). Ma c’è anche un altro possibile modo di procedere: scrivere codice per il browser. Il browser è installato o installabile su praticamente ogni dispositivo e funziona su ogni sistema operativo. Non lo dobbiamo scrivere noi, è stabile, è sicuro, è controllato, è aggiornato di continuo. Scrivere codice per il browser significa quindi scrivere codice che funzionerà su tutti i sistemi operativi e su tutti i dispositivi (PC, Tablet, Smartphone e così via). Usare il browser come applicazione client garantisce una compatibilità pressoché totale.
Ecco perché in questo libro impareremo proprio a scrivere codice che il browser sia in grado di comprendere.
Così facendo otterremo anche un altro risultato. Infatti usando tali tecnologie, unitamente a strumenti quali PhoneGap (Cordova), con un piccolo sforzo saremo in grado di produrre vere e proprie APP capaci di funzionare sui diversi sistemi operativi mobili: Windows, Android, Mac OS. Noi non ci occuperemo di questo aspetto, ma è importante sapere che, conoscendo HTML, CSS e JavaScript, possiamo scrivere App per dispositivi mobili. Non male, no?
In ogni caso, la prima cosa da fare è quella di conoscere un po’ più da vicino il browser e, soprattutto, i linguaggi da esso gestiti. Approfondiremo i due linguaggi per eccellenza da conoscere per scrivere codice per il browser: HTML e CSS. Dedicheremo un intero capitolo a fare pratica con questi due linguaggi. Il tutto rimanendo sempre fedeli alle direttive del W3C, organismo che impareremo a conoscere e rispettare.
Al fine di avere la più ampia visione possibile della programmazione lato client, faremo la conoscenza di altre tecnologie molto diffuse: Adobe Flash, Microsoft Silverlight e Oracle JavaFX. Tecnologie che consentono di ottenere effetti grafici spettacolari all’interno di una pagina web e che sono molto apprezzate in particolari settori di sviluppo. Non potremo entrare nei dettagli d’uso di queste tecnologie, ma è opportuno sapere cosa sono e cosa fanno.
Infine prenderemo in esame il linguaggio di scripting per eccellenza: Javascript, un vero e proprio linguaggio di programmazione.
A causa della sua estrema importanza, Javascript sarà trattato ad un livello intermedio, procedendo per gradi.
Non solo. Dopo aver preso confidenza con Javascript ne vedremo due fondamentali applicazioni: Ajax e JQuery.
Insomma un viaggio lungo ed entusiasmante che ci condurrà a scrivere codice per il browser e ad avere una visione di insieme di tutto quello che è importante sapere sul fronte client!
Organizzazione dell’opera
Il libro è diviso in 9 capitoli, oltre all'introduzione.
Il primo capitolo consente di prendere confidenza con i termini utilizzati nell'ambito
della programmazione web a partire dalle reti di calcolatori.
Il capitolo 2 introduce HTML e CSS spiegando i motivi per cui, per produrre una pagina web professionale, necessitano entrambi.
I capitoli 3, 4 e 5 trattano HTML e CSS nelle versioni attualmente più usate, cioè HTML 5 e CSS 3.
Il capitolo 5 è interamente dedicato alla pratica.
Il capitolo 6 è un rapido viaggio tra le tecnologie nate per produrre siti web
graficamente accattivanti con un ridottissimo uso di HTML: Flash, JavaFX e Silverlight.
I capitoli 7, 8 e 9 si occupano di JavaScript con una breve introduzione a JQUERY (nel capitolo 8).
A chi si rivolge il libro
Questo libro è scritto per i principianti.
Tuttavia, procedendo gradualmente, il libro raggiunge livelli di approfondimento intermedi su argomenti fondamentali come i fogli di stile (CSS) e JavaScript.
Più in generale, il libro è scritto per tutti coloro che vogliono avvicinarsi al mondo della programmazione web lato client usando il browser come applicazione client di riferimento. È scritto altresì per tutti coloro che vogliono avere una visione d’insieme sulla programmazione web, ossia conoscere tutte le maggiori tecnologie utilizzate nella produzione di codice per le applicazioni web.
Leggendo questo libro non diventeremo dei guru della programmazione web lato client, ma conosceremo tutte le strade da seguire per diventarlo.
Non è un libro per esperti del settore.
Prerequisiti
Per leggere e comprendere il libro non è necessaria alcuna conoscenza di HTML né di CSS. Tuttavia, nello studio della terza parte del libro, in cui tratteremo JavaScript, è necessaria una minima conoscenza dei principi della programmazione: sapere cosa è una variabile, cosa è un ciclo, cosa è una funzione sono nozioni importanti per poter studiare e usare JavaScript in modo proficuo.
Strumenti utilizzati
Il codice presente in questo libro è stato scritto su piattaforma Windows usando
un editor di testo chiamato Sublime Text nella versione 3.0 (build 3143) scaricabile da: http://www.sublimetext.com/3.
Si tratta di un software a pagamento, ma viene consentito il download della versione UNREGISTERED che si può utilizzare senza alcuna limitazione se non quella del reminder che ci ricorda di registrarlo. È disponibile per Windows, Linux e MacOS, ed è in grado di darci una grossa mano nella stesura del codice sorgente.
È stato altresì utilizzato un editor online di pubblico utilizzo denominato liveweave (https://liveweave.com/) che ci consente di scrivere codice online, di vederne immediatamente il risultato e di richiamarlo ogni volta che ci interessa farlo.
L’utilizzo di Sublime Text per i nostri scopi è abbastanza semplice.
Dopo averlo avviato, andiamo sul menù principale e scegliamo “File/New File”.
Sublime Text creerà un nuovo file di testo.
Ora dobbiamo comunicare a Sublime il tipo di sintassi che vogliamo usare. Quindi “View/Syntax” e scegliamo, ad esempio, HTML.
A questo punto non ci resta che salvare file in un determinato formato, in modo da comunicare
a Sublime Text come gestire il file che ha appena creato. Quindi selezioniamo
“File/Save with Encoding/UTF-8” e scegliamo la cartella su disco in cui salvare il file.
Poiché, tramite il menù “View”, abbiamo comunicato a Sublime che si tratta di un file HTML, ci verrà proposta l’estensione HTML. Naturalmente cambiando la sintassi dal menù “View” verrà cambiata anche l’estensione proposta al primo salvataggio.
A questo punto gli diamo un nome nella casella “Nome file” e premiamo “Salva”. Premuto il pulsante, Sublime Text saprà che tipo di file stiamo gestendo e ci darà degli aiuti pertinenti.
Quindi, quando creiamo un nuovo file, ricordiamoci di salvarlo subito in modo da avere accesso a tutti gli aiuti che Sublime Text è in grado di fornirci.
Quasi tutti i moderni browser integrano al loro interno risorse per gli sviluppatori,
in modo che sia possibile effettuare correzioni e controlli al codice HTML e CSS
direttamente dal browser. Per accedere a tali risorse basta premere F12 in una qualsiasi finestra del browser.
Noi qui useremo Google Chrome, ma è possibile eseguire gli stessi controlli con tutti
gli altri browser (Edge, Firefox, Safari, ecc.) sempre premendo F12.
Usando Chrome la pressione del tasto F12, in una qualunque pagina web, mostra il DOM Explorer come nello screenshot qui sopra.
In alto a destra abbiamo tutto il codice HTML che compone la pagina web mostrata sulla sinistra. Le righe di codice precedute da una freccetta sono contenitori di altro codice. Cliccando sulla freccia possiamo infatti espandere il codice e vedere il codice in esso contenuto e così via. Inoltre se, nella parte di destra, selezioniamo un pezzo di codice, nella parte centrale compariranno le proprietà CSS associate a tale codice. Non solo. Possiamo anche verificare in tempo reale eventuali modifiche apportate alle proprietà del foglio di stile.
La cosa utile è che tutte le modifiche che apportiamo tramite questa tecnica non modificano il foglio di stile. Ci basterà aggiornare la pagina (F5) per cancellare tutte le modifiche apportate.
Questo strumento è didatticamente molto utile perché mostra in tempo reale quali effetti avrebbero le nostre eventuali modifiche sul layout della pagina. Inoltre ci costringe a riflettere sul perché accade ciò che vediamo.
Oltre a tale strumento di controllo è importante sapere che il browser è in grado di mostrare per intero il codice HTML della pagina visualizzata. Basta cliccare su un punto vuoto della pagina con il tasto destro del mouse e scegliere “HTML” oppure “Visualizza sorgente pagina” (a seconda del Browser).
Infine è importante avere un riscontro ufficiale di quello che scriviamo.
Il nostro codice può essere più o meno valido secondo gli standard W3C. Per sapere se il nostro codice HTML è ben scritto, possiamo (dobbiamo) usare un validatore messo a disposizione dal W3C:
http://validator.w3.org/
Allo stesso modo è opportuno controllare il codice CSS. Anche in questo caso esiste un apposito validatore W3C:
http://jigsaw.w3.org/css-validator/
È buona prassi controllare spesso il parere di questi validatori. Impareremo tante cose dai loro controlli.
Tutto il codice del libro è disponibile online per libero download al seguente indirizzo:
http://www.alessandrostella.it/books/html5css3js/index.html
CHAPTER DETAIL
Breviario dei capitoli che compongono l'ebook

INTRODUZIONE
Il capitolo introduttivo ha come principale obiettivo quello di passare in rassegna tutti gli argomenti che saranno trattati nell'ebook con il fine di darne una iniziale visione di insieme...

RETI E PROGRAMMAZIONE WEB
Scrivere codice per il web ci costringe a conoscere alcuni termini specifici appartenenti al dominio delle reti di calcolatori come, ad esempio, HTTP, FTP, SMTP, ecc. In questo capitolo ne spieghiamo il significato...

IL COSA E IL COME: HTML e CSS
Questo è un capitolo introduttivo allo studio di HTML e CSS che saranno affrontati singolarmente nei due capitoli successivi. Lo scopo è quello di spiegare le ragioni dell'esistenza di questi due strumenti...

HTML5
Questo è il primo capitolo "operativo" del lbro. Si inizia lo studio pratico di HTML alternando definizioni ed esercitazioni...

CSS3
Un capitolo corposo e non potrebbe essere altrimenti. I fogli di stile o CSS sono estremamente importanti durante il disegno di una qualunque pagina web. Una conoscenza superficiale non sarebbe sufficiente...

HTML5 e CSS3 ALL'OPERA
Un capitolo interamente dedicato alla pratica. Dopo aver visto gli elementi che compongono HTML e gli stili che ne determinano l'estetica, è tempo di entrare nella pratica dell'uso reale...

FLASH, SILVERLIGHT, JAVAFX
HTML e CSS non sono gli unici strumenti utilizzabili e utilizzati nella programmazione web lato client. In questo capitolo vengono prese in esame, in modo estremamente superficiale, alcune alternative con le relative potenzialità...

JAVASCRIPT
Un altro capitolo corposo. Anche in questo caso non potrebbe essere altrimenti. Su JavaScript sono stati stati scritti molti libri e molto bisognerà studiare dopo aver imparato tutto quanto esposto in questo capitolo. Tuttavia le basi e anche qualcosa in più vengono poste con oltre 120 pagine di script e sintassi che compongono il capitolo...

JQUERY, MA NON SOLO
Poggiandosi su JavaScript e sulle sue tante potenzialità, negli anni sono nate decine di librerie per agevolare il programmatore nell'utilizzo di tale strumento. JQUERY è una di tali librerie e questo capitolo è ad essa dedicato...

AJAX
Impossibile non spiegare come funzionano le chiamate asincrone e come sia possibile sostituire soltanto un pezzo del codice richiamandolo dal server. AJAX è la tecnologia che ci consente di fare ciò e questo capitolo ne scruta i meccanismi...
I COMMENTI DEI LETTORI
Cosa pensa chi ha letto questo ebook?
"Ottimo ebook per cominciare a esplorare il mondo della programmazione Web. Perfetto come riferimento da consultare. È scritto bene, molto chiaro e ricco di esempi. Buona l'introduzione ad ajax e jquery."
Harlock @ITIS Da Vinci
"Perfetto per lo studio dei linguaggi di programmazione per il web, fornisce anche una retrospettiva su html4 e css2, oltre ai più recenti linguaggi. Pieno di riferimenti al W3C, le fonti ufficiali per quanto riguarda html e css. Linguaggio fluido, utile come manuale oltre che studio degli stessi linguaggi."
Felix @amazon.it
"Ben spiegato, molto utile non dà per scontato nulla. Fantastico! A quando lato server? L'autore sa spiegare molto bene, potrebbe scrivere molti libri!"
Vittorio Pierantozzi @carpeDiemSRL
GLI ALTRI MIEI LIBRI
Elenco dei libri da me scritti e pubblicati
-
User Experience: artefatti per la felicità dell'utente
Questo ebook parla della user experience come se ne parlerebbe in un corso universitario, ossia facendo riferimento agli studi scientifici e ai relativi ricercatori. Si è ritenuto opportuno utilizzare un tale approccio perché la user experience è ancora un oggetto misterioso, qualcosa da confondere volentieri con l’usabilità o con il design. Ma è sufficiente collegare il concetto di UX con le emozioni per avvertirne tutta la profondità e la diversità da altri è più diffusi concetti.
Sulla UX, Desmet & Hekkert direbbero:
"The entire set of affects that is elicited by the interaction between a user and a product including the degree to which all our senses are gratified (aesthetic experience) the meanings we attach to the product (experience of meaning) and the feelings and emotions that are elicited (emotional experience).".
Utente, prodotto, interazioni ed emozioni.
Sono queste le parole chiave che potrebbero rappresentare i contenuti di questo ebook. -
Creare, pubblicare e vendere un e-book: Una guida alla pubblicazione del proprio ebook su Amazon e su tutti i maggiori Store mondiali; tasse e pratiche burocratiche incluse
Come si produce un e-book?
Come lo si pubblica senza un editore?
Come si può vendere un libro guadagnandoci dei soldi senza avere una Partita Iva e senza violare la legge?
Sono domande importanti a cui bisogna dare risposte chiare e precise.
Questo prezioso e-book si propone di fare esattamente questo: dare risposte.
Innanzitutto, con una serie di video guide appositamente realizzate e fruibili in streaming sul canale Youtube dello scrittore, viene mostrato come creare correttamente un e-book o trasformare un libro già esistente in un e-book.
Poi, con esempi concreti e documenti precompilati, viene mostrato come compilare tutti i modelli cartacei ed elettronici necessari a sbrigare le pratiche burocratiche utili allo scopo.
Infine si impara a conoscere le varie ipotesi di distribuzione e a gestire gli introiti sia "lato America" sia "lato Italia" al fine di mettersi in regola con il fisco.
Insomma questo e-book affronta tutti gli ostacoli che uno scrittore "indie" incontra durante il percorso di avvicinamento alla produzione e alla vendita del primo e-book. Il tutto esposto con un linguaggio diretto, orientato al "come fare", senza inutili fronzoli. -
Programmazione orientata agli oggetti
La programmazione ad oggetti è composta da un insieme di concetti.
Tali concetti devono essere ben chiari prima di iniziare a programmare con un qualsivoglia linguaggio di programmazione object oriented.
Tutti noi abbiamo ben chiaro in testa il concetto di casa: muri, porte, finestre, eccetera. Se siamo un architetto la sappiamo progettare e se siamo un muratore la sappiamo costruire. Ma se architetti e muratori non avessero il concetto di casa, cosa potrebbero mai fare? Per poter progettare e costruire una casa serve innanzitutto avere in testa il concetto di casa.
Lo stesso identico discorso vale con la programmazione ad oggetti: se non abbiamo in testa i concetti su cui si basa la programmazione ad oggetti non riusciremo mai a progettare né a implementare un software che stia in piedi.
Questo ebook parla quindi dei concetti su cui si basano i progettisti software per progettare un'applicazione; gli stessi concetti che poi vengono usati dai programmatori per tradurre in codice il progetto. Qui si narra la storia di un pensiero utile e saggio, un modo per usare la propria mente al fine di scrivere un programma usando leggi universali, evitando di scrivere codice che andrà a far parte della sterminata e infetta razza dei "basta che funzioni"!