Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è  visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Nelle ultime settimane mi si sono presentate diverse occasioni per discutere sul supporto da offrire agli utenti di Internet Explorer 6 e ho notato che la questione risulta ben lontana dall’essere risolta.

Allo stato attuale i maggiori servizi di statistiche web delineano gli utenti di Internet Explorer 6 tra il 9% e il 18% dell’utenza mondiale.

Una statistica indubbiamente preoccupante considerato che superara gli utenti di safari, chrome ed opera messi insieme.

Detto questo prima di farsi prendere dal panico suggerirei di abbandonare le ricerce per ottenere un numero preciso di utenti IE6 sul pianeta e di basarsi su qualcosa di più oggettivo.

Sicuramente se vi siete posti il problema è perchè temete di perdere utenza tra coloro che utilizzano questo vetusto browser e prima di procedere oltre vi consiglierei di rispondere alla seguente domanda:

Quanti utenti con Internet Explorer 6 navigano sul vostro sito?

Per fare un esempio su questo blog gli utenti con ie6 negli ultimi 4 mesi risultano meno dell’1% e lo stesso potrebbe essere per il vostro sito.

Non saprete mai di quanti utenti state parlando finchè non effettuerete delle verifiche sulle vostre statistiche.

Sicuramente questi dati sono molto più precisi delle statistiche globali, che essendo su grandi numeri e contesti diversi probabilmente non rappresentano il vostro caso.

Una volta verificati i numeri vi inviterei a valutare anche l’andamento delle visite degli utenti con IE6 da un anno fa ad oggi.

Sulla base di questi dati possiamo arrivare sicuramente ad almeno un paio di conclusioni:

1) Gli attuali utenti con Internet Explorer 6 sono una minoranza

2) Gli attuali utenti con Internet Explorer 6 sono meno di un anno fa

Queste sono realtà oggettive ricavabili dalle statistiche di qualunque sito web.

Perchè accade questo? Internet Explorer 6 è un browser obsoleto, uscito nel 2001 che ha visto alterni update fino al 2007/2008, da allora sono uscite 2 nuove versioni di questo browser e a breve ne vedremo una terza.Questo browser presenta innumerevoli problemi di sicurezza, performance e funzionalità, per questo motivo molte aziende quali Google hanno abbandonato il supporto a questo browser.

Per lo stesso motivo Microsoft sta portando avanti da tempo campagne a favore dell’aggiornamento a Internet Explorer 8.

Gli interventi necessari per il funzionamento delle attuali tecnologie su Internet Explorer 6 sono onerosi e in alcuni casi impossibili, richiedono lunghi tempi di produzione e di test, quindi grandi costi che potrebbero essere altrimenti destinati al miglioramento dell’accessibilità e dell’usabilità, all’ottimizzazione dei tempi di caricamento delle pagine e per i motori di ricerca che portano vantaggi concreti a tutta l’utenza del sito e non solo ad una minoranza in via d’estinzione.

Lavorare ad oggi per il supporto agli utenti di Internet Explorer 6 è di fatto uno spreco di tempo e risorse che non porta vantaggi a nessuno e rappresenta una completa opposizione al buon senso che attualmente caratterizza il mondo del web ed aziende del livello di Microsoft o Google.

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Per questa soluzione sono partito dall’esempio fornito da Youtube nella rispettiva documentazione. Lo script proposto carica dal canale desiderato le thumbnails dei video e il rispettivo titolo, caricando inoltre il player che esegue il filmato sul quale viene cliccato.

Nel nostro caso desidero mantenere le thumbnails e i titoli ma preferisco evitare che il player occupi spazio nella pagina, modificherò quindi lo script per permettere l’apertura del video in un div grazie al plugin PrettyPhoto.

Per iniziare creiamo la nostra pagina html, avendo l’accortezza di lasciare un div con id nel quale verranno caricate le thumbnails dei video.

Caricare i dati da Youtube

Ora possiamo iniziare a creare il javascript che richiamerà i dati necessari da Youtube.

Per prima cosa inseriamo un link alle api di youtube, dove specificheremo che cosa selezionare (nel nostra caso andremo a prelevare tutti i video del canale di GoogleDevelopers).

<script type="text/javascript"
src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&callback=getVideos">
</script>

