Come includere oggetti Flash in Plone
Come includere oggetti Flash in Plone e mantenere la validazione XHTML
Esistono diversi tutorial il rete su come fare ad includere degli oggetti flash in Plone ma nessuno di quelli che ho trovato tengono presente l'aspetto accessibilià. Non parlo dell'accessibilità dell'oggetto Flash stesso che potrà essere accessibile o meno a seconda di come è stato costruito, ma parlo del codice che plone produce per rendere visibile l'oggetto.
L'esempio classico è l'inclusione in Plone di un filmato YouTube.
Tralasciando i cattivi esempi ecco i passi da seguire per ottenere un codice XHTML valido:
- Sul nostro sito Plone andiamo a preparare l'ambiente:
-
dal pannello di configurazione accediamo a Filtri HTML
http://[miosito]/@@filter-controlpanel
- ora si possono visualizzare tutti i tag considerati pericolosi, nella sezione "Tag pericolose" spuntare "object" e cliccare sul pulsante Remove selected items (eh si questa stringa non è stata ancora tradotta...)
- dalla sezione "Tag eliminate" dobbiamo spuntare "object" e "param" e cliccare sul pulsante Remove selected items (quello appena sotto la lista Tag eliminate)
- ora, una volta verificato che i tag "object" e "param" sono stati eliminati dalle 2 liste "Tag pericolose" e "Tag eliminate", clicchiamo sul pulsante Conferma le modifiche
- Accendendo ora alla ZMI e poi a portal_transforms - safe_html, nella pagina
http://[miosito]/portal_transforms/safe_html/manage_main
cerchiamo param nella lista valid_tags e nella colonna di destra sostituiamo "1" con "0" (zero).
Salviamo le modifiche cliccando sul tasto Invia Richiesta in basso - Sempre dal pannello di configurazione accediamo a "Visual Editor" - "Barra degli strumenti"
http://[miosito]/kupu_library_tool/zmi_toolbar
- andiamo a spuntare il checkbox a destra di "Embed tab in External link drawer" per abilitare in kupu la possibilità di inserire codice html tramite il pulsante "Inserisci un collegamento Esterno". Clicchiamo sul pulsante Salva in basso per confermare la modifica
-
dal pannello di configurazione accediamo a Filtri HTML
- Una volta caricato il filmato su YouTube viene proposto un codice da inserire nelle nostre pagine tipo questo:
<object width="425" height="349" ><param name="movie" value="http://www.youtube.com/v/f7OLg1AZvr4&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&border=1" > </param><param name="allowFullScreen" value="true" ></param><embed src="http://www.youtube.com/v/f7OLg1AZvr4&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349" ></embed></object> - Da questa stringa ricaviamo dal tag object le dimensioni: width e height, e tutti i tag param
- Ora trasformiamo il codice in questo modo:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/f7OLg1AZvr4&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&border=1" class="youtube" ><param name="movie" value="http://www.youtube.com/v/f7OLg1AZvr4&hl=en&fs=1&rel=0&color1=0x234900&color2=0x4e9e00&border=1" /><param name="allowFullScreen" value="true" /></object> - Praticamente:
- Spostiamo l'attributo type dal tag embed al tag object
- Aggiungiamo l'attributo data al tag object e copiamo l'URL del filmato (nell'URL del filmato sostituire "&" con "&")
- Nel tag object aggiungere l'attributo class="youtube". La classe youtube dovrà essere definita nel nostro foglio di stile (ad esempio ploneCustom.css) specificando le dimensioni del filmato:
.youtube {width: 435px; height: 349px;} - I tag param restano come prima avendo cura di modificare i caratteri "&" con "&"
- Eliminiamo il tag embed non consentito nel codice XHTML
- Ora dai nostri documenti, utilizzando kupu, possiamo tramite il pulsante "Inserisci un collegamento Esterno" e quindi l'apposita scheda "Incorpora oggetto esterno", incollare il codice prodotto.
- Controllate che nel foglio di stile sia attiva la classe .youtube altrimenti il vostro filmato sarà invisibile. Se serve passate temporaneamente in debug/development mode dalla pagina
http://[miosito]/portal_css/manage_cssForm

twitter
