Il prolungamento, da uno a due giorni, sarà l’occasione per distribuire le attività del Codemotion in un arco temporale più vasto. I partecipanti avranno così la possibilità di poter seguire i talk da loro desiderati con minore probabilità di incorrere nel rischio di sovrapposizioni di interventi.

La contemporaneità fra Roma e Madrid permetterà di costruire un evento che unirà le due capitali attraverso la passione per la tecnologia e per la programmazione. Codemotion Roma e Codemotion Madrid sono organizzati con lo stesso spirito e format, i protagonisti saranno i contenuti tecnici e le Codemotion People.

Il Codemotion si terrà a Roma il 23 e 24  marzo 2012.
L’ingresso all’evento è come sempre gratuito.
Per ogni informazione: http://www.codemotion.it

Un “problema” delle transizioni CSS3 è il fatto che sono legate ai cambiamenti di stato, e nonostante nel linguaggio CSS ne esistono vari, spesso il più utilizzato è :hover ovvero quello responsabile di gestire il passaggio del mouse su un particolare elemento (esiste un CSS Tip a riguardo)… una favolosa interazione che è completamente inutile sui dispositivi touch! 

Ma non disperate non è ancora tutto perduto perché Javascript è qui per darci una mano, possiamo tranquillamente utilizzare eventi Javascript (uno a caso… il click!) per far scaturire queste transizioni senza neanche troppa fatica.

Tenete pronto jQuery, anche se non è strettamente necessario, ci farà comodo per accedere velocemente agli eventi e alle classi CSS.

Guardate il file di prova Le basi delle transizioni CSS3

1. Preparare il file

Creiamo un nuovo file Html vuoto nel quale creiamo un elemento “cavia”. Un div, un button… quello che più vi piace, assegnategli un id così sarà più facile selezionarlo dopo.

<div id="elemento"></div>

Tramite Css dategli un colore di sfondo e delle dimensioni, giusto per creare un elemento di test, tipo 150×150 pixel con sfondo azzurro.

2. Creare le regole necessarie

Nella regola che definisce questo elemento dovremo anche inserire la proprietà “transition” (con il prefisso per Webkit) che dirà al browser di eseguire un’interpolazione quando rileva un cambiamento di proprietà sull’elemento:

#elemento{
  -webkit-transition: all 0.5s ease;
}

Visto che è un oggetto a posizionamento statico useremo  i margini per muoverlo, creiamo una classe che rappresenti lo stato finale della nostra animazione, dandogli un bel margin-left abbondante lo faremo muovere verso destra:

.spostamento{
  margin-left: 400px;
}

E per adesso non assegnatela a nessun elemento,

3. jQuery mette e toglie

Ora è il turno di jQuery! Dopo averlo incorporato dovremo dirgli che al click sul nostro id elemento dovrà fare qualcosa… alternare l’assegnazione e la rimozione di una classe, magari quella creata poco fa, sull’elemento corrente

$("#elemento").click(function(){
  $(this).toggleClass("spostamento");
});

Quindi:

1. si clicca sull’elemento
2. jQuery assegna la classe a quest’ultimo
3. la proprietà “transform” rileva un cambiamento di proprietà e il browser esegue la transizione
4. si clicca di nuovo e jQuery toglie la classe, altro cambiamento e la transizione va al contrario
5. e via così…

4. Opzionale – versione senza jQuery

Per chi vuole smanettare un pò di più con Javascript allo stato puro, il codice per fare (quasi tutto) quello ricreato poco fa:

var elemento = document.querySelector("#elemento");

elemento.addEventListener("click",cambia,false);

function cambia(){
  this.className += " sposta";
  this.removeEventListener("click",cambia,false);
}

Descrivendo le righe qui sopra:

1. Accedo all’oggetto con id elemento e lo memorizzo in una variabile Javascript
2. Aggiungo un event listener per dirgli di richiamare la funzione cambia al click
3. Nella funzione cambia: aggiungo la classe sposta all’elemento corrente
4. Nella funzione cambia: rimuovo l’event listener per evitare che continui ad aggiungere la stessa classe