Questo link ci permette di selezionare tutti i feed di un determinato utente (GoogleDevelopers) esenguendo una funzione javascript di callback (getVideos).

Andiamo quindi a definire la nostra funzione nella pagina.

<script type="text/javascript">
function getVideos(data) {

}
</script>

All’interno di questa funzione filtreremo i dati e li utilizzeremo per ottenere l’output desiderato.

Per prima cosa definiamo un array per i dati ottenuti

var feed = data.feed;
var entries = feed.entry || [];

Ora possiamo estrarre i dati utilizzando un ciclo for

for (var i = 0; i < entries.length; i++) {
}

All’interno del quale ricaviamo i dati che ci servono

var entry = entries[i];
var title = entry.title.$t.substr(0, 35);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var videoUrl = entries[i].media$group.media$player[0].url;

Per gestire in maniera corretta l’output salviamo i dati relativi ai feed all’interno delle rispettive vairabili, in seguito raggruppiamo i dati con il codice html necessario all’impaginazione.

html.push('<div class="singleVideo"><a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'">',
'<img src="', thumbnailUrl, '"/>','</a>',
'<a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'"><span>',title,'...</span></a></div>');

Il risultato per ogni output del ciclo nell’html  sarà:

<div class="singleVideo">
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<img src="[THUMBNAILVIDEO]"/>
</a>
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<span>[TITOLO VIDEO]...</span></a>
</div>

L’ultima riga stamperà il risultato nell’elemento con l’id specificato

document.getElementById('videoContainer').innerHTML = html.join('');

Aggiungiamo PrettyPhoto

Avendo già inserito gli attributi rel per i link non resta che aggiungere Jquery e il plugin PrettyPhoto nella pagina

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/prettyPhoto.js"></script>

ed inserire le opzioni per il desiderato funzionamento di PrettyPhoto

$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 40,
opacity: 0.35,
showTitle: true,
allowresize: true,
counter_separator_label: ' di ',
theme: 'light_square',
callback: function(){}
});
});

Il risultato è visibile in questa demo.

Il grande problema è rappresentato dal fatto che non tutti i sistemi operativi hanno gli stessi font installati e solo poche famiglie di caratteri risultano comuni a tutti gli utenti.

Per far fronte a questo problema ed avere la possibilità di utilizzare un qualunque font su una pagina web è possibile utilizzare una tecnici di font replacement (nota anche come sIFR).

Esistono numerose tecniche per raggiungere il proprio obiettivo, una delle più recenti e funzionali è Cufon.

Cufon permette la sotituzione del normale web font con un altro, tramite uno script Javascript che utilizzando VML e Canvas permette una rapida sostituzione del testo con il carattere desiderato senza modificare il codice html.

Per iniziare ad utilizzare Cufon, creiamo una pagina html con del testo al quale sostituiremo il font con quello desiderato.

Come secondo step scarichiamo lo script di cufon, salviamolo in un file .js e colleghiamolo alla pagina html.

<script type="text/javascript" src="javascript/cufon.js"></script>

Ora andiamo a scegliere un font da utilizzare nella pagina (per questa operazione è indispensabile avere il file del font) ed utilizziamo lo script generator presente sul sito di Cufon .

Con questo comodo tool otterremo un file .js contenente tutte i dati per sotituire il font originale con quello desiderato.

Vediamo nel dettaglio i campi e a cosa servono:

Regular typeface - Campo obbligatorio, qua dovrete selezionare il file del font presente sulla vostra macchina

Bold typeface , Italic typeface, Bold Italic typeface – Campi opzionali, se il vostro font possiede un file per il grassetto, italico e il grassetto italico aggiungete in questi campi i rispettivi files. Questo passaggio è indispensabile per renderizzare il grassetto, l’italico e il grassetto italico di un font nella pagina web.

Use the following value as the font-family of the generated font – Serve per definire una nomenclatura standard per i diversi files che verranno generati ed evitare errori nei collegamenti.

EULA - Campo obbligatorio, con questo checkbox si conferma di avere il diritto di utilizzare un determinato font secondo la legge sulle proprietà d’intelletto.

