Come implementare in un sito o in un blog di Blogger o Wordpress una foto panoramica a 360 gradi scattata con il cellulare permettendo ai lettori di navigarla.
Le foto panoramiche a 360 gradi sono una funzionalità accessibile da moltissimi cellulari tramite opportune applicazioni. Si tratta in sostanza di una serie di scatti effettuati con criterio per mostrare tutto l'ambiente circostante a chi scatta la foto.
L'immagine risultante potrà essere salvata come piatta, e allora non sarà altro che una immagine JPG con l'unione di tutti i fotogrammi, oppure potrà essere elaborata dalla applicazione e chi la visualizza tramite i social che la supportano come Facebook, vi potrà interagire modificando con il cursore o con il dito il punto di vista per esplorare quello che si vede in tutte le direzioni.
I siti web in linea di massima non supportano tali foto e per mostrarne una dovremmo scegliere la versione piatta in cui non si può navigare. Una soluzione può essere quella di convertire l'immagine a 360° in un video. L'immagine sarà convertita in un file WebP che potrà essere riprodotto con VLC Media Player e che potrà essere convertito in un video .MP4 da postare in un sito con Google Drive, con Dropbox o con un player HTML5. Ovviamente lo si può anche caricare su Youtube o su Vimeo.
Il navigatore però non potrà interagire con il video e per visualizzare tutto l'ambiente dovrà aspettare tutta la riproduzione del filmato. In questo articolo vedremo come usare un servizio esterno per postare in una pagina web una foto panoramica permettendo al lettore di potervi interagire.
Si apre Momento360 e si clicca su Try the Beta. Si digita nome, cognome, indirizzo email, password, si mette la spunta all'accettazione dei termini del servizio quindi si si va su Sign Up. Ci verrà inviato un messaggio in cui ci sarà un link su cui cliccare per confermare l'indirizzo email e per verificare la registrazione.
Si va su Get Started quindi su Upload Your 360s per le semplici istruzioni sull'utilizzo del servizio. Di default l'immagine caricata sarà privata. Si clicca sulla icona della macchina fotografica in alto a destra o su Upload e si seleziona la nostra foto che dal cellulare dovremo trasferire nel computer con app come Dropbox e Astro.
Dopo il caricamento si clicca sopra alla foto per visualizzarla a tutta pagina. Si va sulla icona della condivisione quindi si clicca su Share or Embed a Link quindi su Create a link che dovrà essere copiato. Questa operazione farà sì che la foto da privata diventi pubblica e quindi visualizzabile da tutti.
Si usa quindi un codice che abbia questa struttura di base
<iframe height="350px" width="100%" allowfullscreen="true" src="Link copiato da Momento360"> </iframe>dove al posto di Link copiato da Momento360 si incolla quello che ci è stato fornito. I due valori in rosso possono essere personalizzati così come il tutto schermo (false al posto di true se non lo si vuol concedere).
La parte finale dell'URL, quella dopo il punto interrogativo compreso, serve per il tracciamento dei link e quindi può essere tralasciata. Ci sarà una riproduzione automatica della foto panoramica ma con la possibilità per il lettore di navigarci sopra con il cursore o con il dito. Una larghezza in percentuale fa diventare Responsive l'frame.
Il codice dovrà essere incollato in Modalità HTML in un post di Blogger, Wordpress o di altra piattaforma.
La Demo è stata inserita in CodePen e potrà essere navigata dal lettore.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy