Document Actions
ATGoogleVideo
Note: Return to tutorial view.
Primo approccio al prodotto
ATGoogleVideo è un prodotto per Plone che permette di integrare nel proprio sito web i video pubblicati su Google video e Youtube.
Da quanto dichiarano gli autori il prodotto è stato sviluppato per il periodico messicano La Jornada ed attualmente è utilizzato all'interno del sito.
ATGoogleVideo è parte di un progetto più vasto chiamato julius che si prefigge di creare un sistema per la pubblicazione di quotidiani online.
Google Video - http://video.google.com
E' un servizio gratuito di Google che permette di caricare filmati sui server web di Google e renderli disponibili a tutti. Gli utenti possono cercare e guardare i video direttamente da Google Video, così come scaricarli e inserirli nelle proprie pagine web.
Google Video vuole offrire un grande archivio per la ricerca gratuita dei video nonché distribuire filmati commerciali professionali come film o contenuti trasmessi in televisione (cfr. Wikipedia Google_Video).
Youtube - http://www.youtube.com
E' un famoso servizio di video sharing nato nel 2005. Il servizio permette ai propri utenti di caricare video on line e renderli disponibili su internet.
Attraverso Youtube possiamo caricare i nostri video, condividerli con i nostri amici e vedere i video pubblicati dagli altri utenti.
Proprio la larga partecipazione degli utenti rende Youtube differente da Google Video; il suo carattere comunitario, nonostante non giovi alla qualità dei video presenti, garantisce la condivisione dei propri video a chiunque (cfr. Wikipedia YouTube).
Stato del progetto
Lo sviluppo di ATGoogleVideo è attualmente in stato alpha, ma l'ultima release distribuita sul sito ufficiale di Plone, la 0.4rc, ha già tutte le carte in regola per poter essere utilizzato con profitto.
Release utilizzata
La release utilizzata per le nostre prove è l'ultima pubblicata sul sito ufficiale di Plone: la 0.4 release candidate. Questa versione, rilasciata nei primi mesi del 2007, si è concentrata verso l'integrazione del supporto ai video di Youtube e l'internazionalizzazione del prodotto.
Home page del progetto
Documentazione
La documentazione, come in molti progetti di questo tipo, è un po' carente. All'interno del sito web del progetto si trovano alcuni documenti sullo sviluppo in generale, ma poche cose riguardanti questo prodotto in particolare. Consiglio comunque una visita alla mailling list dedicata da Sourceforge.
Repository
http://julius.jornada.com.mx/browser/code/ATGoogleVideo
Bug tracker
http://julius.jornada.com.mx/report
TODO/Roadmap
- Migliorare l'accessibilità del prodotto attraverso l'uso di Unobtrusive Flash Objects
- Integrazione con altri prodotti Plone (es. CompositePack)
- Validazione dell'id del video al momento della creazione e della modifica
- Portlet contenente l'ultimo video pubblicato
- Traduzione in più lingue del prodotto
Requisiti prodotto
Il prodotto non richiede particolari software, è sufficiente avere una delle ultime versioni di Zope e Plone. L'installazione avviene come per la maggior parte dei prodotti di Plone: è sufficiente copiare i file presenti nella release di ATGoogleVideo nella cartella Products della propria istanza Zope e riavviare il server.
Attraverso il pannello di controllo di Plone raggiungere il pannello per l'inserimento e la rimozione dei prodotti e scegliere ATGoogleVideo, attraverso l'apposita checkbox e cliccare su 'installa'.
La disinstallazione può avvenire dalla stesso pannello di controllo di Plone.
Oggetti creati nel sistema
AtgoogleVideo crea all'interno di Plone un nuovo content type che gestisce la visualizzazione dei video attraverso il player flash fornito da Youtube o Google video.
In automatico viene creato un cercatore nella cartella principale di Plone di nome videos che seleziona i video pubblicati sul portale e li ordina secondo la data di pubblicazione.
Le cose più interessanti le troviamo però tra gli skin del portale, dove vengono create tre sottodirectory:
- atgooglevideo_images, contenente le icone utilizzate dal prodotto;
- atgooglevideo_styles, contenente alcuni stili aggiuntivi per la visualizzazione del player flash all'interno del portale;
- atgooglevideo_templates, contenente i templates e gli script per la visualizzazione di ATGoogleVideo.
Piattaforma test
Per i test svolti in questo articolo è stata usata la seguente configurazione di sistema senza alcun tipo di modifica al software originale:
- Linux Debian 4.0 Etch
- Zope 2.9.7-final
- Python 2.4.4
- Plone 2.5.3 final
Tutorial
In questo breve tutorial introdurremo all'uso di ATGoogleVideo partendo dalla sua installazione all'interno di Plone e proseguendo con l'analisi dele varie possibilità offerte dal prodotto, senza apportare modifiche di alcun tipo alla versione scaricata.
Installazione
Una volta copiati i file nella directory Products della nostra istanza Zope, possiamo accedere al pannello di controllo di Plone seguendo il link 'configurazione del sito' (site setup nella traduzione inglese). Cliccando sul link 'Inserimento/rimozione di prodotti' troviamo l'elenco dei prodotti installabili nel nostro Plone.
Nell'elenco dei prodotti installabili troveremo ATGoogleVideo 0.4 (Release Candidate), selezioniamolo tramite l'apposita checkbox e clicchiamo sul pulsante 'installa'.
Torniamo quindi nella pagina principale del nostro sito web; la prima novità che possiamo notare è la presenza di una nuova voce nel menu superiore di Plone (globalnav) dal nome 'videos'. Questa scheda corrisponde ad un cercatore creato in automatico dal ATGoogleVideo, che riunisce al suo interno tutti i video presenti sul nostro sito in stato 'pubblicato'.
Inserire un video
Per inserire un nuovo video è sufficiente selezionare la voce 'google video' all'interno del menu 'aggiungi alla cartella'. In questo modo apparirà una maschera in cui potremo aggiungere tutte le informazioni necessarie.
- Titolo: titolo del nostro video
- Descrizione: breve descrizione del contenuto del video
- Docid: id corrispondente al video di Youtube o Google Video che vogliamo inserire
- Quality: qualità del filmato flash che vogliamo impostare; è possibile scegliere tra: low, hight, autolow, autohight, best.
- Autoplay: selezionare questa opzione se si vuole che il video inizi automaticamente quando apriamo la pagina contenente il video
- Immagine: anteprima del video
- Contenuti correlati: altri contenuti correlati al nostro video
Le informazioni da inserire sono piuttosto semplici, l'unica che necessita un minimo di spiegazione è docId.
Per conoscere l'id del video che vogliamo inserire è sufficiente controllare l'indirizzo del video stesso presente su Youtube o Google Video.
Google video id
Per inserire un video di Google Video dobbiamo raggiungere la pagina principale all'indirizzo http://video.google.it/ e cercare il video che ci interessa.
Una volta trovato, cliccando sull'anteprima dello stesso, entreremo nella pagina di visualizzazione del video. Per esempio http://video.google.it/videoplay?docid=2768368762284821227
L'id da inserire nel campo corrispondente di ATGoogleVideo è il numero presente nell'indirizzo dopo l'uguale; in questo caso 2768368762284821227
Youtube id
Per inserire un video presente su youtube il procedimento è simile: cerchiamo il video che ci interessa all'interno del sito web http://www.youtube.com e clicchiamo sull'anteprima per visualizzarlo. L'indirizzo della pagina di visualizzazione avrà una forma simile alla seguente: http://www.youtube.com/watch?v=N3OVFWCRx9o
Anche in questo caso l'id da inserire è la sigla presente nell'indirizzo dopo l'uguale: in questo caso N3OVFWCRx9o
Una volta inseriti i valori corretti e confermate le modifiche avremo inserito il nostro video all'interno di Plone. AtGoogleVideo riconoscerà in automatico se il video proviene da Youtube o da Google Gideo.
Cliccando sul link corrispondente al video appena inserito potremo notare che nella parte destra della pagina di visualizzazione viene inserita automaticamente una nuova portlet che contiene gli ultimi video inseriti nel portale.
Una volta pubblicato il video lo ritroveremo anche all'interno della scheda 'videos', che raggruppa tutti i video pubblicati nel portale.
Link in Kupu
Un'ulteriore possibilità offerta dal prodotto è l'inserimento, attraverso Kupu, di un collegamento ai video pubblicati sul portale.
Per ottenere questo, quando inseriamo un nuovo contenuto in Plone, clicchiamo sull'icona 'insert internal link' 
di Kupu e selezioniamo il video che ci interessa.
Portlets
Per concludere, consiglio una piccola modifica che permette di visualizzare una portlet con gli ultimi video inseriti nel portale su tutte le pagine di Plone.
Entriamo nella ZMI e posizioniamoci alla radice della nostra installazione di Plone. Clicchiamo sulla scheda properties ed aggiungiamo la seguente riga alla proprietà 'left_slots' oppure 'right_slots':
/here/portlet_recent_google_videos/macros/portlet
In questo modo, ritornando a Plone, vedremo in ogni pagina una nuova portlet contenente gli ultimi video inseriti.
Personalizzazioni
In questa sezione del tutorial analizzeremo alcune modifiche al prodotto originale che permettono la personalizzazione dei contenuti inseriti con ATGoogleVideo.
Personalizzare la vista della sezione videos.
Tra i vari templates che il prodotto installa in Plone (portal_skins/atgooglevideo_templates/) troviamo un template per la visualizzazione dell'anteprima dei contenuti video:
googlevideo_folder_summary_view
Nonostante questa vista non sia più presente nella versione attualmente in sviluppo di AtGoogleVideo, mi sembra un template interessante che permette una personalizzazione di buon effetto per la sezione video di Plone.
La vista in oggetto consente di modificare la visione di contenuti presenti nella scheda 'videos' (o di una qualisasi altra cartella), visualizzando l'anteprima dell'ultimo video inserito in Plone.
Per utilizzare la nuova vista è possibile utilizzare due strade: la prima consiste nell'aggiunge la nuova vista solamente al cercatore 'videos', la seconda è fare in modo che sia permesso rendere disponibile la nuova vista ad un determinato tipo di contenuto di Plone.
Attraverso la ZMI di Zope selezioniamo la voce videos, entriamo nella scheda properties e modifichiamo la proprietà layout impostandola a questo valore:
googlevideo_folder_summary_view
A questo punto torniamo a Plone e clicchiamo sulla scheda videos: la visualizzazione del contenuto della sezione è cambiata, l'ultimo video pubblicato viene visualizzato direttamente in questa pagina mentre i successivi sono elencati al fondo.
Per rendere selezionabile la nuova vista direttamente dal menu di Plone possiamo modificare le proprietà del content type cercatore (Smart Folder) dalla ZMI.
Entriamo nella sezione portal_types e clicchiamo sul contenuto che vogliamo modificare: Topics (Smart Folder). Nella scheda properties, già selezionata di default, troveremo la proprietà Available view methods a cui possiamo aggiungere una nuova riga contente il nome della vista googlevideo_folder_summary_view
Una volta tornati a Plone possiamo entrare nella sezione videos e selezionare la nuova vista di default dal menu vista.
La vista che abbiamo selezionato ha però un grosso problema, risolvibile con una piccola modifica ai templates originali di ATGoogleVideo: l'anteprima funziona solamente con i video di Google Video. Questa limitazione è piuttosto fastidiosa in quanto non permette di visualizzare i video contenuti in Youtube.
Con la versione 0.4 di ATGoogleVideo è stato inserito il supporto a Youtube attraverso l'uso di una macro dal nome googlevideo_macros che imposta un differente codice HTML a seconda della provenienza del video (la distinzione viene fatta attraverso la verifica del parametro docid che per Google Video è numerico).
Questa macro non è stata utilizzata però all'interno della vista da noi selezionata: è questo il motivo del non corretto funzionamento della vista.
Per ovviare al problema possiamo apporre alcune piccole modifiche al template originale del prodotto; la modifica può avvenire sia direttamente da filesystem (Products/ATGoogleVideo/skins/atgooglevideo_templates) sia attraverso la ZMI di Zope. In questo tutorial utilizzeremo la ZMI.
Entriamo nella sezione portal_skin dalla ZMI di Zope e clicchiamo su atgooglevideo_templates.
All'interno di questa cartella dovremo modificare i seguenti file:
- googlevideo_folder_summary_view
- googlevideo_macros
Selezioniamo il primo file e clicchiamo sul pulsante customize, ne verrà creata una copia all'interno della cartella custom in portal_skins.
L'unica modifica da apportare a questo file consiste nel permettere l'utilizzo della googlevideo_marcos che supporta la visualizzazione dei video Youtube.
Aggiungiamo il seguente codice nell'intestazione dell'HTML (dalla riga 14):
<metal:cssslot fill-slot="css_slot">
<style type="text/css" media="screen"
tal:content="string: @import url($portal_url/atgooglevideo.css);">
</style>
</metal:cssslot> Questo permetterà l'inserimento nella nostra vista del css utile alla visualizzazione del div contenente l'anteprima del video.
Successivamente sostituiamo l'intera sezione del file (dalla riga 75 alla 98):
<tal:first tal:condition="repeat/item/start"
tal:define="video python:item.getObject();
movie string:http://video.google.com/googleplayer.swf?docId=${video/docId};
quality video/quality;
FlashVars python:'playerMode=embedded%s' % test(video.autoPlay,'&autoPlay=true','')">
<h3 tal:content="video/Title">Video Title</h3>
<p class="documentDescription" tal:content="video/Description">Video Description.</p>
<object tal:attributes="data movie;"
type="application/x-shockwave-flash"
data="http://video.google.com/googleplayer.swf?docId=1234567890123456789"
width="400"
height="326">
<param tal:attributes="value movie"
name="movie"
value="http://video.google.com/googleplayer.swf?docId=1234567890123456789" />
<param name="allowScriptAcess" value="sameDomain" />
<param tal:attributes="value quality"
name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param tal:attributes="value FlashVars"
name="FlashVars" value="playerMode=embedded" />
</object>
</tal:first> con:
<tal:first tal:condition="repeat/item/start"
tal:define="video python:item.getObject();
docId video/docId;
quality video/quality;
autoPlay video/autoPlay">
<h3 tal:content="video/Title">Video Title</h3>
<p class="documentDescription" tal:content="video/Description">Video Description.</p>
<metal:video use-macro="context/googlevideo_macros/macros/video" />
</tal:first> Una volta salvate le modifiche possiamo tornare alla direcotry atgooglevideo_templates per modificare l'altro file: googlevideo_macros.
Selezioniamo il file e clicchiamo sul pulsante customize per farne una copia modificabile nella cartella custom.
La macro prende le variabili necessarie alla visualizzazione dei video da context, ma funziona solo fino a quando visualizziamo direttamente il video dal portale.
Se ricerchiamo i video attraverso un cercatore, queste variabili non si trovano più nell'ambiente context e perciò dobbiamo modificare il contenuto della macro per tener conto di questa differenza.
In altre paole dobbiamo eliminare ogni riferimento a context all'interno del file e creare delle variabili locali ad hoc che vengano valorizzate correttamente a seconda di dove viene richiamata la macro.
Modifichiamo quindi il file in questo modo:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
i18n:domain="ATGoogleVideo">
<!-- more information about attributes in: http://www.adobe.com/go/tn_4150 -->
<body>
<metal:video metal:define-macro="video"
tal:define="docId context/docId | docId;
isGoogle python:docId[1:].isdigit();
quality context/quality | quality;
autoPlay context/autoPlay | autoPlay;">
<tal:google tal:define="movie string:http://video.google.com/googleplayer.swf?docId=${docId};
FlashVars python:'playerMode=embedded%s' % test(autoPlay,'&autoPlay=true','');">
<object tal:attributes="data movie;"
type="application/x-shockwave-flash"
data="http://video.google.com/googleplayer.swf?docId=1234567890123456789"
class="googlevideo-player"
tal:condition="isGoogle">
<param tal:attributes="value movie"
name="movie" value="http://video.google.com/googleplayer.swf?docId=1234567890123456789" />
<param tal:attributes="value quality"
name="quality" value="best" />
<param tal:attributes="value FlashVars"
name="FlashVars" value="playerMode=embedded" />
<param name="wmode" value="transparent" />
</object>
</tal:google>
<tal:youtube tal:define="movie string:http://www.youtube.com/v/${docId};
FlashVars python:'playerMode=embedded%s' % test(autoPlay,'&autoPlay=true','');">
<object tal:attributes="data movie;"
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/ABCDEFGHIJ"
class="youtube-player"
tal:condition="not:isGoogle">
<param tal:attributes="value movie"
name="movie" value="http://www.youtube.com/v/ABCDEFGHIJ" />
<param tal:attributes="value quality"
name="quality" value="best" />
<param tal:attributes="value FlashVars"
name="FlashVars" value="playerMode=embedded" />
<param name="wmode" value="transparent" />
</object>
</tal:youtube>
</metal:video>
</body>
</html> Una volta salvate le modifiche, ritornando alla sezione video del nostro Plone, possiamo constatare che la vista, così modificata funzionerà anche con i video di Youtube.
Anteprime - thumbnail
Un'altra modifica piuttosto semplice riguarda l'utilizzo dei thumbnail dei video già presenti su Youtube invece di inserire un'ulteriore immagine dentro Plone.
Questa soluzione nasce dalla mia pigrizia nel ritagliare ogni volta un'immagine nuova per ogni video inserito; è infatti molto semplice utilizzare direttamente le immagini di Youtube piuttosto che creare una nuova anteprima ogni volta. Purtroppo non ho riscontrato la stessa semplicità utilizzando le anteprime generate da Google Video, ma chissà, un giorno potrà essere più facile e, in ogni caso, sarà sempre possibile inserire un thumbnail personalizzato per i nostri video.
Per ora la soluzione consiste nel modificare la vista utilizzata in precedenza per la sezione videos e creare un piccolo script in Python che selezioni l'anteprima.
All'interno del file googlevideo_folder_summary_view (circa a riga 94) bisogna sostituire il seguente tag:
<img src="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni" alt=""
tal:condition="item_object/image_thumb|nothing"
tal:replace="structure python: item_object.tag(scale='thumb', css_class='tileImage')" /> con:
<img tal:define="thumb python:here.get_video_thumb(item_object)"
tal:condition="thumb"
tal:replace="structure thumb" /> Il nuovo tag verifica, attraverso lo script che creeremo più avanti, la presenza dell'anteprima permettendone poi la visualizzazione.
All'interno della directory custom creiamo ora un script Python a cui daremo il nome 'get_video_thumb'. Questo si occuperà della creazione del tag IMG
# verifico se ho già inserito un thumbnail in plone
if (item.getImage()):
# se esiste creo il tag img direttamente
return item.tag(scale='thumb', css_class='tileImage')
else:
# trovo il parametro docId e il titolo del video
video_id=getattr(item,'docId')
video_title=getattr(item,'title')
# se l'id non e' numerico vuol dire che è un video di youtube
if (not video_id.isdigit()):
# in questo caso creo il tag immagine corretto per prendere da youtube l'anteprima
img="<img src="http://img.youtube.com/vi/%s/2.jpg" alt='%s' title='%s' class='tileImage' />" % (video_id, video_title, video_title)
return img
else:
# se il video proviene da google video non posso avere lìanteprima
return False Aggiungiamo 'item' nel campo 'Parameter List' e salviamo il file.
Se tutto è andato a buon fine, possiamo tornare alla nostra sezione videos. Nel caso in cui non venga inserita alcuna immagine per i video presi da Youtube avremo comunque un anteprima dei filmati direttamente dal sito.
Modifiche alla portlet video recenti
A questo punto manca solamente una cosa per concludere la personalizzazione di ATGoogleVideo.
Dopo aver personalizzato la vista della sezione videos e aver trovato il modo di risparmiare tempo nell'immissione delle anteprime dei nostri video, non ci resta che modificare la portlet creata dal prodotto in modo che visualizzi non solo il link ai video ma anche l'anteprima.
Per fare ciò dobbiamo modificare un file contenuto nella solita directory (atgooglevideo_templates): portlet_recent_google_videos
Selezioniamo il file da modificare e clicchiamo sul pulsante customize.
Tra la riga 33 e la riga 47 troviamo il contenuto dei collegamenti ipertestuali della portlet che visualizza i cinque video più recenti.
Sostituiamo:
<div tal:attributes="class item_type_class">
<a href="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni"
tal:attributes="href string:${obj/getURL}/view;
title obj/Description;
class string:$item_wf_state_class visualIconPadding tile">
<tal:title content="obj/pretty_title_or_id">
New video published!
</tal:title>
<span class="portletItemDetails"
tal:content="python:here.toLocalizedTime(obj.EffectiveDate)">11/09/2006</span>
</a>
</div>
con:
<div>
<a href="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni"
tal:attributes="href string:${obj/getURL}/view;
title obj/Description;
class string:$item_wf_state_class tile">
<img tal:define="thumb python:here.get_video_thumb(obj.getObject())"
tal:condition="thumb"
tal:replace="structure thumb"
tal:attributes="style string:float:none"
/>
<tal:title content="obj/pretty_title_or_id">
New video published!
</tal:title>
</a>
</div> Una volta salvate le modifiche apportate avremo una portlet che riunisce gli ultimi video pubblicati attraverso la loro anteprima.
Potete trovare le modifiche al prodotto nel file allegato alla guida (Personalizzazioni ATGoogleVideo).
Possibili sviluppi
Youtube offre alcune potenti funzionalità per gli sviluppatori; all'indirizzo http://www.youtube.com/dev troviamo la documentazione necessaria per sviluppare nuove applicazioni integrate che sfruttano le potenzialità del xml.
Attraverso la registrazione di un developer id è possibile interrogare in differenti modi il database di Youtube, e in questo modo ricevere in risposta un file xml maneggiabile per ottenere le informazioni desiderate. E' possibile quindi ottenere liste complete dei filmati selezionati per autore, per tag, per playlist e così via.
Analisi del codice
Supporto multilingua
Dalla versione 0.4 ATGoogleVideo supporta i18n, anche se manca ancora la traduzione in italiano. Nella versione attualmente in sviluppo questa è stata aggiunta da Enzo Cesanelli.
Gli impazienti possono scaricare i file dal repository ufficiale e copiarli nella directory i18n di ATGoogleVideo.
I file necessari sono i seguenti:
- atgooglevideo-plone-it.po
- atgooglevideo-it.po
L'indirizzo del repository è: svn://julius.jornada.com.mx/var/lib/svn/code/ATGoogleVideo/trunk
Skin / standard XHTML-CSS
L'HTML generato dal prodotto ATGoogleVideo è considerato valido dal W3C. Il CSS aggiunto dal prodotto non presenta aspetti negativi.
La versione 0.5 di ATGoogleVideo promette l'integrazione del prodotto con UFO (Unobtrusive Flash Objects) che garantisce una maggiore accessibilità dei filmati Flash.