Glyphs – I checkbox seguenti richiedono quali caratteri utilizzare dalla famiglia font, come suggerito nel form è sconsigliabile utilizzarli tutti in quanto il file risulterebbe molto pesante. Una buona combinazione è data da “uppercase”, “lowercase”, “numerals”, “punctation” e “basic latin” che mette a disposizione maiuscole, minuscole, numeri e punteggiatura mantenendo le dimensioni del file contenuto. E’ anche possibile aggiungere caratteri specifici non compresi nei precedenti checkbox tramite il form al termine di questa parte.

Security – In caso di font commerciali può essere obbligatorio limitare l’utilizzo di un font a uno o più domini, inserire gli url nel campo per limitarne l’utilizzo.

Scale the font to the following size - Permette di scalare il corpo del carattere riducendo così il peso dei singoli caratteri nella pagina. E’ consigliabile mantenere comunque un corpo superiore alle 256 unità per preservarne la qualità.

If allowed, optimized paths may differ from the original by at most – Definisce di quante unità rispetto all’originale verrà ottimizzato il singolo carattere,  è sconsigliabile utilizzare quest’opzione per font con corpo ridotto.

Include kerning table – Aumenta la leggibilità del carattere ma anche il peso del javascript generato.

Gli ultimi due campi sono rispettivamente relativi alla condivisione dei dati e all’accettazione dei termini e delle condizioni del servizio.

Una volta completato cliccate sul pulsante in fondo e verrà generato uno o più  files javascript con il nome del vostro font e il corpo (es.Marketing_Script_400.font.js), scaricatelo e linkatelo alla pagina html.

<script type="text/javascript" src="javascript/Marketing_Script_400.font.js"></script>

Ora è possibile inserire il codice javascript nella pagina per definire a quale applicare il font replacement

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

E’ possibile definire anche più elementi a cui applicare la sostituzione

<script type="text/javascript">
  Cufon.replace(['h1','p']);
</script>

Esistono inoltre una serie di opzioni aggiuntivi per il funzionamento dell’hover o per l’utilizzo di sfumature di colore sul carattere, per una completa lista delle opzioni consultare la sezione styling del sito di Cufon.

Per un corretto funzionamento di Cufon la pagina html deve avere un doctype di tipo strict, inoltre per ottimizzare la velocità di rendering su ie si deve aggiungere questo script subito dopo il tag body

<!--[if IE]>
  <script type="text/javascript"> Cufon.now(); </script>
<![endif]-->

Una volta completati questi passaggi potete vedere un risultato simile a questa demo.

Coma abbiamo visto Cufon richiede poco tempo per l’implementazione e garantisce un ottimo risultato nonostante ciò ha i suoi limiti, vediamo di fare un bilancio di questa tecnica:

Vantaggi

- Semplice implementazione

- Compatibile su tutti i più recenti browser

- Non modifica il codice html

- Mantiene il codice leggibile per i motori di ricerca

Svantaggi

- Peso dei file javascript

- Esecuzione lenta su grandi quantità di testo

- Obbligatorio l’utilizzo di un doctype strict

Conclusioni

Nonostante i limiti rimane al momento la miglior tecnica di font replacement per prestazioni e qualità, c’è da sperare che in immediato futuro tutti i browser supportino le nuove specifiche per l’html 5 e migliorino i tempi di esecuzione del javascript  in modo da avere migliori prestazioni sul rendering della pagina con questa tecnica.

Tempo fa avevamo parlato di come realizzare un semplice slideshow con jquery, oggi vediamo come creare in poco tempo uno slideshow completamente customizzabile e compatibile grazie a jquery e jquery cycle.

Cos’è jquery cycle?

Jquery cycle è una libreria per jquery che permette la realizzazione di slideshow con molteplici effetti di transizione garantendo una buona customizzazione a livello funzionale tramite le opzioni messe a disposizione dagli sviluppatori.

Jquery cycle è scaricabile da qui.

Come funziona?

Per iniziare creiamo una pagina html ed inseririamo le immagini della nostra galleria all’interno di un div, al quale daremo delle regole css per dimensioni e stile.

<div id="photos">
<img src="images/sample1.jpg" alt="Questa è la prima foto"/>
<img src="images/sample2.jpg" alt="Questa è la seconda foto"/>
<img src="images/sample3.jpg" alt="Questa è la terza foto"/>
<img src="images/sample1.jpg" alt="Questa è la quarta foto"/>
<img src="images/sample2.jpg" alt="Questa è la quinta foto"/>
<img src="images/sample3.jpg" alt="Questa è la sesta foto"/>
<img src="images/sample1.jpg" alt="Questa è la settima foto"/>
</div>

