Come caricare dei file SWF su Google Sites, ottenerne il link diretto e riprodurli nel blog.

Nell'articolo precedente ho parlato di "Come caricare dei file audio su Google Sites per poterli riprodurre nel blog". Facendo dei test ho visto che questo nuova realizzazione di Google supporta anche i filmati in formato SWF. Questa è una funzionalità interessante perché come molti di voi sapranno questi tipi di file non vengono forniti di hotlink su Skydrive e quindi li dovevamo caricare su Imageshack che non è proprio adatto ai filmati.

Non sto a ripetere quello che ho illustrato precedentemente sulla creazione di un nuovo sito su Google Sites; anche in questo caso nel momento in cui si crea una nuova pagina occorre selezionare Schedario e dargli un nome per esempio "file video".

Per caricare un file in formato SWF si va su Aggiungi File, si seleziona dal computer e si clicca su Carica

 

Si clicca quindi sul destro del mouse e se ne acquisisce l'URL andando su Copia Indirizzo

 

 

Per inserire il video all'interno del post si possono seguire le indicazioni su come inserire un video SWF secondo i dettami del W3C. Ricordo che questo formato è in flash e si riproduce continuamente.  Ecco un esempio di un video caricato su Google Sites e postato con il codice indicato nel post appena citato

Come centrare un testo, un’immagine o un video in un articolo o in un elemento di Blogger.

Il sistema per centrare qualsiasi cosa in una sezione di un blog agendo sull’HTML è quello di inserire i due tag <center> e </center> all’inizio e alla fine della “cosa” che vogliamo nel centro del layout. Se è un’immagine si tratterà di un codice di questo tipo

<center><img src=”URL-Immagine”></center>

mentre se è un video, quello che vogliamo centrare in mezzo alla pagina o nella sidebar, il codice da inserire sarà il seguente

<center><object…….                …….</object></center>

dove <object… e …</object> rappresentano l’inizio e la fine del codice copiato p.e su Youtube. Ovviamente per inserire questo codice dobbiamo andare il modalità HTML se stiamo scrivendo un articolo oppure inserire questi tag in un elemento pagina HTML/Javascript.

La cosa funziona egregiamente anche con del testo. Per esempio questo codice

<center><p><font size="3"><strong>Testo centrato con il tag center</strong></font></p>
</center>

genera questa scritta

Testo centrato con il tag center

Questo tag ha però un problema, viene deprecato dal W3C che è l’istituzione che sovrintende al miglioramento dei protocolli. Se si stesse dietro a tutte le raccomandazioni di questo consorzio staremo freschi. Ecco per esempio come dovremmo inserire un oggetto flash secondo i dettami del W3C.

C’è però un’altra considerazione da fare. Il tag center non è supportato dall’XHMTL  che è un linguaggio che associa alcune proprietà dell’XML con le caratteristiche dell’HTML. In altri termini un file XHTML è una pagina HTML che rispetta lo standard XML.

Gli utenti di Blogger forse sapranno che i modelli del loro blog sono compilati proprio in XML.

Quindi se volessimo fare le cose precise, per centrare un oggetto, invece di usare il tag center dovremmo usare quest’altro tipo di codice

<div style="text-align:center;">oggetto da centrare</div>

e questo modo di procedere dà dei risultati sostanzialmente analoghi al precedente. Ecco quindi come dovrebbe essere impostato il codice per centrare video, immagini e testi

<div style="text-align:center;">testo da centrare</div>

<div style="text-align:center;"><img src=”URL-Immagine”></div>

<div style="text-align:center;"><object…           …</object></div>

dove al posto dei dati in rosso si inseriscono testo, immagine e video. Concludendo fate un po’ come vi pare, tanto funzionano tutti e due  .

Aggiornamento: In un commento mi è stato fatto notare che per centrare un oggetto si può utilizzare anche la seguente sintassi

<div align="center">oggetto da centrare</div>

questo sistema funziona perfettamente come gli altri due che ho illustrato. In questo caso non si usano i fogli di stile rappresentati dal tag style quindi sicuramente è meno apprezzato da parte del W3C, anche se questo consorzio invita ad usare certi protocolli non obbliga.

Dynamic Drive per trovare script di tutti i tipi che sfruttano la tecnologia DHTML.

Prima di iniziare una breve presentazione del sito Dynamic Drive vorrei elencare alcuni script di cui gli sono debitore, forse dovrei dire siamo debitori perché poi queste funzionalità sono state installate da dei lettori anche su altri blog

1) Effetto della neve che cade per le feste di Natale -
2) Effetto cuoricini lampeggianti per San Valentino -
3) Menù laterale scorrevole -
4) Tre slide menù da inserire a sinistra, destra e centro del blog -
5) Menù espandibile -

e certamente me ne dimentico di qualcun’altro. Il sito in questione è proprio una miniera per tutti coloro che vogliono personalizzare il blog ed inserire delle funzionalità aggiuntive. La particolarità è che questi script non sono scritti per una sola piattaforma ma possono essere usati praticamente in tutti i siti.

