Progettato in HTML5, questa guida parla di tutto: a partire dal significato di “Internet”, fino a tutto il mondo dell’open source e dei browser moderni.

Articoli correlati:

1. Cheat Sheets per il Web Design
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. CSS3: compatibilità cross-browser…da oggi!

AI⇒Canvas è un plug-in che offre infatti le opzioni per il disegno, l’animazione e la codifica, come "eventi" JavaScript in modo da poter costruire applicazioni web interattive ben progettate basate sul tag canvas.
Lo scopo di Ai⇒Canvas è di accelerare lo sviluppo del tag HTML5 canvas: esso infatti, partendo da un file vettoriale, genera ed esporta codice HTML e JavaScript che può essere subito copiato nella propria applicazione ed eventualmente ampliato in un secondo momento.

Cominciamo a usare HTML5 Canvas

Per installare Ai⇒Canvas, scaricare la versione adatta al prorio sistema operativo (per Windows o OS X), ed estrarre il file Ai2Canvas.aip nella cartella plug-in di Adobe Illustrator. Assicurarsi di riavviare Illustrator se è già in esecuzione. Una volta fatto questo, possiamo scaricare un file illustrator di esempio, e salvare ciascun elemento vettoriale in un livello separato.

Canvas in inglese vuol dire tela, per incomincare fin da subito a "dipingere" e per testare fin da subito le potenzialità del plugin, è sufficiente cambiare il nome di ciascun livello del file .AI come se fosse una funzione JavaScript, per esempio: "nomeElemento();". Possiamo vedere fin da subito il risultato scegliendo File / Esporta, selezionare " <canvas> " come tipo di file, quindi fare clic su Salva per visualizzare il risultato nel browser.

Animazioni e Canvas: ecco un semplice esempio

Ogni livello di disegno all’interno del file .AI può essere ruotato, ridimensionato, e sbiadito, configurando le impostazioni di animazione. Le impostazioni di animazione controllano come le proprietà cambiano nel tempo, e ogni impostazione è dotata di otto possibili settaggi (si veda la documentazione estesa per ulteriori dettagli). Le impostazioni includono la direzione dell’animazione, la sua durata complessiva, invertire o no la direzione, una funzione di interpolazione, e un ritardo iniziale prima che l’animazione abbia inizio.

Quando l’animazione riguarda una forma, è spesso utile riposizionare il punto di origine (il luogo in cui gli assi X e Y si intersecano a 0, 0). Ai⇒Canvas rende facile spostare l’origine di ogni livello in modo che le animazioni siano esportate correttamente.

Per esempio, rinominiamo il livello nomeElemento(); in nomeElemento(origine: -1.5, 0.5);. I due valori indicano uno spostamento rispettivamente sull’asse orizzontale e su quella verticale: in particolare essi posizionano il punto di origine a una volta e mezzo l’intera larghezza dell’oggetto vettoriale verso sinistra (al di fuori dei confini dell’oggetto, verso sinistra), in verticale a metà della sua altezza.
Per aggiungere una seconda proprietà, inserire un punto e virgola prima della nuova proprietà e il suo valore. Cambiare il nome del livello in nomeElemento(origin: -1.5, 0.5; rotate-direction:cw);, questa prprietà imposta una rotazione all’animazione, che imprime all’oggetto un movimento in senso orario ("CW significa ClockWise, senso orario; per imposare in senso antiorario scrivere AW, AnticlockWise ").

Come utilizzare il tag Canvas su Internet Explorer 6+?

Ecco come essere sicuri che il tag canvas, ad oggi non supportato da IE precedenti alla versione 9, sia interpretato da tutte le versioni, dalla 6 alla 8.
Ecco come procedere: per prima cosa, scarichiamo la versione compatta di explorercanvas e colleghiamola al file contenente il canvas, inserendo la chiamata alla libreria all’interno dei commenti condizionali per InternetExplorer, così:

<!--[if IE]><script type="text/javascript" src="cartellaScript/excanvas.compiled.js"></script><![endif]--> 

Purtroppo però, ExCanvas non permette a IE di vedere le animazioni costruite con canvas.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tavola degli elementi interattiva!

Articoli correlati:

1. Cosa è HTML5? Ecco una infografica che lo spiega!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tag nuovi e anteprima delle novità

Il grafico tratteggia le principali novità e tutte le caratteristiche del nuovo standard, mettendo anche a confronto i maggiori browser per verificare quali tra essi sia già pronti per affrontare la rivoluzione.

Articoli correlati:

1. Internet e il web: cosa è? Come funziona?
2. HTML5: tag nuovi e anteprima delle novità
3. HTML5: tavola degli elementi interattiva!

La compatibilità con i browser sembra non essere più un grosso problema, da quando hanno iniziato a circolare risorse come Modernizr, ExplorerCanvas o IE7.js, per "modernizzare" i browser non compatibili con le nuove tecnologie, oppure per attivare i tag HTML5 su tutti i browser.

Dopo aver dato una occhiata alle maggiori novità di HTML5, e dopo aver dato uno sguardo alle tecniche per utilizzare già oggi i CSS3, ecco più di 10 template HTML5-CSS3 tutti da testare, con cui iniziare a progettare per il web di domani. Se li hai gà testati, dimmi cosa ne pensi nei commenti in fondo al post!

HTML5 Starter Pack

HTML5 Starter Kit è un template che non costringe a costruire un particolare tipo di sito web, ma si adatta a seconda delle esigenze.
Ecco le sue caratteristiche: gratuito, HTML5 cross-browser (compreso IE6), possibilità di utilizzare immediatamente Cufón @font-face, disponibilità di alcune classi strutturali riutilizzabili.
Infine, viene offerto il file .PSD per aggiornare il layout.