Fatto questo colleghiamo la nostra pagina html alla libreria di jquery e al plugin di jquery cycle.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_cycle.js"></script>

(ovviamente i percorsi andranno definiti in base alla struttura della cartella)

A questo punto inseriamo la funzione cycle che farà funzionare il nostro slideshow

<script type="text/javascript">
$(document).ready(function() {
  $('#photos').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 2000
  });
});
</script>

In questo codice applichiamo la funzione cycle al div #photos definendo un effetto di transizione fade, una velocità di transizione di un secondo (speed: 1000) ed un timeout di due secondi (timeout:2000).

Per vedere la demo clicca qui.

Come aggiungere le thumbnails delle immagini

Per aggiungere le thumbnails delle immagini possiamo utilizzare l’opzione pager per ottenere una paginazione numerica delle immagini e la funzione di callback pagerAnchorBuilder per sostituire i numeri alle rispettive thumbnails.

Creiamo quindi un div #thumbnails dove andremo a collocare le immagini

<div id="thumbnails"><ul></ul></div>

Aggiungiamo quindi l’opzione pager per dichiarare a jquery cycle dove desideriamo collocare le anteprime

$('#photos').cycle({
  fx:     'fade',
  speed:  1000,
  timeout: 2000,
  pager:  '#thumbnails ul',
});

Per alleggerire l’esecuzione di javascript ho preferito aggiungere manualmente i tag <ul></ul> ma è possibile aggiungere questi tag attraverso jquery nel funzione pagerAnchorBuilder che andiamo ad aggiungere.

$('#photos').cycle({
fx:     'fade',
speed:  1000,
timeout: 2000,
pager:  '#thumbnails ul', 

pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/></a></li>';
}
});

La funzione pagerAnchorBuilder la normale paginazione di jquery cycle con le immagini contenute nello slide show.

Questo permette di visualizzare l’immagine scelta cliccando sulla thumbnail, viene inoltre messa a disposizione la classe .activeSlide presente sull’immagine attualmente visualizzata.

Questa soluzione molto comoda renderizza però due volte la stessa immagine, appesantendo notevolmente la pagina, in un contesto dinamico sarebbe opportuno gestire le thumbnails lato server per evitare ridimensionamenti da css che non riducono il peso dell’immagine.

Per vedere la demo clicca qui

Aggiungere una navigazione direzionale

Oltre alle thumbnails potrebbe essere utile aggiungere la possibilità all’utente di passare alla foto successiva o di tornare a quella precedente.

Per farè ciò è sufficiente creare due link con id da associare a jquery cycle

<div id="navPhotos">
<a id="prev" href=""><img src="images/button_prev.png" alt="Prev photo"></a>
<a id="next" href=""><img src="images/button_next.png" alt="Next photo"></a>
</div>

e aggiungere le opzioni prev e next al nostro script

[...]
next:   '#next',
prev:   '#prev',
[...]

In questo modo i due link porteranno sempre all’immagine precedente o successiva.

Da notare che entrambi i link sono contenuti nel div #navPhotos a questo viene assegnato un posizionamento assoluto e uno z-index elevato poichè jquery cycle utilizza la proprietà z-index per mostrare le immagini. Diventa dunque indispensabile settare uno z-index che sia sempre superiore al numero di immagini per poszionare i due link sopra lo slideshow.

Per vedere la demo clicca qui

Aggiungere una descrizione alle immagini

Per aggiungere una descrizione alle immagini è possibile sfruttare l’attributo alt del tag <img>.

Con l’aiuto dell opzioni before e after è possibile richiamare delle funzioni prima e dopo il caricamento dell’immagine.

Definiamo quindi una div #description dove andremo ad inserire le descrizioni

<div id="description">
</div>

E aggiungiamo al nostro script le opzioni after e before che richiameranno le funzioni onAfter e onBefore

[...]
before:  onBefore,
after:   onAfter,
[...]

Ora definiamo le funzioni onBefore e onAfter per caricare il testo contenuto nell’attributo alt del tag <img>

function onBefore() {
  $('#description p').fadeOut('1000');
}
function onAfter() {
  $('#description p').fadeIn('1000');
  $('#description').html('<p>' + this.alt + '</p>');
}