Rimuovere la classe dall’elemento e alternare l’assegna/rimuovi è un po più complesso e va un po fuori l’argomento di questo breve tutorial… e poi ragazzi le librerie Javascript come jQuery esistono proprio per questo .

5. Dateci dentro!

A questo punto direi che è giunto il vostro momento di provare, testare e smanettare. Magari anche con eventi diversi dal click, jQuery UI mette a disposizione anche il trascinamento (drag)!

Ricordatevi che potete riprovare la demo e scaricare un file già completo e funzionante tornando verso l’inizio dell’articolo.

Abbiamo già parlato in precedenza di alcuni servizi dedicati ai font, oggi ne vediamo uno diverso ma che ha come scopo proprio quello di permetterci di usare tipografia avanzate diverse dai soliti font sicuri per meglio caratterizzare le nostre pagine, stiamo parlando di Cufón, un semplicissimo script supportato da tutti browser disponibili. 

L’implementazione è molto facile e riducibili in quattro fasi:

1. Scaricare Cufon-yui.js dal sito http://cufon.shoqolate.com/generate/ ed inserirlo nella sezione <head>della vostra pagina web ( <script src=”cufon-yui.js” type=”text/javascript”> </ script>)
2. Scegliere il file del font (*.ttf, *otf, ecc.) che si desidera convertire e caricarlo nel convertitore che trovate sempre sul sito lasciando  le impostazioni predefinite, accettate i termini del generatore, e dopo aver flaggato la casella di controllo EULA inviare il modulo e il gioco è fatto!
3. Caricate il file javascript del font generato nella vostra pagina subito sotto allo script del cufon (<script src=”IlTuoFont.font.js” type=”text/javascript”></ script>)
4. Utilizzare gli ID, le classi o i tag dove volete trasformare il vostro font così:

<script type="text/javascript">
  Cufon.replace('H1');
  Cufon.replace('#sub1');
</script>

Nella head del nostro documento inseriamo il tag script di caricamento di Cufón, del nostro fon convertito e un blocco di codice Javascript dove specifichiamo su quali elementi vogliamo usare i nostri font speciali.

Se vogliamo usare selettori avanzati (in genere sono inclusi in librerie Javascript come jQuery e MooTools) dovremo incorporarli prima di queste righe!

<script src="cufon-yui.js" type="text/javascript"> </script>
<script src="YourFont.font.js" type="text/javascript"> </script>
<script type="text/javascript">
  Cufon.replace('H1'); / / Funziona senza un motore di selettore
  Cufon.replace('#sub1'); / / Richiede un motore di selettore per IE 6-7, vedi sopra
</script>

Inseriamo i nuovi elementi Html nella pagina:

<h1> tuo carattere personalizzato qui </h1>
<h2 id="sub1"> tuo carattere personalizzato anche qui </h2>

Per evitare ritardi, è meglio inizializzare Cufon prima di altri script in fondo alla pagina.

<script type="text/javascript">
  Cufon.now ();
</script>

Attenzione però per evitare problemi, qui ci sono alcune cose da osservare:

• Un doctype transitional potrebbe rompere l’attibuto line-height del css, utilizzare un doctype strict o HTML5.
• Evitare spazi bianchi (o qualsiasi altra cosa) prima del doctype. Questo creerebbe dei problemi di stampa in IE.
• UTF-8 è il solo set di caratteri supportati. Infatti è possibile che alcuni font non siano visualizzati correttamente.

Lascio a voi la possibilità di sbizzarrirvi utilizzando tutte le API supportate dal cufon, che troverete qui.

(Foto originale di pheezy)

Sappiamo che il web per metà è imprevedibile quindi occupiamoci dell’altra metà, ovvero la strada presa durante il 2011 a cosa sta portando… 

La grande metamorfosi di Internet Explorer

