Creare un videoblog

Una guida passo passo per creare un videoblog senza spendere un euro.

VODCast = Video-On-Demand-casts

Passaggio 0:
Per prima cosa è necessario girare un video e scaricalo sul computer.
Utilizza una videocamera digitale e gira il tuo video. Leggi la guida relativa alla videocamera per avere le istruzioni per scaricare il filmato sul computer. Con un software di editing video hai la possibilità di montare le scene con un ordine diverso da quello delle riprese. Se non vuoi spendere soldi per un applicativo professionale, puoi utilizzare i programmi dati assieme al sistema operativo:

• Su un MAC trovi iMovie


• Un PC Windows ti offre Movie Maker


• Un’altra soluzione è utilizzare Avid Free DV un software professionale gratuito per PC e MAC con molte più funzionalita' rispetto ai precedenti software.
  

Ora che hai creato il tuo capolavoro lo devi comprimere ed esportare in formato mp4.
Se utilizzi Avid Free DV, utilizza il commando Export per salvare il filmato in formato Quicktime .mp4 con codec H.264 alla risoluzione di 320 x 240 pixel.
Per ciò che concerne l’audio, utilizza il formato AAC-LC in modalità mono con un sample rate di 32.000 kHz.
Queste impostazioni permettono di diminuire le dimensioni del filmato affinchè possa essere agevolmente scaricato dal web.

Passaggio 1:
Pubblica il filmato su YouTube.

Vai su http://www.youtube.com/, dedica il tempo necessario per eseguire l’iscrizione al servizio di condivisione dei video. Clicca sul pilsante Upload per caricare il tuo filmato e indicando correttamente nel form tutti i dati necessari.
Terminato l’upload del file ti verrà comunicato il codice HTML per incorporare il video sul tuo blog:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/ codice del tuo video "></param><embed src="http://www.youtube.com/v/codice del tuo video" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Copia ed incolla in un file di testo il codice, che verrà utilizzato al passaggio 3 per essere intergrato nel blog.
In un secondo file copia ed incolla la parte di codice evidenziata, fornita da youtube
Ora il tuo video è su internet e puoi condividerlo con il mondo intero.


Passaggio2:
Metti a punto un blog su Blogger senza spendere un euro.
Vai su http://www.blogger.com/, crea una posizione utilizzando un tuo indirizzo email e definisci il tuo blog.


Passaggio 3:
Incorpora nel tuo blog il filmato pubblicato su youtube.
All’interno del tuo blog, crea un nuovo post. Attiva la modalità “Modifica HTML” ed incolla nell’area di testo il codice fornito da Youtube inserito nel primo file di testo.

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/ codice del tuo video "></param><embed src="http://www.youtube.com/v/codice del tuo video" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Passando alla modalità “Scrivi” puoi aggiungere dei commenti al video.
Ora non resta che pubblicare il post e godere dei propri risultati.


Passaggio 4:
Inserisci un RSS 2.0
Crea un VODCast, i visitatori del blog potranno sottoscrivere e scaricare i tuoi video automaticamente sul loro computer.
Questa è la parte più complessa, ma ne vale sicuramente la pena. Una volta messo tutto a punto chiunque potrà essere automaticamente avvertito circa l'inserimento di nuovi video.


