Inserire Slideshow di Flickr con codice XHTML valido
Visite: 883 | 
Stampa
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.
Articoli Correlati
Eremo di San Colombano
L'Eremo di San Colombano si trova nel comune di Trambileno, a pochi minuti da Rovereto
Per raggiungere l'Eremo occorre prendere la strada per Vicenza da Piazza Podestà, nel centro di Rovereto. Dopo aver percorso pochi chilometri, occorre svoltare a destra in una piccola stradina in discesa, con l'indicazione per l'Eremo. Parcheggiata la vettura, bisogna percorrere un [...]
drago, eremo di san colombano, fiume leno, flickr, fotografie, galleria fotografica, leggenda, leno, rovereto, san colombano, trambileno, Trentino
Grotta Cascata Varone
A pochi chilometri da Riva del Garda, salendo lungo la Strada Statale 421 verso Ponte Arche, si trova la Grotta Cascata Varone.
L'architetto Giancarlo Maroni, che firmò il progetto del Vittoriale degli Italiani a Gardone Riviera - la residenza sul lago di Garda di Gabriele D'Annunzio -, realizzò nei primi anni del '900 la costruzione che [...]
acqua, cascata, escursione, gita, natura, Trentino
Val Venegia, le sorgenti del Travignolo e la Baita Segantini
Gita: media
Quota massima raggiunta: 2200 m
Dislivello: 430 m circa (da Malga Venegia)
Tempi: ore 1,30 (sola andata)
Una breve gita per ricominciare a passeggiare in montagna. La Val Venegia è un'incantevole luogo ai piedi delle Pale di San Martino. L'arrivo, a 2200 metri circa, è la Baita Segantini, adagiata proprio di fronte al Cimone della Pala.
Il tempo non è dei migliori. La temperatura è relativamente bassa. A Predazzo il termometro segna 14°C, mentre all'arrivo a Baita Segantini saranno al massimo 9-10. Per essere quasi Ferragosto, non è male...
In Val Venegia giungiamo seguendo la strada che da Predazzo porta a Passo Rolle, superando il Parco Naturale di Paneveggio. Al bivio verso Passo Valles si gira a sinistra.
baita segantini, cimone della pala, escursione, malga venegia, malga venegiotta, pale di san martino, passeggiata, trekking, Trentino, val venegia
Il sentiero Federico Augusto e la Val Duron
Gita: lunga
Quota massima raggiunta: 2300 m
Dislivello: in salita 100 m; in discesa circa 900 m
Tempi: ore 4,30 circa
Dopo aver affrontato la passeggiata della Val Venegia, ci apprestiamo a fare un altro bel giretto sulle Dolomiti, proprio sotto al maestoso gruppo del Sassolungo.
Il sentiero è praticamente pianeggiante, tranne per la ripida discesa che dal Rifugio Sassopiatto [...]
campitello, escursione, federico augusto, passeggiata, sassolungo, Trentino, val di fassa, val duron
Web design: inserire immagini segnaposto nei layout di siti Internet
Quando si deve effettuare la presentazione del layout di un sito Internet, solitamente si creano una o più immagini segnaposto (o placeholder in inglese) da utilizzare all'interno del codice. In fase di realizzazione, poi, si andrà a sostituire l'immagine segnaposto con quella definitiva.
Ma per non utilizzare una semplice immagine gif della dimensione di 1x1 pixel [...]
app, applicazione, internet, online, placeholder, segnaposto, Web, Web Design
Ottimo articolo interessante per chi come me deve inserire uno slide e volevo usare proprio flickr! Vorrei sapere se è possibile attivare lo slide in automatico, cioè nel momento in cui viene caricata la pagina la sequenza parte automaticamente.
Grazie per la collaborazione
Ciao Edoardo,
purtroppo il codice per lo slideshow di Flickr non prevede ancora l’autoplay.
Quindi, fino a quando non si decideranno ad inserire questa opzione, per far partire lo slideshow occorre cliccare sul grande pulsante centrale.
grazie!!
ho trovato questa soluzione, potrebbe interessarvi!!
http://fabiocavassini.com.ar/SlideShowGenerator.html
ciao
Il problema è che quel sistema non è valido e produce 76 errori!
Certo, non a tutti interessa la validazione del codice, ma se i browser inizieranno ad essere più “ligi” alle direttive del W3C, allora le pagine contenenti troppi errori non saranno visibili correttamente.
Grazie !!