Per il sito più pessimista di statistiche web IE si aggira oggi intorno al 51% di share, il che significa che nel giro di un mese o due la somma degli altri browser sarà per la prima volta nella storia più alta della quota di mercato del caro vecchio IE, che tuttavia rimarrà (ancora per questo anno mi sa) singolarmente il browser più usato. In più a partire da questo mese e progressivamente la Microsoft forzerà gli aggiornamenti delle versione 6 e 7 verso le più recenti 8 e 9 (in base alla versione di Windows). In più la versione 10 di IE dovrebbe giungere a noi verso primavera/estate, probabilmente insieme a Windows 8.

Anche se sarà dura, la nostra percezione di Internet Explorer cambierà sensibilmente!

Chrome inpenna, Firefox ancora sotto choc e Safari… boh!

Il 2011 ha anche segnato la già incontrastata ascesa di Chrome confermandolo tra novembre e dicembre come il 2° browser più usato al mondo. Fatto molto importante perché Chrome si porta dietro molte feature innovative come i comandi vocali (per ora solo sui siti Google americani), il Web Store, le estensioni scritte in linguaggi web, Flash Player integrato e a breve supporto nativo di webcam e joypad!

Firefox con sommo rammarico non solo perde terreno ma ha perso molta fiducia da parte degli sviluppatori, specie dopo la decisione di aggiornarlo ogni 6 settimane con aggiornamenti praticamente vuoti e privi di particolari novità. C’è ancora tanta utenza fedele ma nel 2012 vedo un trend negativo per questo browser, sopratutto per l’incapacità di Mozilla di indicare una strada da seguire per Firefox la dove la concorrenza invece sembra avere le idee molto chiare.

E Safari? attualmente è il browser più vecchio (la versione 5 ha più di un anno) e di recente Apple si è degnata solo di assegnargli un vago “.1″ in occasione dell’uscita di OSX Lion. Strano vedere così poco interesse in un browser da parte di un’azienda che ha detto di puntare tutto sui nuovi standard. Safari Mobile guida il mercato dei browser per smartphones e tablet, ma anche qui recentemente non ci sono state particolari novità. Per lui difficile fare previsioni… staremo a vedere!

Mobile, mobile e ancora mobile

Ormai è un trend abbastanza scontato: si vendono sempre più smartphone, si è aperto il mercato dei tablet, qualcuno ci prova con prodotti “nuovi”. Prepariamoci a un web sempre più evoluto e vissuto in movimento!

E invece cosa accadrà su MoebiusMania.net?

Ammetto le scarse pubblicazioni in dicembre, purtroppo lavoro progetti paralleli e nuovi design mi hanno tenuto un po impegnato, ma grazie ai nuovi autori preparatevi a nuovi articoli e tutorial sempre all’avanguardia!

Posso anticiparvi che:

• ci sarà un nuovo design (con nuove funzionalità) nel giro di poche settimane
• in generale i tutorial saranno più orientati su Html5 e dintorni
• i tutorial di Javascript saranno meno basilari
• ci saranno tutorial che combineranno più linguaggi
• inizieremo a parlare anche di Php
• e altro ancora…

Ringraziandovi per il tempo speso su questo blog vi auguro buon anno e vi ricordo che se siete interessati a partecipare potete sia commentare i post (magari con suggerimenti o link) o anche proporvi come autori.

(foto di copertina a cura di playlight55)

Le novità non sono poche, ma vediamo quelle principali:

• un nuovo uploader di immagini/multimedia che supporta il drag’n'drop(ovvero trascinate i file da una cartella nel nuovo uploader e il gioco è fatto)
• barra di ammistrazione snellita e riorganizzata
• schermate e tooltip introduttivi per spiegare le nuove funzionalità
• ora WordPress incorpora jQuery 1.7.1
• è anche integrato tutto lo stack di jQuery UI 1.8.16
• il menu di navigazione dell’admin ora è a tendina al passaggio del mouse
• l’admin di WordPress muove i primi passi verso il mobile ed è stata disegnare per funzionare su iPad

Trovate la lista completa e dettagliata delle novità nel post ufficiale del team di sviluppo, WordPress 3.3 è gia scaricabile in inglese dal sito ufficiale e l’aggiornamento è già disponibile dalle backend dei siti. Per la traduzione in italiano dovrebbe essere questione di giorni!