Passaggio 4.1:
Crea un file XML
Apri un editor di testo come il Blocco Note e ricopia il seguente codice avendo cura di inserire al posto del testo evidenziato i tuoi dati.
Fai attenzione ad inserire correttamnete il secondo codice copiato da youtube http://www.youtube.com/v/codice del tuo video a fine file XML.

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/DTDs/Podcast-1.0.dtd" version="2.0">
    <channel>
        <title>Titolo del Vodcast</title>
        <itunes:author>Il tuo nome</itunes:author>
        <link>http://www.sitoblog.com</link>
        <description>Descrizione del tipo di VODCast</description>
        <itunes:subtitle>Un sottotitolo del VODCast</itunes:subtitle>
        <itunes:summary>Un riassunto dei contenuti del VODCast</itunes:summary>
        <language>IT</language>
        <copyright>(c) 2005 Il tuo nome</copyright>
        <itunes:owner>
            <itunes:name>Il tuo nome</itunes:name>
            <itunes:email>tuaemail@esempio.com</itunes:email>
        </itunes:owner> 
        <category>Technology</category>
        <itunes:category text="Technology"></itunes:category>
    <item>
          <title>Titolo del filmato</title>
          <itunes:author>Il tuo nome</itunes:author>
          <description>Una descrizione del filmato</description>
          <itunes:subtitle>Un sottotitolo al filmato</itunes:subtitle>
          <itunes:summary>Un riassunto del filmato</itunes:summary>
          <enclosure url="http://www.youtube.com/v/codice del tuo video" length="1024" type="video/mov" />
          <guid>http://www.youtube.com/v/codice del tuo video</guid>
          <pubDate>Tues, 25 July 2005 10:00:00 GMT</pubDate>
          <itunes:explicit>no</itunes:explicit>
          <itunes:duration>00:01:35</itunes:duration>
          <itunes:keywords>parola chiave 1, parola chiave 2, parola chiave 3</itunes:keywords>
        </item>
    </channel>
</rss>

Salva il file dando il nome imieivideo.xml e come Tipo di file: Tutti i files

Puoi scaricare e modificare il file imieivideo.xml , cliccando sul link con il tasto destro e scegliendo Salva destinazione...


Passaggio 4.3:
Fai l’upload del file imieivideo.xml su uno spazio web
Se non hai a disposizione uno spazio web puoi aprire un account su http://www.altervista.org/, è gratuito e puoi uploadare fino a 100MB di dati.
Metti il file XML nella root del sito.


Passaggio 4.4:
Posiziona il file XML sul blog
Nella sezione Modello delle impostazioni del tuo blog, aggiungi l’elemento pagina FEED RSS ed inserisci l’url al file imieivideo.xml, per esempio http://www.miosito.com/ imieivideo.xml
E voilà, abbiamo finito.

Introduzione su AJAX

AJAX è l'acronimo di Asynchronous JavaScript and XML, più che essere una specifica tecnologia è una tecnica per lo sviluppo di applicazioni web interattive, che utilizza un insieme di diverse tecnologie, tra qui le più importanti sono JavaScript e l'oggetto XMLHttpRequest (XHR).

Il vantaggio principale apportato dall'uso di AJAX è di ottenere pagine web che rispondono immediatamente alle selezioni dell'utente, senza che debba attendere il ricaricamento dell'intera pagina.

Il motore XHR AJAX è un oggeto JavaScript che viene chiamato ogni volta vi sia la necessità di richiedere dati al server.
In sostanza ogni link effettua una chiamata al motore AJAX, che schedula ed esegue la richiesta, che viene effettuata in modalità asincrona, cioè il codice d'esecuzione non attende la risposta per continuare.
Il server che normalmente restituisce dati HTML, immagini, CSS, JavaScript, è configurato per dare informazioni che possono essere trattare dal motore AJAX, come ed esempio semplice testo, XML o altri formati interpretabili da AJAX.
Alla risposta dal server l'oggetto XHR effettua il parsing dei dati e riconfigura l'interfaccia utente sulla base delle informazioni ricevute.
Per il fatto che la quantità di dati scambiata con il server è molto minore rispetto le tradizionali applicazioni web, l'aggiornamento dell'interfaccia e le attività dell'utente vengono eseguite più velocemente.

In sintesi AJAX come funziona:
- chiama qualque tecnologia server-side che può ricevere richieste provenineti da un client
- processa le richieste a livello remoto sul server
- restituisce al browser del client e risultati dei processamento efettuto lato server
- esegue ulteriori elaborazioni dei dati a livello client come per esempio modifiche al DOM.

Tecnologie utilizzate da AJAX:
Componenti client-side
XHTML: linguaggio per la rappresentazione dei contenuti primari (necessaria)

CSS: formattazione degli stili della pagina XHTML (ozionale)

DOM: aggiornamento dinamico della pagina caricata nel browser (necessaria)

XML: formato per lo scambio dei dati (ozionale)

XSLT: trasformazione da XML in XHTML (secondo lo stile CSS) (ozionale)

XMLHttp: mediatore (broker) per le comunicazioni primarie

