Corso HTML 5 Arezzo

Il corso di HTML5 è un’importante soluzione per imparare a sviluppare o modificare, attraverso l’utilizzo di un tradizionale editor di testo, pagine web.

Se sei un grafico pubblicitario ed hai la necessità di operare in autonomia nella modifica o creazione di semplice pagine web (grazie all’HTML5 potrai creare anche layout responsive), se sei un utilizzatore di CMS, per lo sviluppo dei siti internet, e vuoi approfondire le tue conoscenze del linguaggio HTML5 così da poter intervenire anche nella modifica strutturarle di un sito o semplicemente vuoi iniziare a muovere i tuoi primi passi nel mondo del web e nello specifico nella creazione di siti, il Corso HTML 5 Arezzo è una valida opportunità.

Al termine di un percorso formativo, pratico ed interattivo, avrai acquisito le nozioni necessarie per sfruttare appieno le potenzialità di un linguaggio di editing grazie al quale potrai, finalmente, sviluppare in autonomia e da vero professionisti, layout per i tuoi siti internet. Affronterai, in maniera approfondita, tutti i temi legati allo sviluppo di sito attraverso il linguaggio HTML: dai tag di base grazie al quale disegnerai la tua struttura, ai web form per inserire form di contatti all’interno del tuo sito, dalla gestione delle immagini e dei Canvas alla geolocalizzazione.

Continue esercitazioni pratiche e case history renderanno il corso di HTML5 unico e memorabile.

L’HTML, ovvero l’HyperText Markup Language, è il linguaggio solitamente usato per i documenti ipertestuali disponibili nel World Wide Web. In tali documenti, un tratto di testo può essere contrassegnato inserendo delle etichette, tag, che ne descrivono la funzione, il colore, il link, o altre caratteristiche .Il contenuto servito dai siti web in seguito a una richiesta dell’utente solitamente consiste di un documento in linguaggio HTML: un web browser scarica da uno o più web server il contenuto HTML ed eventuali documenti collegati e li elabora, ossia ne interpreta il codice, al fine di generare la visualizzazione della pagina desiderata sullo schermo del computer.

L’HTML5 non è propriamente un linguaggio di programmazione, in quanto non prevede alcuna definizione di variabili, strutture dati, funzioni, strutture di controllo, ma piuttosto è solamente un linguaggio di markup che descrive le modalità di impaginazione, formattazione o visualizzazione grafica o layout del contenuto, testuale e non, di una pagina web attraverso tag di formattazione.

La vita di un programmatore è fatta di scelte che derivano anche da gusti personali. Ogni professionista deve prendere delle decisioni che inficiano tutta la sua carriera futura (come qualunque altra professione) e che tendenzialmente sono dettate dalle proprie inclinazioni. Tale discorso, in questa sede, è riferito a coloro i quali non hanno mai usato o comunque non adoperano il codice HTML. Immagino che tu abbia probabilmente le tue ragioni, alcune delle quali evidenti: non è ancora completamente adottato, non funziona in IE, non ti piacciono gli utenti, sei fuori contatto o sei solo appassionatamente innamorato della scrittura di codice XHTML rigoroso. Condivisibile? Più o meno perché il linguaggio HTML5 è la rivoluzione di cui il web ha bisogno e il fatto è che, è il futuro, che ti piaccia o meno, sarà figlio dei comandi HTML5. Il codice HTML5 non è difficile da usare o capire e, anche se non è ancora completamente adottato, è questo il momento giusto per iniziare a prendere confidenza con le sue funzioni e con i suo modo di “pensare” poiché, più in là, potrebbe essere troppo tardi. Il mondo della programmazione corre veloce e ci si deve adattare ai suoi tempi, ai suoi cambiamenti e ai cambiamenti che internet richiede quasi a scadenza settimanale.

Ci sono molti articoli che pubblicizzano l’uso di HTML5 e ne elogiano i benefici, sì, e non è assolutamente un caso che la rete e le riviste di settore cartacee stiano spingendo affinché il mondo del professionismo in ambito di programmazione ne adotti sempre di più il linguaggio. Con tutti questi articoli, con Apple che lo spinge, con Adobe che costruisce nuovi prodotti di sviluppo attorno ad esso, e con così tanti siti Web dedicati, moltissimi programmatori non hanno alcun interesse ad utilizzarlo, a conoscerne le funzioni, le caratteristiche, le peculiarità e soprattutto le infinite potenzialità del linguaggio HTML5. E’ probabile che il problema principale risieda nell’alone di mistero intorno al codice HTML5. Per molti sembra più il jet pack o la macchina volante – un’idea fantastica che è divertente da pensare ma non ancora pratica nel suo utilizzo. Niente di più sbagliato: i comandi HTML5 sono rapidi, veloci e semplici. Non è l’ultima concept car della Mercedes a essere trainata da una forma di auto show a uno show automobilistico, è una realtà e non sta andando da nessuna parte.