Gotta’ love HTML5 & CSS3

Template per le gallerie di immagini, sviluppato con HTML5-CSS3, che comprende:
transizioni animate (come l'hover animato per la descrizione delle immagini) e un’interfaccia a schede per diverse gallerie con CSS3 (che usa solo il selettore :target).

A Free HTML5 and CSS3 Theme

Il template permette di creare sotto-pagine funzionanti, tra cui un modulo di contatto con validazione lato server, e codice PHP per l’invio della posta elettronica.
Utilizza la griglia 960.gs, e ha un font personalizzato chiamato Chunkfive che fa uso di @font-face.

Coding A HTML 5 Layout From Scratch

Tutorial da Smashing Magazine: il template proposto è una vetrina per la maggior parte dei nuovi elementi di intestazione, piè di pagina, sezione, ecc.
Nelle strutture CSS3, c’è il popolare text-shadow e altri selettori come last-child o selection.

52framework

52framework è uno strumento completo per iniziare a progettare con HTML5 e CSS3 con l’uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc…
Include un sistema di layout a griglia e un CSS-reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial molto dettagliato sulla creazione di una applicazione web per iPhone che utilizza HTML5 e CSS3.

Creare un sito elegante con HTML 5 e CSS3

Questo tutorial pemette di creare pagine web con HTML5 e CSS3, e di condividere il risultato sotto forma di download gratuito.
Molti nuovi elementi HTML5 vengono qui utilizzati e viene integrato Modernizr per la compatibilità di IE.

Free HTML5 Template

Template per layout HTML a 2 o 3 colonne, compreso il file .PSD per gli elementi di layout.

HTML5 & CSS3 Vertical One-Page Template

Un template per siti one-page a svluppo verticale, che utilizza jQuery per lo scorrimento del contenuto in verticale per la visualizzazione dei link.

OWMX 1 HTML5-CSS3 Template

Template per blog a 2 colonne che utilizza molte delle nuove caratteristiche CSS3 e dei tag HTML5.
Utilizza il microformato: hCalendar microformat.

FlipThru HTML5 and CSS3 Template

Il template è piuttosto semplice ma utilizza le maggiori funzionalità di HTML5-CSS3.
Tuttavia, è da notare la disponibilità di un accordion che fa solo uso di CSS3.

HTML5-CSS3 Starting Template

Questo template offre una struttura completa per siti web HTML5 costruiti con PHP.
Comprende inoltre gli stili CSS per il layout, per la tipografia, per la stampa e il CSS reset.
Sono già disponibili nel modello le funzioni include PHP per header, footer, ecc

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. CSS3: compatibilità cross-browser…da oggi!
3. CSS3: effetto foto piegata!

Novità in HTML5

HTML5 introduce nuove caratteristiche per uno sviluppo più facile delle applicazioni web improntate alla multimedialità e una gestione più sofisticata dei form, assieme a una presentazione più semantica del codice: nuovi elementi tag, nuovi input type, nuovi attributi ed eventi, nuove API.
Ecco di seguito una lista di tutte le principali novità e le anteprime:

1. Nuovi elementi HTML5

Elementi strutturali più semantici

• article contrassegna gli articoli di una sezione
• aside delimita informazioni aggiuntive
• footer rappresenta la sezione conclusiva della pagina
• header contiene i contenuti principali eventualmente raggruppati con hgroup
• nav raggruppa gli elementi di navigazione principale
• section distingue le sezioni di un documento, come se fossero capitoli di un libro

e torna nell’HTML, dopo essere stato deprecato dalla versione 4.01, il tag

• menu usato per una specifica lista di comandi

Interattività

• canvas permette il rendering dinamico delle bitmap
• command definisce un command button
• details rappresenta informazioni aggiuntive

Maggiore semantica in pagina e lingue asiatiche

• figure raggruppa elementi multimediali e le loro didascalie
• mark mette in risalto una porzione di testo rilevante
• rp, rt e ruby sono usati per le parentesi e per le annotazioni di Ruby

Multimedialità nativa

• audio consente la riproduzione audio nativa nel browser
• embed inserisce una applicazione esterna
• source specifica più sorgenti di un video o di un audio
• video definisce un video

Form migliorati

• datalist fornisce una sorta di auto-complete
• keygen definisce una coppia di keygen generate
• output rappresenta il risultato di un calcolo

Tempo e unità di misura

• meter definisce le unità di misura
• progress indica lo stato di avanzamento di un compito
• time specifica il formato di una data

Alcuni tag già definiti nella versione 4.01, in HTML5 assumono nuove proprietà. Ecco i principali nel dettaglio:

• il tag a potrà contenere elementi a livello di blocco, è potrà essere privo dell’attributo href, per essere usato come "link placeholder"
• l’elemento address potrà essere applicato a una specifica sezione section o articolo article
• l’elemento b verrà utilizzato solo per rendere il testo più marcato, senza particolari valenze keyword-SEO
• blockquote diventa un elemento sectioning root
• l’elemento dl rappresenta un elenco di associazioni composto da zero o più coppie nome-valore
• i tag h1, h2… possono essere ripetuti all’interno di ogni sezione della pagina
• l’elemento html potrà avere un proprio id
• il tag i verrà usato per indicare il testo da pronunciare con un particolare tono di voce, o testo che appartiene a un linguaggio tecnico, o una frase che nel contesto da cui è presa viene rappresentata con testo "italic"

2. Nuovi input type

Ecco la lista dei campi input si potranno utilizzare con HTML5:

• color
• date
• datetime
• datetime-local
• email
• number
• range
• search
• tel
• time
• url
• week

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. Cosa è HTML5? Ecco una infografica che lo spiega!