JavaScript: linguaggio di scripting usato per programmare un motore AJAX (necessaria)

Componenti server-side
PHP
Java servlets
.NET
altri application server
l'importante è assicurare il corretto formato dei dati da reinviare al motore AJAX

Semplice esempio di richiesta

L'esempio descrive una pagina HTML che contiene il pulsante "Invia richiesta asincrona al server".
Cliccando sul pulsante si avvia appunto una richiesta asincrona al server.
Il server risponde inviando un file di testo statico XML contenete la seguente stringa “Hello AJAX world”.
La risposta viene gestita dal browser mostrando il contenuto del file XML in una finestra di avviso mediante il comando alert.

Link all'esempio eseguibile.

Codice della pagina HTML interpretato dal browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "simpleResponse.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("Risposta dal server: " + xmlHttp.responseText);
        }
    }
}
</script>
</head>

<body>
    <form action="#">
        <input type="button" value="Invia richiesta asincrona al server" onclick="startRequest();"/>
    </form>
</body>
</html>

File simpleResponse.xml presente sul server


Hello AJAX world

Paradigma dell'interazione AJAX

L’aspetto di una comune interazione AJAX:

1. (1) Un evento dal lato client attiva un evento AJAX


2. (2) Viene creata un’istanza dell’oggetto XMLHttpRequest.
   Viene aperto un canale di comunicazione al server mediante il metodo open(), all’interno del quale si specifica l’URL del server ed il metodo GET o POST per l’inoltro delle richieste.
   Viene infine attivata la richiesta mediante il metodo send().


3. (3) Al server viene fatta la richiesta mediante una chiamata servlet, uno script CGI o una qualsiasi tecnica lato server.


4. (4) Il server esegue la query di richiesta, accedendo ad un archivio dati o ad un altro sistema.


5. (5) La richiesta viene restituita al browser.
   Il Content-Type della risposta deve essere impostato a testo/xml, in quanto l’oggetto XHR può elaborare risultati solo di tipo testo o HTML.


6. (6) Alla ricezione della risposta dal server, l’oggetto XHR chiama la funzione callback() che verifica controlla le proprietà di readystate ed il codice di stato status reso dal server al fine di verificare il buon esito della trasmissione.


7. (7) Se tutto procede come previsto, la funzione callback() esegue operazioni interessanti sul server.

Conoscere "Second Life"

Second Life è un metamondo tridimensionale multi-utente online
inventato nel 2003 dalla società americana Linden Lab.
Il sistema fornisce ai suoi utenti (chiamati "residenti")
gli strumenti per aggiungere e creare nel "mondo virtuale" di
Second Life nuovi contenuti grafici: oggetti, fondali,
fisionomie dei personaggi, contenuti audiovisivi, ecc.
La peculiarità del mondo di Second Life è quella di lasciare agli
utenti la libertà di usufruire dei diritti d'autore sugli oggetti
che essi creano, che possono essere venduti e scambiati
tra i "residenti" utilizzando una moneta virtuale (il Linden Dollar)
che può essere convertito in veri dollari americani.

Attualmente partecipano alla creazione del mondo di Second Life
oltre 8 milioni di utenti di tutto il pianeta (dato 26 luglio 2007),
e ciò che distingue "Second Life" dai normali giochi 3D online è
che ogni personaggio che partecipa alla "seconda vita" rappresenta,
secondo la fantasia dell'utente, l'utente stesso. Gli incontri
all'interno del mondo virtuale appaiono dunque come reali scambi
tra esseri umani attraverso la mediazione "figurata" degli avatar.


Molti personaggi che partecipano alla vita di "Second Life" sono
programmatori in 3D. Qualcuno di essi ha guadagnato somme di (vero) denaro vendendo gli script dei propri oggetti creati per essere
utilizzati dentro il mondo virtuale. Second Life viene comunemente
utilizzato dai suoi utenti per proporre agli altri partecipanti
conferenze, file musicali e video, opere d'arte, messaggi politici,
ecc.; si è inoltre assistito alla creazione di numerose sottoculture
all'interno dell'universo SL, che è stato studiato in numerose
università come modello virtuale di una interazione umana, falsa,
ma in cui si proietta ciò che si vorrebbe essere.