Dynamic Drive sfrutta la tecnologia DHTML (Dynamic HTML) che è un metodo che permette di cambiare in modo dinamico la rappresentazione ed il contenuto di una pagina web per aumentare l’interattività del navigatore. Non è un vero e proprio linguaggio ma una sintesi tra il Javascript, il CSS e l’HTML. Gli attributi classici sono basati sull’HTML secondo i dettami del W3C, quindi sono abbastanza accessibili anche per chi non è un programmatore professionista ma solo un appassionato.
Una caratteristica essenziale è che si possono posizionare ed animare degli elementi come del resto è ben visibile negli esempi che ho citato all’inizio dell’articolo.

Il sito è suddiviso in categorie a seconda del tema, ne ricordo alcune

1. Online Tools – che comprende tra l’altro un Image Optimizer ed un Favicon Generator
2. Script Categories – Indubbiamente la più interessante e che permette di spaziare tra Calendari, Effetti per documenti, Effetti per moduli, Giochi, Effetti per immagini, Menù, Mouse e Cursori, Animazioni del testo, ecc
3. Siti Partners
4. Site News – Notizie del sito per informazioni di tipo generale
5. Script aggiunti recentemente

Questa ultima sezione consente di essere sempre aggiornati su nuovi lavori che vengono messi a disposizione degli utenti. Infatti gli script presenti sono assolutamente gratuiti e l’unico obbligo è quello solito di citare la fonte e di non togliere dagli script i riferimenti a chi ne è stato l’autore.
Guardate per esempio questo Effetto Matrix da inserire nel blog; è veramente originale e ci vuole veramente poco ad inserirlo.

Come inserire un IFrame in un post del blog.

Questa funzionalità mi risulta non sia più molto usata . La voglio presentare semplicemente per ottenere  un arricchimento del post e come soluzione a problemi estetici che si potrebbero presentare.

L’IFrame serve per richiamare una pagina web all’interno di un’altra pagina web. In sostanza si crea una finestra all’interno della quale si può vedere un’altra pagina di cui si è immesso l’URL.

Nel precedente post ho parlato del W3C ebbene questo organismo sconsiglia l’uso dell’IFrame.

Gli attributi che possono essere utilizzati sono

align - frameborder - height - marginwidth - marginheight - name - scrolling - src – width

quelli fondamentali sono src per indicare l’URL della pagina, align per indicare la posizione (left, center, right), width e height per le dimensioni, scrolling per inserire o non inserire una barra di scorrimento (yes,no,auto)

Un esempio di IFrame potrebbe avere questo codice  

<iframe  align="center" height="200" width="300" scrolling="yes" src="nome_pagina.html"></iframe>

Le parti in rosso possono essere personalizzate. Le dimensioni possono anche essere espresse in percentuali p.e. width=”50%”. L’indirizzo della pagina non occorre che sia di estensione html, l’importante è che sia visibile dal browser. Può quindi essere l’URL di una immagine troppo grande per essere messa in un post, come per esempio una mappa. Oppure può essere una pagina che contiene un documento di testo. Come esempio ho inserito un IFrame di una immagine natalizia.

Nel momento in cui ci passate sopra con il mouse, questo funziona come zoom e come trascinatore dell’immagine.

Inserire dei filmati in formato SWF nel blog secondo i dettami del World Wide Web Consortium.

In un precedente articolo avevo trovato un artificio per inserire in un post un filmato in flash utilizzando pochissimo codice.
Esiste però il W3C che è un consorzio nato nel 1994 con lo scopo di migliorare i protocolli ed aiutare il web a sviluppare tutte le sue potenzialità. Il consorzio fu creato da Tim Berners Lee che viene riconosciuto come il padre del Web.
Scopo di questo organismo è di creare degli standard di comportamento anche per quanto riguarda la scrittura del codice HTML. Se volete saperne di più consultate questa pagina.
In questa ottica il codice corretto per inserire un oggetto in flash nel nostro blog è il seguente

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="300" height="200"> <param name="src" value="nome_file.swf"> <embed src="nome_file.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="300" height="200"> </embed> </object>

Dove le parti scritte in rosso devono essere personalizzate per quanto riguarda le dimensioni della finestra del filmato; deve inoltre essere aggiunto l’URL del filmato caricato in un hosting tipo SkyDrive.
Avvertimento: Se caricate questi tipi di file su Skydrive quando ne acquisite l’indirizzo o lo fate copiando la barra degli indirizzi del browser come mostrato in questo screenshot


oppure cliccate su Copia indirizzo dopo aver cliccato con il destro del mouse. In questo caso va eliminata la parte finale ?download in quanto Skydrive predispone il file già per essere scaricato. P.e.
http://t9pysw.blu.livefilestore.com/y1p7KvyBDhOmsJPI6a50OhOLu27_IASG1bPVxA1OMJMZ6iN_zKmCt-_e4JvF0vZgalEmpYgGa-IYdCQy38Rv1CLbQ/SOS.swf?download
La parte in rosso è da eliminare nell’URL di questo filmato. 
Aggiornamento: Skydrive non funziona più come hosting di video. Potete però utilizzare Imageshack.