Il primo di questo Dicembre arriva dai ragazzi di Envato che dopo il fortunato bundle grafico di Ottobre ce ne propongono uno nuovo dedicato a chi sviluppa o realizza videogiochi: l’ Indie Game Developer Bundle. Ammetto che è un pochino off-topic rispetto al blog ma essendo un’appassionato di gaming non potevo non segnalarlo!

Il pacchetto contiene modelli 3D, grafiche 2D, texture, tutorial di programmazione per iPhone e materiale per Unity 3D.

Se siete piccoli sviluppatori di videogiochi o volete solo avvicinarvi all’argomento direi che sono 20$ (dollari) spesi bene!

Nei prossimi giorni altri bundle, tra cui quello nostro!

La soluzione?

Una libreria Javascript chiamata Modernizr che ci permette di testare la disponibilità delle funzioni html5 e css3 nei vari browsers. In questo modo è possibile creare codice cross browser  gestendo le varie eccezioni. Vediamo nel dettaglio come installare questa libreria. 

Nella pagina di download ,è possibile scaricare la versione development , dove potete scaricare la versione completa ed e estesa della libreria per implementarla secondo le vostre specifiche. Per chi, invece, deve solo testare la compatibilità dei Css3 nel browser , è possibile settare le varie opzioni che la libreria ci offre e generare il nostro codice compresso. Incollate il codice in un file .js esterno e inseritelo nel tag <head> della pagina. Il team di Modernizr consiglia di includere la libreria appena dopo le importazioni Css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>La tua pagina</title>
  <script type="text/javascript" src="modernizr-latest.js""></script>
 </head>

 <body>

 </body>
</html>

Modernizr  supporta  i seguenti  browsers :

IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Su mobile: iOS mobile Safari, Android WebKit browser, Opera Mobile, Firefox Mobile.

Ora avete una libreria javascript che vi dice se la funzione Css3 o Html5 che avete utilizzato viene supportata o meno, lanciate la pagina nel browser e guardando il tag <html> con strumenti sviluppatori di Chrome o Firebug vedrete una cosa di questo tipo:

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
....
</html>

Prendendo come esempio di proprietà da monitorare il border-radius, se il browser la supporta viene applicata al tag <html> la classe “borderradius” altrimenti un’altra di nome “no-borderradius”. Dato che i browser vecchi ignorano le proprietà Css3 possiamo applicare border-radius senza problema per stilare, per esempio, un tag <img> e a questo punto per creare una regola alternativa nel caso questo elemento venga visualizzato da un browser che non supporta i Css3 usiamo questo selettore

.no-borderradius img{
  /* ... */
}

Per chi è più esperto e ha dei casi particolari da monitorare, ci sono una seri di API che servono per implementare il cuore della librerie adattandola alle vostre esigenze.

Nella pagina dedicata potete trovare tutta la documentazione inerente alla libreria con i vari esempi per ciascuna features che Modernizr supporta.

Potrei stare a scrivere mille cose a riguardo, ma dato che non so a quanti di voi possano realmente interessare, ho deciso di rendere questo post un pochino più creativo facendo una classifica degli articoli più letti di questo terzo anno:

1. Introduzione a TweenLite – in questo tutorial ho esposto le basi della libreria TweenLite di ActionScript 3 per creare facilmente animazioni accattivanti all’interno di siti/applicazioni creati all’interno di Flash o Flex.
2. 15 estensioni di Chrome per Webdesigners – Raccolta di piccole ma comode estensioni per facilitare la vita del web designer/developer.
3. Html5 parla italiano – Dove segnalavo un buon blog (e attualmente mi pare anche l’unico) nostrano che parla esclusivamente dell’argomento più hot dell’ultimo nel mondo dello sviluppo web.
4. Lavorare con i bookmark: Licorize – La mia recensione dell’ottimo servizio di bookmarking realizzato dalla software house fiorentina Open Lab.
5. 4 client FTP per ogni esigenza – mini raccolta dedicata ai software di File Transfer Protocol.

Ringraziando sempre tutti i visitatori, spero di fare un quarto anno ancora migliore!