Alcuni psichiatri lo considerano un gioco pericoloso nel caso l'utente
sia persuaso, anche a causa della forte influenza psicologica
praticata dalla ditta produttrice per ragioni di guadagno, che
"Second Life" sia veramente una seconda vita, anziché una finzione.
Si ritiene anche che, in situazioni controllate, tale "mondo" virtuale possa essere un elemento utile alla psicanalisi, in particolare per
conoscere come il paziente si immagina e come, svincolato dalla
realtà, vorrebbe essere; tutto ciò solo sotto controllo medico e
nell'ambito di una terapia più ampia, che soprattutto preveda una
relazione reale tra il paziente e lo psicanalista.
Second Life è un mondo virtuale 3D online, di proprietà della LindenLab.
Ci si accede via internet con un software scaricabile da web, e si interagisce con i contenuti e con gli altri residenti tramite una rappresentazione digitale di noi stessi, l’avatar.
A prima vista, Second Life richiama alla mente i videogames online.
Ma, al contrario dei videogames, non c’è nessuna struttura narrativa predefinita, non ci sono percorsi obbligati, non c’è un nemico da combattere, non ci sono regole del gioco.

In SecondLife, il gioco è solo una delle attività possibili.
La caratteristica che rende Second Life unico nel suo genere è la possibilità di creare oggetti 3D e di renderli interattivi.
Tutto quello che si vede in SecondLife è stato costruito dai suoi residenti.
Partendo da semplici forme geometriche, si arriva a costruire un palazzo, un’automobile, uno strumento musicale.

“Second Life è un vero e proprio universo virtuale, plasmato a proprio uso e consumo da chi vi abita” , dice Philip Rosedale, creatore di Second Life. “Un ambiente , tra l’altro, che evolve secondo l’utilizzo che ne fa chi ci vive.”

Come creare l'oggetto XMLHttpRequest

Per poter utilizzare l'oggetto XMLHttpRequest XHR per l'invio della richieste e la ricezione delle risposte, è necessiario istanziare tramite il codice JavaScript un oggetto XHR.
L'implementazione varia da browser a browser, l'XHR viene istanziato come un oggetto ActiveX in Internet Explorer, mentre come un oggetto JavaScript nativo in Firefox, Mozilla, Opera, Safari. Sarà quindi sufficiente verificare se il browser supporta l'ActiveX per creare l'istanza XHR come oggetto ActiveX o in altrenativa come oggetto JavaScript nativo.

var xmlHttp;

function creaXMLHttpRequest(){
  if (window.ActiveXObject) {
    xmlhttp = new ActiveXOject("Microsoft.XMLHTTP");
  }
  else
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    else alert("Questo browser non supporta AJAX");
}

Spiegazione del codice:
Bisogna creare una variabile globale detta xmlHttp, in cui verrà depositato il riferimento all’oggetto. Il metodo creaXMLHttpRequest() crea un’istanza di XMLHttpRequest, sulla base del tipo di browser.

L’istruzione if (window.ActiveXObject) valuta se il browser supporta i controlli ActiveX e quindi se è un Internet Explorer, nel qual caso assegna alla variabile xmlhttp l’istanza XHR mediante il costruttore new ActiveXOject("Microsoft.XMLHTTP").

Se il browser non supporta l’ActiveX, verrà valutata la condizione if(window.XMLHttpRequest) ovvero se il browser implementa XMLHttpRequest come oggetto JavaScript. A risposta positiva viene creata un’istanza XMLHttpRequest e assegnata alla variabile xmlHttp. A risposta negativa viene emesso un messaggio di avviso che il browser non suporta AJAX.

Asincronia di AJAX