Al fine di demistificare ulteriormente il codice HTML5 e aiutare questi intrighi trascinando progettisti e sviluppatori a saltare sul carrozzone, abbiamo deciso di mettere insieme una top ten dei motivi per cui tutti i programmatori dovrebbero utilizzare il linguaggio HTML5 in questo momento. Non si tratta di una vera e propria classifica in base alle qualità (non c’è una migliore o peggiore caratteristica) ma, semplicemente, sono illustrati i motivi principali per cui il codice HTML5 rappresenti un must per chi vorrà programmare senza problemi anche in futuro e vorrà farsene una guida HTML5 pratica. Partiamo dunque.

» Accessibilità HTML

Il linguaggio HTML5 semplifica la creazione di siti accessibili per due motivi principali: semantica e ARIA. Le nuove intestazioni HTML (alcune attualmente disponibili) come <header>, <footer>, <nav>, <section>, <aside>, ecc. consentono agli screen reader di accedere più facilmente ai contenuti rispetto al passato e a linguaggi concorrenti. Prima, i tuoi screen reader non avevano modo di determinare che cosa fosse un dato <div> anche se gli hai assegnato un ID o una Classe. Con i nuovi tag semantici, i lettori possono esaminare meglio il documento HTML e creare un’esperienza migliore per coloro che li utilizzano.

ARIA è una specifica W3C che viene principalmente utilizzata per assegnare specifici "ruoli" a elementi in un documento HTML, essenzialmente creando punti di riferimento importanti nella pagina: intestazione, piè di pagina, navigazione o articolo, tramite attributi di ruolo. Nelle versioni precedenti di HTML queste funzionalità erano state ampiamente tralasciate perché poco funzionali (poco funzionanti) e tale sorta di bug era avvertito in maniera molto negativa. Tuttavia, il codice HTML5 convaliderà questi attributi, anzi lo ha già fatto in modo tale da rendere la programmazione (e la lettura dell’utente finale) molto più fluida e semplice. Inoltre, il linguaggio HTML5 avrà ruoli integrati che non possono essere superati rendendo i ruoli di assegnazione un gioco da ragazzi. Si potrebbe approfondire di molto il discorso ma per ora sappi che si tratta di un cambiamento fondamentale di cui potrai avvertire facilmente i benefici durante il Corso HTML 5 Arezzo.

» Supporto video e audio con HTML5

Dimentica Flash Player e altri lettori multimediali di terze parti, rendi i tuoi video e audio veramente accessibili con i nuovi tag <video> e <audio> in codice HTML5. Fare in modo che i tuoi file multimediali vengano riprodotti correttamente è sempre stato un incubo, devi usare i tag <embed> e <object> e assegnare un enorme elenco di parametri solo per rendere la cosa visibile e funzionare correttamente. I tuoi tag media possono essere resi soltanto attraverso questi brutti, enormi blocchi di segmenti di codice confusi. I tag video e audio di HTML5 li trattano fondamentalmente come immagini; <video src = "url" />. Ma che dire di tutti quei parametri come altezza, larghezza e autoplay? Nessun problema, basta definire quegli attributi nel tag come qualsiasi altro elemento HTML: <video src = "url" width = "640px" height = "380px" autoplay />.

In realtà è veramente semplice ma, poiché i vecchi browser “malvagi” là fuori non amano il nostro amico HTML5, dovrai aggiungere un po’ di codice in più per farli funzionare correttamente ma questo codice non sarà mai ingarbugliato e complesso come i succitati <embed> e <object> che rappresentano un vero e proprio incubo. Basterà lavorarci con un po’ di attenzione e studiarne le caratteristiche durante il Corso HTML 5 Arezzo per venirne a capo facilmente e senza particolari problemi.

» Doctype e HTML5

<! DOCTYPE html> Proprio così, questo è il doctype, niente di più, niente di meno. Abbastanza semplice, vero? Non è più necessario tagliare e incollare una lunga riga di codice non leggibile e non più etichette di testa sporche piene di attributi doctype. Puoi semplicemente e facilmente scrivere e essere felice. La cosa davvero grandiosa, al di là della semplicità, è che funziona in tutti i browser che tornano indietro nel “temuto” IE6. Non c’è bisogno di molte altre spiegazioni al riguardo. Sappiate soltanto che questa funzione snellirà il lavoro di programmazione in modo drastico. Un vera rivoluzione.

» Codice Cleaner e HTML5