• Adobe acquisisce Typekit e Nitobi (creatori di PhoneGap) per arricchire i servizi della Creative Suite.
• E’ disponibile la beta di jQuery 1.7 che introduce nuovi eventi, miglioramenti alle animazioni e altre modifiche.
• Bootstrap (il framework di Twitter) arriva alla versione 1.3 e aggiunge anche effetti Javascript.
• Flash Player 11 e AIR 3 sono stati ufficialmente rilasciati!
• JetBrains rende disponibile gratuitamente in beta un IDE per Flex, AS3, AIR e Html5.
• jQuery Mobile arriva alla prima Release Candidate e si avvicina il rilascio ufficiale.

Aggiornamento 27/10: Ho aggiunto in fondo alla lista alcuni link a risorse premium (a pagamento) e altri link a risorse gratuite.

Siete liberi di segnalare altri link di risorse utili a tema nei commenti! 

Combinazioni di colori

Prima ancora di disegnare siti o assets grafici è sempre bene avere chiaro cosa si vuole ottenere, e la giusta combinazione di colori fa parte di questa fase, eccovi alcuni spunti a tema dark.

• Halloween
• Carved Pumpkin
• Halloween in summer
• Bedazzled Halloween

Photoshop & Illustrator

Dai tutorial a template di partenza ad elementi completi ecco una lista di materiale sia raster che vettorial da non perdere.

• Testo con effetto Mummia – tutorial per Illustrator CS5.
• Zucca in Photoshop – tutorial per creare una composizione in Photoshop CS3+.
• 50 illustrazioni vettoriali – raccolta di wallpaper.
• Halloween doodles – set di pennelli per Photoshop in stile schizzi a mano.
• Sfondo “cartoon-oso” - un simpatico wallpaper vettoriali con i mostri classici in versione cartoon.
• Scary Halloween - un bel wallpaper vettoriale.
• Halloween Grunge – pennelli per Photoshop con sagome di scheletri e pipistrelli.

Webdesign (Html, Css, Js, Flash)

Template, elementi, script che possono sempre servire nella realizzazione di siti con combinazioni di colori “dark”.

• Horror fonts – un pò di fonts stile a mano/horror… gratuiti!
• Countdown banner – un conto alla rovescia con animazioni in Flash da inserire nel vostro sito

WordPress

Temi e plugin a tema per il noto CMS del momento!

• Trick or Treat – Tema gratuito abbastanza curato graficamente.
• Halloween quotes – plugin che aggiunge a caso ad intervalli di tempo predefiniti effetti inaspettati.
• Countdown clock – un plugin per aggiungere un conto alla rovescia nelle sidebar, utile per qualunque evento!
• Theme rotator - rotatore di temi, per alternare più temi in modo automatico.
• Halloween Festival – altro tema gratuito.

Fotografia

Può sembrare off-topic ma quando si realizzano siti o assets spesso sono necessarie fotografie, sia propriamente descrittive sia di “contorno” ai contenuti. Può darsi che queste vi vadano bene può darsi che dovreste (o vorreste) scattarle voi.

• Halloween photography tips – ottime indicazioni per gli scatti durante le feste di Halloween.
• Creative ideas – altri consigli per gli scatti hallowiniani.
• Photos at Halloween – un paio di idee interessanti su come cambiare il colore delle luci per gli scatti.
• Ottilien Lantern, Pumpkin light – foto di stock gratuite.

Materiale Premium

Tutto quello che vi ho elencato finora era materiale gratuito e per certe cose c’è da ammettere, nonostante abbia selezionato solo quello che mi sembrava migliore, che bisogna un po’ scendere a compromessi… ecco perché qui vi elenco alcuni elementi “premium” ovvero a pagamento, ma non preoccupatevi il massimo è 14 dollari , che poi va convertito in euro .

• Hallowinning Landig page – 10$ – Una pagina Html singola ben realizzata con già diversi effetti Javascript integrati.
• Hallowinning email – 14$ – Stesso tema ma questa volta è un template per email.
• Halloween Labels – 4$ – Biglietti vettoriali stampabili
• Halloween Background – 2$ – Uno sfondo tetro vettoriale usabile come base per poster o locandine.
• Zombie Hand – 4$ – Ottima illustrazione vettoriale da usare per composizioni.