Le richieste al server sono inviate in modalità asincrona, consentendo al browser di continuare a rispondere agli input dell’utente, mentre aspetta la risposta del server in background.
Se invece fosse stat scelta un’operazione sincrona e la risposta del server fosse arrivata dopo molti secondi, il browser non avrebbe risposto all’input dell’utente durante il periodo di attesa, causando nell’utente una perplessità sul perché non vi fosse un feedback durante la lunga attesa
Il funzionamento asincrono consente all’utente di continuare a lavorare mentre il server lavora alla richiesta precedentemente inoltrata in background.
La capacità di comunicare con il server senza interrompere il flusso delle operazioni dell’utente apre una vasta gamma di tecniche per migliorare l’usabilità di una pagina web. Basti pensare ad un’applicazione dedicata alla convalida dei dati di input dell’utente:
- un utente sta completando i campi di un form
- il browser invia periodicamente al server per la convalida i valori inseriti , senza interrompere le operazioni di completamento dei campi dell’utente
- se una regola di convalida non da esito positivo, l’utente viene notificato immediatamente, prima che il modulo venga effettivamente inviato al server per l’elaborazione.

Il processo di controllo asincrono apporta due grandi vantaggi dal lato client e server:
- fa risparmiare tempo e frustrazioni inutili all’utente
- riduce il carico di lavoro al server, non dovendo essere ricreati i contenuti del form nel caso di un invio errato.

Document Object Model

DOM acronimo di Document Object Model è una specifica del W3C per un metodo indipendente dalla piattaforma e dal linguaggio che consente di accedere e modificare il contenuto e la struttura di un documento.
È un modello che permette di definire gli oggetti per di rappresentare e manipolare un documento HTML o XML; descrive come i diversi oggetti di una pagina sono collegati tra loro, vediamo un esempi:.

Esempio di DOM di una semplice pagina web

<html>
  <head>
    <title>Pagina Web</title>
  </head>
  <body>
    <h1>Esempio di DOM</h1>
    <p>Questa pagina è costituita da 9 nodi</p>
  </body>
</html>


Rappresentazione grafica del DOM:

La pagina è costituita da nodi, ogni tag, ogni elemento compreso tra i tag è un nodo.
I nodi possono avere e proprietà. Inoltre un nodo (come <body>) può contenere altri nodi.I browser che supportano il DOM W3C offrono la possibilità di possibile accedere e manipolare ogni nodo, ma anche aggiungerne di nuovi dinamicamente, ed eliminarne altri già presenti.

I feed cosa sono e come funzionano

Un feed è un tipo di contenuto frequentemente aggiornato pubblicato da un sito Web. Viene anche detto feed XML (dal linguaggio XML), feed Web o feed RSS (acronimo di RDF Site Summary ed anche di Really Simple Syndication).

La teoria

Lo standard RSS definisce una struttura adatta a contenere un insieme di notizie, ciascuna delle quali composta da campi (nome autore, titolo, testo, riassunto ecc.). Quando si pubblicano notizie in formato RSS, la struttura viene aggiornata con i nuovi dati; poiché il formato è predefinito, un lettore RSS presenterà le informazioni in modo omogeneo (e quindi più fruibile dall'utente), anche se provengono da fonti diverse.

Il formato RSS è basato su XML (Extensible Markup Language), un linguaggio per computer basato su testo utilizzato per descrivere e distribuire documenti e dati strutturati.

La pratica

Praticamente un feed è un sommario di quanto c'è di nuovo in un sito. Poiché il sommario è scritto in un modo standard, è possibile che un lettore appositamente predisposto possa leggerlo e presentarlo in modo molto efficiente.

Le limitazioni iniziali - Come sempre, alla nascita dell'idea e degli strumenti che la realizzavano, era necessaria una certa pratica informatica per poter accedere ai feed, per esempio era necessario dotarsi di lettori di feed (aggregatori).

La situazione attuale – Le recenti versioni (quindi Internet Explorer 7 e Firefox 2) dei due browser più diffusi (Internet Explorer e Firefox coprono oltre il 95% del mercato) inglobano la gestione dei feed rendendo praticamente ogni computer in grado di sfruttarli.

Può essere lo stesso browser (quando non specificheremo intendiamo sia Explorer sia Firefox) ad accorgersi che il sito offre un feed (anzi è buona norma progettuale fare in modo che se ne accorga!)

Quando si accede a un sito Web per la prima volta, il browser esegue una ricerca dei feed e, se ci sono feed, apparirà la tipica iconcina arancione. In genere è possibile vedere o sottoscrivere il feed semplicemente cliccando sull'icona.