Se sei appassionato di codice semplice, elegante e di facile lettura, il codice HTML5 è il linguaggio che per te. Questo è un concetto che si sta portando avanti dall’inizio di questo nostro viaggio ed è bene ribadirlo di tanto in tanto. Il linguaggio HTML5 ti consente di scrivere un codice chiaro e descrittivo, un codice semantico che ti consente di separare facilmente il significato dallo stile e dal contenuto. Un codice pulito e semplice, senza fronzoli né estreme complicazioni. Un’altra buona notizia? Con il codice HTML5 potrai ripulirlo ancora di più e allo stesso tempo dare più significato al tuo markup rendendo il tuo lavoro più personale e inserendo quella che può essere considerata una firma dell’autore.

Con HTML5 puoi finalmente curare la tua "divitis" e "classite" usando intestazioni semantiche e HTML per descrivere il tuo contenuto. In precedenza si utilizzava generalmente div per ogni blocco di contenuto piuttosto che rilasciare un id o una classe su di esso per descrivere il suo contenuto ma con i nuovi <section>, <article>, <header>, <footer>, <aside> e <nav > tag, HTML5 ti consente di codificare il tuo strumento di pulizia dei markup e di mantenere il tuo CSS più organizzato e più felice.

» Storage più intelligente

Una delle cose più interessanti del linguaggio HTML5 è la nuova funzionalità di archiviazione locale. È un po’ un incrocio tra vecchi cookie regolari e un database lato client. È migliore dei cookie perché consente di archiviare su più finestre, ha una sicurezza e prestazioni migliori e i dati continueranno anche dopo la chiusura del browser. Poiché si tratta essenzialmente di una banca dati lato client, non devi preoccuparti che l’utente cancelli i cookie ed è stato adottato da tutti i browser più diffusi.

Lo storage locale è ottimo per molte cose, ma è uno degli strumenti del codice HTML5 che rendono possibili le app web senza plug-in di terze parti. Essere in grado di memorizzare i dati nel browser dell’utente consente di creare facilmente le funzioni di app come: la memorizzazione delle informazioni utente, la possibilità di memorizzare dati e la possibilità di caricare lo stato dell’applicazione precedente dell’utente.

» Interazioni migliori

Sorpresi, tutti vogliamo interazioni migliori, tutti vogliamo un sito web più dinamico che risponda all’utente e che permetta all’utente di godere/interagire con i tuoi contenuti invece di guardarli. Inserisci <canvas>, il tag HTML5 di disegno che ti consente di fare la maggior parte (se non di più) delle possibilità interattive e animate rispetto alle precedenti e ricche piattaforme di applicazioni Internet come Flash.

» Sviluppo del gioco

Sì, è corretto, puoi sviluppare giochi usando il tag <canvas> di HTML5. Il linguaggio HTML5 offre un ottimo modo mobile per sviluppare giochi interattivi e divertenti. Se hai già creato giochi Flash, adorerai creare giochi con il linguaggio HTML5.

» Supporto legacy/cross browser e HTML5

I tuoi browser moderni e popolari supportano tutti HTML5 (Chrome, Firefox, Safari IE9 e Opera) e il doctype HTML5 è stato creato in modo che tutti i browser, anche i più vecchi e noiosi, possano essere utilizzati da IE6. Ma solo perché i vecchi browser riconoscono il doctype che non significa che possano usare tutti i nuovi tag e gli extra HTML5. Fortunatamente, HTML5 è stato costruito per rendere le cose più facili e più cross-friendly, quindi in quei vecchi browser IE che non amano i nuovi tag possiamo semplicemente aggiungere un Javascript che permetterà loro di usare i nuovi elementi.

» Mobile, mobile e mobile

Chiamalo un “sospetto”, ma pensiamo che la tecnologia mobile stia diventando più popolare in questi giorni, non è vero? Lo so, fino a qualche tempo fa sarebbe stata un’ipotesi piuttosto folle e probabilmente qualcuno di voi in passato avrà pensato: il cellulare è solo una moda…già… I dispositivi mobili, ormai, hanno conquistato il mondo. L’adozione di dispositivi mobili continua a crescere molto rapidamente e questo significa che sempre più utenti useranno i loro browser mobili per visualizzare il tuo sito web o la tua applicazione. HTML5 è lo strumento più mobile per lo sviluppo di app e siti mobili. Con Adobe che annuncia la morte di Mobile Flash, ora potrai contare su HTML5 per lo sviluppo di applicazioni web mobili.

I browser mobili hanno completamente adottato HTML5, quindi la creazione di progetti pronti per il mobile è facile come progettare e costruire per i loro display touch screen più piccoli – da qui la popolarità di Responsive Design. Esistono alcuni ottimi meta tag che consentono anche di ottimizzare per i dispositivi mobili:

• Viewport: consente di definire le larghezze della vista e le impostazioni di zoom
• Navigazione a schermo intero: valori specifici IOS che consentono ai dispositivi Apple di essere visualizzati in modalità a schermo intero
• Cone della schermata iniziale: come le favicon sul desktop, queste icone sono utilizzate per aggiungere i preferiti alla schermata iniziale di un dispositivo mobile IOS e Android

