HTML5 e CSS3

Posted by in News, Web Design | 4 comments

I recenti sviluppi nel mondo del codice sono ghiotti per qualsiasi web designer, dato che tendono a semplificare di gran lunga la struttura e la personalizzazione grafica. Ma… ovviamente c’è un ma. Nonostante siano in fase di sviluppo già da diverso tempo, HTML5 e CSS3 sono ben lontani da poter essere utilizzati come standard.

In ogni caso vediamo alcune delle novità introdotte:

HTML5: NUOVI TAG PER LA STRUTTURA

Questa è la classica struttura usata fino ad ora per la costruzione di un layout a 2 colonne. L’espediente è quello di organizzare lo spazio tramite <div> e assegnare ad ognuno di essi uno stile tramite ID e class del CSS:

Con l‘HTML5, parte di questo lavoro sarà automatizzato.
Sono stati introdotti, infatti, dei tag specifici che identificano le varie sezioni della pagina:

Il codice di base sarebbe quindi qualcosa del genere:

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

In questo modo si identifica lo scopo delle varie sezioni, permettendo al browser di riconoscere la loro funzione e trattarle di conseguenza. Oltre alla semplificazione e pulizia del codice, questo tipo di struttura rappresenta un netto miglioramento nella navigazione tramite tecnologie assistive, come nel caso degli ipovedenti (ad esempio è possibile saltare a piè pari la sezione di navigazione o passare da un articolo all’altro in modo più semplice).

VIDEO E AUDIO

Fino ad oggi il modo più comune per visualizzare video o ascoltare audio su siti web è stato quello di afflidarsi a dei plug-in. Il più comune è Flash Player (come YouTube ad esempio), a seguire QuickTime, Windows Media Player.

Con l’HTML5 l’intenzione è quella di inserire in modo nativo la gestione di audio e video.
Ecco un esempio di codice:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Il nuovo tag  video consente al browser di fornire l’interfaccia base. L’attributo controls indica se vogliamo o no offrire i controlli per il playback. L’attributo poster, che non è obbigatorio, ci permette di indicare un’immagine che sarà visualizzata al posto del video prima che venga caricato.

Allo stesso modo, possiamo incorporare un audio:

<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>

In questo caso si usa il tag audio. Alcuni elementi sono in comune con video, come nel caso dell’attributo controls. Ci sono alcuni attributi che è possibile utilizzare per controllare gli script del playback: i metodi più semplici da usare sono play(), pause() e currentTime per riavvogere tutto dall’inizio.

<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;">
<< Rewind</button>

Per approfondire meglio questo punto vi rimando all’articolo di HTML.it.
Se siete proporio masochisti potete leggervi il working draft di www.whatwg.org (in inglese, ovviamente!)

CSS3: EFFETTO OMBRA


Niente più immagini per avere un testo ombreggiato! Con il CSS3 viene introdotta una proprietà che ci permette di applicarla automaticamente:

h1{text-shadow: #999 3px 4px 5px}

La proprietà text-shadow accetta 4 valori:

  • il colore dell’ombra
  • la sua traslazione orizzontale: un valore positivo la traslerà verso sinistra, mentre uno negativo verso destra
  • la sua traslazione verticale: un valore positivo la traslerà verso il basso, mentre uno negativo verso l’alto
  • Il raggio di sfuocatura dell’ombra: al valore zero corrisponde un ombra netta, non sfumata

E’ possibile applicare l’effetto anche su box, attraverso la proprietà box-shadow:

box-shadow: 5px 5px 10px #000;

ATTENZIONE: al momento è necessario definire la proprietà con un piccolo prefisso a seconda del browser:

  • -moz-box-shadow per Firefox
  • -webkit-box-shadow per Safari e Chrome

..e Internet Explorer? Vi chiederete voi. Niente, nisba. Vi rimando all’ultimo paragrafo dell’articolo riguardo alla compatibilità.

I parametri indicati sono nell’ordine:

  • la distanza dell’ombra in orizzontale ed in verticale
  • il raggio
  • il colore

GLI ANGOLI ARROTONDATI

Un altro elemento non nuovo per i designer, fonte di illimitate rotture di scatole, è il box con gli angoli arrotondati.

La proprietà si chiama border-radius e anche in questo caso per il momento non è completamente compatibile ed è necessario aggiungere i prefissi -webkit e -moz per Safari e Firefox.


div#box1{-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px}
div#box2{-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px}

E’ possibile anche dare una rotondità diversa ai quattro angoli, utilizzando -topleft per l’angolo in alto a sinistra, -topright per l’angolo in alto a destra, -bottomleft per l’angolo in basso a sinistra e infine -bottomright per l’angolo in basso a destra.

SFONDI MULTIPLI

Un’altra proprietà utilissima, che però al momento è supportata solo da Safari, è la possibilità di applicare più sfondi ad uno stesso elemento, come l’esempio qui sotto:

Tutti gli elementi di questa immagine, l’uccello, la lumaca, il fiore, il cielo, etc. sono stati inseriti come sfondo sullo stesso box, in questo modo:

#sfondi_multipli{
width:400px;
height:150px;
border:2px solid #CCC;
background:
url(ucello.jpg) no-repeat 30px top,
url(lumaca.jpg) no-repeat right 105px,
url(logo.jpg) no-repeat 60px 55px,
url(fiore.jpg) no-repeat 5px 55px,
url(erba.jpg) repeat-x bottom,
url(cielo.jpg) repeat-x top;
}