in chiusura

E con quest’ultima raccolta chiudiamo la sessione dedicata ad Halloween, il materiale non è mancato, quindi ora tocca a voi… datevi da fare .

Dopo aver realizzato la favolosa zucca 3D del nostro Halloween Bundle 2011 , The Monk Design ci guida nella realizzazione di un fotomontaggio per ricreare un effetto simile a quelli visti nel cartone animato Ken Shiro, quando i nemici esplodono dopo aver premuto i punti di pressione. 

Head Xplosion – Parte 1 | Head Xplosion – Parte 2

Ci vediamo domani con l’ultimo post, la raccolta di materiale e risorse su web!

Oggi daremo un’occhiata ad alcuni siti che utilizzano un layout basato su temi scuri , in genere quando si lavora con un combinazione di colori “dark” si usa un nero di sfondo e si gioca con colori caldi di contrapposizione. Ecco alcune semplici nozioni da tenere in considerazione quando optate per combinazioni di colore scure per i layout:

• non bisogna per forza usare il nero totale (#000) come sfondo.
• una volta trovato un buon colore di sfondo provate ad applicarci una texture.
• con le combinazioni di colore scure è più facile cadere nell’errore di ottenere contrasti testo/sfondo non molto efficaci e leggibili.
• a volte c’è il pregiudizio che il nero e lo scuro siano “macabri”, errato! ovviamente dipende come lo trattate, spesso i colori scuri sono sinonimi di eleganza.
• non si deve per forza esagerare con colori e contenuti in un layout dark, molti siti scuri sono anche minimalisti!

Detto questo, ecco alcuni siti in cui osservare quello di cui discusso qui sopra:

(Nota: la generazione delle preview è automatica, se appare la scritta “generating preview” provate a ricaricare la pagina)

Blake Allen Design

Osvaldas Valutis (v1)

Riser Media

Vivas

Edson Espíndola

Leukocit

Nell’ultimo post della sessione (la raccolta) troverete link anche ad alcune palette di colori scuri.

Come già fanno ogni anno per il loro anninversario la mitica Envato mette a disposizione un nuovo pacchetto di oltre 500$ di materiale grafico a soli 20$ (circa 15 euro per noi). Si va da foto di stock, a elementi vettoriali, template per impaginati a elementi per siti web!

(cliccate sul banner qui sotto per andare alla pagina con i dettagli)

A partire da oggi il bundle in offerta sarà in vendita per i prossimi 4 giorni, coincidenza vuole che scade proprio al termine della nostra sessione Back to Halloween, quindi non pensateci troppo su

In questo pacchetto troverete:

• sorgenti vettoriali e raster delle grafiche utilizzate
• Html + Css + Javascript da includere per aggiungere gli elementi sul vostro sito
• Plugin di jQuery per inserire gli elementi più velocemente
• Plugin per WordPress per inserire gli elementi ancora più velocemente
• Wallpaper della zucca in due formati
• Istruzioni su come usare il materiale

Tutto quello che trovate nel pacchetto è gratuito e riutilizzabile, se apprezzate o trovate utile questo il lavoro svolto da MoebiusMania considerate l’idea di cliccare i banner sulla barra laterale o di “offrirci un caffè” tramite il link appena sotto l’articolo .

Buon download e a domani per la seconda parte della sessione!

Innanzitutto chiariamo un paio di concetti semplici, il linguaggio non è cambiato: alcuni tag sono stati deprecati e altri aggiunti, HTML è e rimarrà sempre un linguaggio di marcatura quindi tutte quelle cose che avete visto (o sentito dire) riguardo animazioni e interazioni semplificate, geolocalizzazione ecc.. ecc… non vengono realizzate in HTML5 ma dalle sue “costole” CSS3 e alcune nuove API di Javascript. 

Quello che fa HTML5 è migliorare e semplificare il modo in cui definiamo le strutture delle pagine web sia logicamente che semanticamente.

Chiariti questi piccoli concetti passiamo al sodo!

1. Doctype e inclusione Script

La prima cosa che possiamo apprezzare riguarda proprio la prima riga delle pagine Html: il Doctype! Dopo anni di stringhe incomprensibili, difficili da ricordare e di copia-incolla finalmente finalmente questa dichiarazione è stata sintetizzata:

<!DOCTYPE HTML>

Incredibile ma vero è tutto qui! E la cosa bella è che questo Doctype viene già riconosciuto dal validatore del W3C quindi anche se non state scrivendo delle pagine totalmente in Html5 potete già usarlo.

Anche l’inclusione di script è stata semplificata, ora il parametro “text/javascript” diventa sottinteso, quindi non è necessario definirlo. Per fare un’esempio, l’inclusione di jQuery in una pagina Html5 appare così:

<script src="jquery.js"></script>

2. Struttura semantica della pagina

Finora siamo stati abituati a gestire tutta la struttura delle nostre pagine Html principalmente con il tag <div> e vari ID, in situzioni simili a queste:

<div id="testata"></div>
<div id="navigazione"></div>
<div id="barra"></div>
<div id="contenuti"></div>
<div id="footer"></div>

Il tutto ha sempre funzionato, c’era solo un problema di fondo per il quale semanticamente significano tutti la stessa cosa, un motore di ricerca che scansiona la nostra pagina non è in grado di distinguere la testata dal footer… ma ora le cose cambiano!

Html5 introduce così dei nuovi tag che in gran parte delle occasioni andranno a sostituire i div per la struttura delle pagine:

<header></header>
<nav></nav>
<aside></aside>
<section id="contenuti"></section>
<footer></footer>

Ecco che ora abbiamo a disposizione tag dedicati a testate, navigazioni, barra laterali, sezioni e piede di pagina. A livello di rendering questi tag non offrono niente di nuovo, sono completamente neutri come i div ma permettono di differenziare le varie zone anche a livello semantico, oltre che avere anche abbastanza senso logico!

A questo punto chiariamo che i tag div non devono a tutti i costi essere abbandonati, scopo di questi nuovi elementi è fornire un giusto tag per identificare alcune parti della pagina

3. Audio e Video

Uno degli aspetti più discussi di Html5 è la possibilità di inserire player video e audio nativamente senza passare da plugin di terze parti come Flash, QuickTime e Silverlight. Il tutto viene gestito (a livello basilare) con una sintassi molto semplice:

<video width="320" height="240" src="mioVideo.mpg" controls="controls" poster="mioPoster.jpg">
Il tuo browser non supporta Html5!
</video>

Il tag video mi permette di contenere un testo al suo interno che verrà visualizzato solo nel caso in cui il browser in uso non sia in grando di elaborare l’elemento (un pò come l’attributo alt delle immagini), width e height di regolare le dimensioni del player, src per indicare il file da visualizzare, poster di caricare un’immagine di anteprima personalizzata e controls serve per specificare di visualizzare i controlli di riproduzione.

Audio funziona in modo molto simile ma senza dimensioni e poster.

Una cosa che viene spesso ignorata quando si parla di questa nuova possibilità offerta dal prossimo standard è il fatto che se vogliamo che i nostri contenuti multimediali siano fruibili in tempistiche ragionevoli resta sempre necessaria una tecnologia lato server di streaming o un buon piano di hosting, ricordatevi: Html5 fa solo il player, lato server è tutto invariato!

4. Dove andare da qui?

Come dico nel titolo queste sono solo alcune basi… da qui c’è ancora tutto da scoprire su HTML5!

Un primo passo potrebbe essere dare un’occhiata alla referenza globale del linguaggio Html, quella offerta da W3Schools offre una buona panoramica dei tag attualmente in uso, quelli deprecati e quelli aggiunti dalla quinta revisione.

Nei prossimi post e tutorial mi dedicherò più spesso a questi nuovi linguaggi quindi potete o proseguire qui nei prossimi mesi o tuffarvi nel mare di articoli presenti sul web a riguardo… HTML5 è stato uno dei più grandi buzz del 2011!