Blog

05 gennaio 2010 | 0 commentiInserire Slideshow di Flickr con codice XHTML valido

Sin dalla sua introduzione, il codice di Flickr per realizzare degli Slideshow ha avuto dei problemi per chi, come molti webdesigner, era attento alla validazione del codice.

Innanzitutto, con XHTML - ma anche con il suo predecessore HTML, non è possibile inserire un oggetto in un documento web utilizzando il tag «embed» perché non è un argomento standard accettato dal consorzio W3C (World Wide Web Consortium).

Pertanto, per cominciare, diamo un'occhiata a come inserire uno slideshow nel nostro sito Internet.

Passaggio 1: Collegarsi a Flickr

Ovviamente, il primo passo è quello di collegarsi al proprio spazio su Flickr.

Passaggio 2: Selezionare il set da mostrare

Scegli il set da mostrare. Nel mio esempio ho selezionato il set contenente le fotografie scattate a Castel Toblino.

Dalla pagina delle miniature, cliccate sul pulsante Slideshow, posizionato in alto a destra.

Passaggio 3: Impostare lo slideshow

Nella pagina successiva si può vedere le fotografie nello Slideshow a tutto schermo.

Però, per il nostro scopo, occorre personalizzare le dimensioni delle fotografie e, ovviamente, validare il codice proposto da Flickr.
Nell'angolo in alto a destra, quindi, dobbiamo scegliere Condividi.
A questo punto si apre una finestra pop-up, che permette la condivisione dello Slideshow proposto.

Scegliere la voce Personalizza codice HTML.
In questo modo potremo controllare meglio i parametri necessari per l'inserimento nel nostro sito Internet.

Passaggio 4: Personalizza il codice HTML

La pagina che si apre è suddivisa in 3 parti differenti.

La parte 1 serve per impostare la dimensione dello Slideshow. Possiamo utilizzare una delle 4 dimensioni proposte automaticamente da Flickr (piccolo: 400x300 pixel; medio: 500x375 pixel; grande: 700x525 pixel; extra-large: 800x600 pixel) oppure inserire la dimensione che preferiamo nelle apposite caselle.
Scegliendo questa soluzione, consiglio di selezionare il box di spunta Mantieni rapporto di formato. In tal modo, basta inserire una sola delle dimensioni volute.
Per occupare interamente lo spazio nel mio sito, inserisco 620 nella casella di sinistra. In automatico Flickr mi fornisce l'altezza dello Slideshow: 465 pixel.

La parte 2 mostra l'anteprima dello Slideshow con le impostazioni selezionate.

Nella parte 3 viene fornito il codice da inserire nel sito Internet.

Però, come detto in precedenza, tale codice non è validato e restituisce molti errori.

Comunque, copiamo il codice ed apriamo un editor di testo (come Notepad per PC o TextEdit per Macintosh). Incolliamo il testo fornito da Flickr e apprestiamoci agli ultimi passaggi.

Passaggio 5: creiamo un codice per lo Slideshow valido in XHTML

Qui sotto c'è il codice non valido fornito da Flickr:

<object width="620" height="465">
<param name="flashvars" value="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2F&set_id=72157603642947711&jump_to="></param>
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param>
<param name="allowFullScreen" value="true"></param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2F&set_id=72157603642947711&jump_to=" width="620" height="465"></embed>
</object>

Adesso dobbiamo riorganizzare il codice, inserire due piccole porzioni di codice (data= nella riga dell'object e uno slash / nell'ultima riga dei parametri), cancellare i tag «embed» è «/embed». Inoltre occorre trasformare tutti i caratteri & in &.

Quindi il codice risultante per l'esempio sopra mostrato è il seguente:

<object width="620" height="465" type="application/x-shockwave-flash" data="http://www.flickr.com/apps/slideshow/show.swf?v=71649">
<param name="flashvars" value="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Fsets%2F72157603642947711%2F&set_id=72157603642947711&jump_to="></param>
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" /></object>

Opzionale: Validiamo anche il codice per lo Slideshow dei Tag (o Etichette)

I passaggi da 1 a 4 sono gli stessi, solo che invece di selezionare un particolare set, scegliamo un Tag (o Etichetta) applicato ad un determinato gruppo di fotografie.
Nel mio caso, ho scelto l'etichetta Dolomiti.

Questo è il codice fornito in automatico da Flickr:

<object width="620" height="465">
<param name="flashvars" value="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2F&user_id=9338046@N04&tags=dolomiti&jump_to=&start_index="></param>
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param>
<param name="allowFullScreen" value="true"></param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2F&user_id=9338046@N04&tags=dolomiti&jump_to=&start_index=" width="620" height="465"></embed>
</object>

e questo, in base alle modifiche riportate nel Passaggio 5, è il codice XHTML valido per lo Slideshow di Flickr relativo ad un Tag:

<object width="620" height="465" type="application/x-shockwave-flash" data="http://www.flickr.com/apps/slideshow/show.swf?v=71649">
<param name="flashvars" value="offsite=true&lang=it-it&page_show_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2Fshow%2F&page_show_back_url=%2Fphotos%2Fquerin%2Ftags%2Fdolomiti%2F&user_id=9338046@N04&tags=dolomiti&jump_to=&start_index="></param>
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" /></object>

Risultato delle modifiche

Ecco come si presentano gli Slideshow con i codici appositamente modificati:

Set Castel Toblino

Tag Dolomiti

Per vedere se il codice viene validato correttamente, è possibile utilizzare il sito Validator W3C.