Purtroppo, come ho già detto, questa proprietà è praticamente incompatibile con la maggior parte dei browser, quindi per ora pura utopia.

CONTENUTO SU PIU’ COLONNE

Addio alle tabelle, con la proprietà multi-column è possibile organizzare facilmente il testo in colonne. Anche in questo caso è necessario, per il momento, specificare un prefisso per i browser: -webkit per Safari e -moz per Firefox.

<div style="width: 500px; background-color: #EEEEEE; color: #333333; padding: 30px;">
<p style="column-rule: 2px solid white; -moz-column-rule: 2px solid white;-webkit-column-rule: 2px solid white; column-gap: 30px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;">
…lorem ipsum…esempio css3 multi-column…lorem ipsum…
</p>
</div>

Possiamo definire:

  • column-count: il numero di colonne
  • column-width: la larghezza delle colonne (in caso contrario si adatta automaticmaente allo spazio disponibile)
  • column-gap: lo spazio tra colonne
  • column-rule: una riga verticale tra le colonne
  • column-rule-color: il colore del bordo delle colonne
  • column-rule-style: lo stile del bordo delle colonne
  • column-rule-width: lo spessore del bordo delle colonne

Ci sono anche altre proprietà in fase di definizione, ma evito di specificarle dato che al momento sono incompatibili con tutti i browser.

IL PROBLEMA DELLA COMPATIBILITA’

Alcuni dei browser, come sempre (ogni riferimento a cose o persone è puramente casuale) arrivano in ritardo, impedendo di fatto l’utilizzo delle nuove funzionalità a chiunque tenga un minimo d’occhio la compatibilità.

Su http://a.deveria.com/ potete trovare una tabella che riassume la compatibilità delle varie funzioni con i più comuni browser, tenendo conto anche della retrocompatibilità e degli aggiornamenti futuri.

Per riassumere, questo è lo stato attuale:

Internet Explorer Firefox Safari Chrome Opera
Far Past 6.0: 6% 2.0: 22% 3.1: 41% 1.0: 52% 9.0: 14%
Past 7.0: 9% 3.0: 38% 3.2: 69% 2.0: 80% 9.6: 45%
Present 8.0: 16% 3.5: 79% 4.0: 94% 3.0: 88% 10.0: 49%
Near Future (early 2010) 8.0: 16% 3.6: 82% 4.*: 97% 3.0: 88% 10.0: 49%
Future (late 2010 or later) 9.0: 23% 3.7: 86% 4.*: 97% 4.0: 93% 10.5: 71%

In sostanza quindi, i browser attuali che si adattano maggiormente sono Firefox, Safari e Chrome.

Guardando questa proiezione Internet Explorer non ci fa intravedere un futuro roseo…  In ogni caso questi dati non sono sicuri al 100% perchè, com’è ovvio, i browser futuri sono in via di sviluppo e confidiamo nella lungimiranza dei programmatori. E’ infatti notizia degli ultimi giorni che Internet Explorer 9 dovrebbe essere compatibile HTML5 e parte del CSS3. Meglio di niente.

PER APPROFONDIRE

Gli elementi presentati sono le novità più importanti per quanto riguarda le potenzialità grafiche dei nuovi codici. Se volete approfondire in modo completo vi invito a consultare queste risorse utili:

(Fonti: HTML.it, Tom Stardust , css.flepstudio.org e a.deveria.com)

4 Comments

  1. Mattia / 16 gennaio 2010

    Limpidissima spiegazione.
    Ciao!

  2. Dany / 16 gennaio 2010

    Grazie :)

  3. Josh / 18 gennaio 2010

    spiegazione chiara e semplice! :) oltre al sito di htm.it sai anche dove si possano trovare le liste dei comandi integrali? intendo una specie di manuale, o per il momento non ce ne sono?

  4. Dany / 18 gennaio 2010

    Gli unici manuali integrali che ho trovato sono quelli che ho inserito tra le risorse, il Working draft e il W3C Editor’s draft. Per il resto trovi tantissimi tutorial sulle singole funzioni. Tieni conto che essendo un codice ancora in fase di studio e ben lontano dall’essere standard è tutto in evoluzione e molte cose cambieranno nella versione “definitiva” (come ad esempio il problema di dover inserire i suffissi per far riconoscere il css3 dai singoli browser), quindi forse al momento fare una guida definitiva è un po’ prematuro

Trackbacks/Pingbacks

  1. Tweets that mention HTML5 e CSS3 | Web Nuts -- Topsy.com - [...] This post was mentioned on Twitter by css3watcher, WebNuts. WebNuts said: HTML5 e CSS3 http://ff.im/-eof7E [...]
  2. Notizie dai blog su HTML5 e CSS3: a che punto stiamo con la compatibilità? - [...] HTML5 e CSS3 I recenti sviluppi nel mondo del codice sono ghiotti per qualsiasi web designer, dato che tendono ...

Leave a Comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

Immagine CAPTCHA

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>