Queste due funzioni andranno definite al di fuori della funzione cycle poichè vengono valutate ad ogni caricamento della singola immagine.

Per il div #description è stata creata una regola css simile a #navPhotos in modo che la descrizione sia posta sopra lo slideshow con uno z-index superiore al numero di immagini presenti.

Per vedere una demo clicca qui

In conclusione

Come abbiamo visto jquery cycle mette a disposizione un numero elevato di opzioni per realizzare slideshow, è possibile inoltre aggiungere dei pulsanti per mettere in pausa o far ripartire lo slideshow, caricare contenuto diverso da immagini, settare un tempo di delay per sincronizzare più slideshow e customizzare i numerosi effetti presenti.

Per maggiori informazioni sulle possibilità di customizzazione esiste una sezione demo ed esempi sul sito di jquery cycle sicuramente molto utile.

Inoltre grazie alla gestione dello stile da css e al semplice markup è possibile creare valide alternative senza javascript per migliorarne l’accessibilità rendenfo questa una delle migliori soluzioni per realizzare slideshow in contesti statici e dinamici.

Firebug

E’ l’addon più gettonato di sempre, velocizza il lavoro e la verifica permettendo di analizzare nel dettaglio la pagina html, il dom e javascript. Uno strumento utile per html e css, permette infatti di analizzare un elemento della pagina e vedere quali regole sono attribuite e quali eredita. Per chi invece utilizza javascript mette a disposizione una comoda console che riporta errori e anomalie. Oltre a questo Firebug permette la modifica da browser dei css oltre ad una comoda rappresentazione del box model per valutare i parametri di ogni elemento. Uno strumento indispensabile quando si lavora con ajax anche se diventa eccessivo per la normale navigazione web.

link al sito del progetto

Web developer toolbar

Un ottimo addon dai molteplici utilizzi, consente di visualizzare separatamente javascript, css e html. Permette la modifica da browser di css e html con rendering immediato, analizza il peso della pagina fornendo un report sulle dimensioni dei files, compila automaticamente i campi di un form, valida pagine online e offline tramite il validatore w3c, permette l’anteprima a diverse risoluzioni e fornisce un righello per misurare in pixel ogni parte della pagina. Oltre a questo semplifica le normali operazioni da browser come disabilitare immagini o css e cancellare i cookie.

linka mozilla add-ons

Fireshot

E’ un addon per firefox che salva in formato png l’immagine del sito, ma non solo, permette l’aggiunta di note e commenti direttamente da browser salvando il tutto come immagine. L’opzione “capture entire page” permette di salvare un’immagine della pagina per intero e le opzioni di condivisione permettono di velocizzare la stampa, l’invio tramite mail o l’upload.

Link a mozilla add-ons

Tre ottimi strumenti per velocizzare il lavoro, se ancora non li usate non vi resta che provarli.

Obbiettivo più complesso è invece realizzare un layout con altezza che si adatti al browser. Questa operazione sicuramente non troppo comune ha il pregio (e soprattutto il difetto) di limitare il contenuto nell’altezza della finestra del browser.

Diventa quindi una scelta poco consigliata per garatire l’accessibilità dei contenuto, tuttavia può tornare utile per specifiche richieste che richiedono di emulare un full screen tipico dei siti in flash.

Per raggiungere in nostro obbiettivo è indispensabile far sì che il div contenitore della pagina mantenga un’altezza pari all’altezza della finestra del browser.

Cosa non fattibile settando semplicemente l’altezza dell’elemento al 100%, ma richiede che l’elemento genitore abbia settata un’altezza e che l’elemento in questione abbia un posizionamento assoluto.

body{
margin:0;
padding:0;
height:100%;
}

#content{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}

Grazie a questi parametri l’elemento si estende su tutta l’altezza della pagina rimanendo fuori dal flusso tradizionale con un posizionamento assoluto. Vedi l’esempio.

Per aggiungere un footer al nostro layout sarà sufficiente ridurre l’altezza dell’elemento precedente di pari valore all’altezza del footer ricordando di settare un posizionamento assoluto con bottom uguale a 0.

#footer{
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

In questo modo il footer rimarrà attaccato al fondo della finestra del browser anche al resize da parte dell’utente. Vedi esempio.

Come ultimo esempio vediamo come rendere centrato e a larghezza fissa il nostro layout.