Il motivo numero uno per cui dovresti iniziare a utilizzare HTML5 oggi è questo: è il futuro, inizia a usarlo ora per non rimanere indietro. HTML5 non sta andando da nessuna parte e man mano che sempre più elementi vengono adottati, sempre più aziende inizieranno a svilupparsi in HTML5. HTML5 è essenzialmente solo HTML, non è spaventoso, non è qualcosa che devi veramente capire o imparare di nuovo – se stai sviluppando XHTML strict adesso stai già sviluppando in HTML5 quindi perché non sfruttare appieno le sue capacità attuali?

Adesso non hai più nessuna scusa per non adottare HTML5 e iniziare la tua nuova carriera di programmatore. Se non volessi prendere in considerazione la maggior parte delle cose dette, dovrebbe convincerti soltanto il fatto che il linguaggio HTML5 rappresenta un modo per scrivere codice più pulito, tutti gli altri vantaggi e funzioni sono assai divertenti e innovative ma sono di contorno. Puoi iniziare a usarlo in questo momento e non dovrai cambiare il modo di progettare. Quindi, inizia a usarlo subito, sia che tu stia semplicemente semplificando e rendendo il tuo markup più semantico oppure costruirai un nuovo gioco mobile assurdo che conquisterà il mondo, chissà…

«Non ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all’utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l’idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell’HTML si rivelò una manna inaspettata. Con mia grande sorpresa molte persone si familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML». (Tim Berners-Lee)

• » HTML5: Funzionalità supportate
• » Librerie Javascript
• » Gli Elementi (Header, Footer, Nav, Section, …)
• » Gli Elementi (Figure, figcaption, hgroup, time, …)
• » Web Form (Search, e-mail, url, …)
• » Gli attributi per i Form
• » Nuove possibilita` per la validazione delle form
• » Gestione dei Video & Audio
• » Canvas
• » Gradienti Lineari e Radianti
• » Le Immagini
• » Testo
• » Geolocalizzazione
• » Web Storage
• » Drag & Drop
• » Pubblicazione FTP

Il linguaggio HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita dal World Wide Web Consortium (W3C), e che è basato su un altro linguaggio avente scopi più generici, l’SGML. È stato sviluppato alla fine degli anni ottanta da Tim Berners-Lee al CERN di Ginevra assieme al noto protocollo HTTP che supporta invece il trasferimento di documenti in tale formato. Verso il 1994 ha avuto una forte diffusione in seguito ai primi utilizzi commerciali del web. Nel corso degli anni, seguendo lo sviluppo di Internet, l’HTML ha subito molte revisioni, ampliamenti e miglioramenti, che sono stati indicati secondo la classica numerazione usata per descrivere le versioni dei software. Attualmente l’ultima versione disponibile è la versione 5.

Dopo un periodo di sospensione, in cui il W3C si è focalizzato soprattutto sulle definizioni di XHTML (applicazione a HTML di regole e sintassi in stile XML) e dei fogli di stile (CSS), nel 2007 è ricominciata l’attività di specifica con la definizione, ancora in corso, di HTML5, attualmente allo stato di bozza (draft). Un’ulteriore ed importante caratteristica del linguaggio HTML è che esso è stato concepito per definire il contenuto logico e non l’aspetto finale del documento. I dispositivi che possono accedere ad un documento HTML sono molteplici e non sempre dotati di potenti capacità grafiche. Proprio per questo gli sviluppatori di HTML hanno optato per un linguaggio che descrivesse dal punto di vista logico, piuttosto che grafico il contenuto dei documenti. Questo significa che non esiste alcuna garanzia che uno stesso documento venga visualizzato in egual modo su due dispositivi. Se da una parte questo ha imposto in passato dei forti limiti agli sviluppatori di pagine Web, ha dall’altro garantito la massima diffusione di Internet ed evitato che essa diventasse un medium di élite. Attualmente i documenti in codice HTML sono in grado di incorporare molte tecnologie, che offrono la possibilità di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica, interazioni dinamiche con l’utente, animazioni interattive e contenuti multimediali. Si tratta di linguaggi come CSS, JavaScript o Java, o di altre applicazioni multimediali di animazione vettoriale o di streaming audio o video.

Al giorno d’oggi molti web designer delegano la scrittura del codice HTML ad applicazioni specifiche, come per esempio i cosiddetti editor WYSIWYG che permettono al designer di occuparsi dell’aspetto grafico finale della pagina mentre il codice vero e proprio viene generato automaticamente.

Gli sviluppatori puri preferiscono invece utilizzare direttamente il codice HTML, in modo da avere un maggior controllo sul risultato finale e sulla pulizia del codice scritto, cosa che gli editor WYSIWYG odierni nonostante siano sempre più avanzati non possono sempre garantire.