Iniziamo settando delle larghezze a larghezza fissa mentre per centrare gli elementi non utilizziamo i margini laterali settati su auto bensì la proprietà left:50% in aggiunta ad un margine sinistro negativo pari alla metà della larghezza dell’elemento.

#content{
height:90%;
width:960px;
position:absolute;
top:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

#footer{
height:10%;
width:960px;
position:absolute;
bottom:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

In questo modo otteniamo un layout a larghezza fissa centrato con altezza al 100% e footer adiacente al margine inferiore della finestra del browser. Vedi l’esempio.

Note:

Questa soluzione non è consigliata per siti complessi in quanto il posizionamente assoluto rende maggiormente complessa l’impaginazione dei contenuti e come detto all’inizio mette a repentaglio l’accessibilità dei contenuti a risoluzioni ridotte.

La proprietà overflow:hidden; è stata inserita negli elementi per evitare che al ridimensionamento della finestra del browser l’altezza del contenuto comprometta il layout  ma non è indispensabile per rendere l’altezza fluida.

Per far sì che il footer della pagina sia sempre adiacente al margine inferiore della pagina è possibile utilizzare solo il posizionamento assoluto con la proprietà bottom:0; senza ricorrere ad altezze in percentuale.

Le altezze in percentuale come le larghezze vengono renderizzate convertendo la dimensione in percentuale dell’elemento in pixel, può quindi accadere di avere uno spazio bianco tra due elementi (come #content e #footer) dato da un arrotondamento approssimativo, per risolvere questo problema è possibile utilizzare il background del body per non rendere visibile questo spazio. Nell’esempio si è settato volontariamente un sfondo bianco per rendere visibile questa problematica.

In entrambi i casi dovresti pensare al fatto che prima o poi dovrai accertarti di tempi di caricamento, peso delle pagine e numero di elementi presenti.

Per fare questo ti occorrono stime certe da poter confrontare con il tuo target di utenti e valutare le possibili soluzioni.

Una soluzione rapida, precisa e molto dettagliata ce la fornisce webtestpage che mette a disposizione un comodo tool che restituisce dati molto precisi su tempi di caricamento, peso delle pagine e possibili ottimizzazioni.

Il sito offre anche la possibilità di vedere i rapporti di altri siti salvati in precedenza senza dover richiedere nuovamente l’analisi.

Se avete il dubbio che il vostro sito possa essere più veloce e più leggero allora vi conviene spendere qualche minuto su questo comodo servizio gratuito per valutare eventuali interventi in tempi brevi.

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori:  static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento relativo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che  ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.

Come prima cosa aggiungiamo un link nella pagina alla libreria di jquery.

<script type="text/javascript" src="javascript/jquery.js"></script>

Iniziamo il nostro codice con $(document).ready che attenderà il caricamento completo della pagina prima di eseguire il codice

$(document).ready(function() {

)};

Al suo interno iniziamo a definire la prima funzione

$("img").each(function() {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
$("<img>").attr("src", rollON);
});

Questa funzione salva il valore dell’attributo src nella variabile rollsrc per ogni immagine presente nella pagina, nella variabile rollON utilizza l’url dell’immagine e aggiunge la stringa “_over”. Nell’immagine dell’esempio cliccami.jpg diventa cliccami_over.jpg. Questa funzione serve per precaricare le immagini prima che siano utilizzate nelle successive funzioni.

$("a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig,"_over.jpg");
$(this).children("img").attr("src", imgsrcON);
}
});

La seconda funzione inizia all’over del mouse sul link, verifica che l’elemento <img> sia figlio dell’elemento <a> e salva in una variabile l’url, verifica se all’interno della variabile esiste la parte “_over” in caso negativo sostiutisce il nome dell’immagine da nomeimmagine.jpg a nomeimmagine_over.jpg. Questo serve per evitare che javascript ripeta l’effetto rollover se il mouse è già sopra l’immagine.

Come ultima funzione definiamo il rispristino dell’url con l’evento  mouseout

$("a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});

Sarà sufficiente questa funzione per applicare un’effetto rollover su ogni immagine linkata di una pagina. Basterà fare attenzione a salvare le immagini per l’effetto rollover con con lo stesso nome ed in aggiunta “_over” prima del formato del file.

Per un vedere lo script in azione vedi l’esempio.