MoebiusMania » video

Le basi di HTML5

Salvo — Thu, 06 Oct 2011 07:00:13 +0000

Dato che l’avvento della nuova versione di HTML è sempre più vicino e dato che ne ho parlato spesso su questo blog senza trattarlo direttamente, eccovi un primo tutorial introduttivo su HTML5… in italiano!

Innanzitutto chiariamo un paio di concetti semplici, il linguaggio non è cambiato: alcuni tag sono stati deprecati e altri aggiunti, HTML è e rimarrà sempre un linguaggio di marcatura quindi tutte quelle cose che avete visto (o sentito dire) riguardo animazioni e interazioni semplificate, geolocalizzazione ecc.. ecc… non vengono realizzate in HTML5 ma dalle sue “costole” CSS3 e alcune nuove API di Javascript.

Quello che fa HTML5 è migliorare e semplificare il modo in cui definiamo le strutture delle pagine web sia logicamente che semanticamente.

Chiariti questi piccoli concetti passiamo al sodo!

1. Doctype e inclusione Script

La prima cosa che possiamo apprezzare riguarda proprio la prima riga delle pagine Html: il Doctype! Dopo anni di stringhe incomprensibili, difficili da ricordare e di copia-incolla finalmente finalmente questa dichiarazione è stata sintetizzata:

Incredibile ma vero è tutto qui! E la cosa bella è che questo Doctype viene già riconosciuto dal validatore del W3C quindi anche se non state scrivendo delle pagine totalmente in Html5 potete già usarlo.

Anche l’inclusione di script è stata semplificata, ora il parametro “text/javascript” diventa sottinteso, quindi non è necessario definirlo. Per fare un’esempio, l’inclusione di jQuery in una pagina Html5 appare così:

2. Struttura semantica della pagina

Finora siamo stati abituati a gestire tutta la struttura delle nostre pagine Html principalmente con il tag

e vari ID, in situzioni simili a queste:

Il tutto ha sempre funzionato, c’era solo un problema di fondo per il quale semanticamente significano tutti la stessa cosa, un motore di ricerca che scansiona la nostra pagina non è in grado di distinguere la testata dal footer… ma ora le cose cambiano!

Html5 introduce così dei nuovi tag che in gran parte delle occasioni andranno a sostituire i div per la struttura delle pagine:

Ecco che ora abbiamo a disposizione tag dedicati a testate, navigazioni, barra laterali, sezioni e piede di pagina. A livello di rendering questi tag non offrono niente di nuovo, sono completamente neutri come i div ma permettono di differenziare le varie zone anche a livello semantico, oltre che avere anche abbastanza senso logico!

A questo punto chiariamo che i tag div non devono a tutti i costi essere abbandonati, scopo di questi nuovi elementi è fornire un giusto tag per identificare alcune parti della pagina

3. Audio e Video

Uno degli aspetti più discussi di Html5 è la possibilità di inserire player video e audio nativamente senza passare da plugin di terze parti come Flash, QuickTime e Silverlight. Il tutto viene gestito (a livello basilare) con una sintassi molto semplice:

Il tuo browser non supporta Html5!

Il tag video mi permette di contenere un testo al suo interno che verrà visualizzato solo nel caso in cui il browser in uso non sia in grando di elaborare l’elemento (un pò come l’attributo alt delle immagini), width e height di regolare le dimensioni del player, src per indicare il file da visualizzare, poster di caricare un’immagine di anteprima personalizzata e controls serve per specificare di visualizzare i controlli di riproduzione.

Audio funziona in modo molto simile ma senza dimensioni e poster.

Con il tag si entra in una questione spinosa che tratteremo (forse) in futuro riguardo i codec, non tutti i browser supportano nativamente gli stessi codec video quindi in alcuni casi può essere necessario ricodificare i video più volte in formati diversi. Intanto potete approfondire con questo articolo (in inglese) di NetTuts.

Una cosa che viene spesso ignorata quando si parla di questa nuova possibilità offerta dal prossimo standard è il fatto che se vogliamo che i nostri contenuti multimediali siano fruibili in tempistiche ragionevoli resta sempre necessaria una tecnologia lato server di streaming o un buon piano di hosting, ricordatevi: Html5 fa solo il player, lato server è tutto invariato!

4. Dove andare da qui?

Come dico nel titolo queste sono solo alcune basi… da qui c’è ancora tutto da scoprire su HTML5!

Un primo passo potrebbe essere dare un’occhiata alla referenza globale del linguaggio Html, quella offerta da W3Schools offre una buona panoramica dei tag attualmente in uso, quelli deprecati e quelli aggiunti dalla quinta revisione.

Nei prossimi post e tutorial mi dedicherò più spesso a questi nuovi linguaggi quindi potete o proseguire qui nei prossimi mesi o tuffarvi nel mare di articoli presenti sul web a riguardo… HTML5 è stato uno dei più grandi buzz del 2011!

WordPress & Android

Salvo — Mon, 28 Jun 2010 09:00:20 +0000

Se siete possessori di uno smartphone con Android (che al contrario del iOS, è disponibile su diversi tipi di dispositivi) e di un blog su WordPress (sia su wordpress.com che in versione personale, come questo sito) potreste apprezzare l’applicazione ufficiale di questa piattaforma di blogging per il dispositivo targato Google.

L’applicazione ufficiale di WordPress permette di creare e gestire commenti, post, e pagine, permettendo così di pubblicare contenuti anche quando si è in movimento.

Nella creazione di post e pagine è anche possibile aggiungere delle foto o video girati con il proprio smartphone e opzionalmente possiamo attivare una notifica per i commenti, in modo da ricevere un avviso sullo schermo del nostro dispositivo appena qualcuno commenta il nostro sito/blog.

Siete curiosi? scoprite di più sul sito ufficiale dell’app o guardate il video qui sotto!

(video incorporato dal sito ufficiale)

WordPress & iPhone

Salvo — Sat, 23 Jan 2010 01:22:06 +0000

Se siete possessori di un iPhone e di un blog su WordPress (sia su wordpress.com che in versione personale, come questo sito) potreste apprezzare l’applicazione ufficiale di questa piattaforma di blogging per il dispositivo targato Apple.

La sto provando da poco e devo dire che le funzionalità per scrivere post, gestire commenti e caricare foto da mobile sono state sviluppate ottimamente, in più è possibile gestire più di un blog. L’unica “pecca” è il fatto che non permette di accedere a gran parte delle funzioni “tecniche” dell’area di admin… ma ricordiamoci sempre che si tratta di un software completamente gratuito (e in continuo aggiornamento!).

(video incorporato dal sito ufficiale)

Tutorial: Tempo di Natale per Illustrator

Salvo — Wed, 09 Dec 2009 23:55:37 +0000

In questo secondo video tutorial metteremo di nuovo le mani su Illustrator, all’inizio riutilizzeremo le conoscenze del precedente tutorial per creare una pallina natalizia con un bel riflesso come sappiamo che piacciono tanto sul web poi vedremo come sfruttare il pannello degli aspetti e le maschere di ritaglio, insieme ad un filtro per permetterco di rendere dei testi “normali” molto più interessanti senza dover utilizzare font particolari e sopratutto, mantenendo il testo editabile!

Quindi, non esitiamo a rendere il nostro Natale un po’ più vettoriale, aprite Illustrator e guardatevi il video tutorial!

Software richiesto:

Illustrator , io uso la versione CS4 ma non sfrutto nessuna particolare novità di quest’ultimo quindi anche gli utenti di CS3 e CS2 dovrebbero poter seguire il tutorial senza problemi. Potete sempre scaricare la versione di prova per 30 giorni di Illustrator CS4 dal sito ufficiale di Adobe.

Prerequisiti:

Conoscenza base di software grafici, tutorial sulla zucca vettoriale.

Argomenti trattati:

Machere di ritaglio, “livelli” degli aspetti, filtro “contorni frastagliati”, Kuler

Sorgenti:

Trovate il file .ai contenente entrambi gli oggetti realizzati in questo tutorial direttamente nel Christmas Pack 2009 .

1. Palla natalizia 2.0

Riutilizzando le tecniche del precedente tutorial su Illustrator creiamo questa volta una pallina natalizia, come quelle che vediamo appese sugli alberi di natale, in stile web 2.0. Creiamo un cerchio con una sfumatura radiale al suo interno, ne facciamo una versione bianca, poi una versione con un gradiente da nero a bianco e selezionando queste due copie insieme dal menu del pannello “Trasparenza” creiamo una maschera di opacitaà, che poi ridimensioneremo e posizioneremo sul cerchio iniziale per simulare la luce riflessa.

Se creiamo del testo in Illustrator potremmo accorgerci abbastanza in fretta che non possiamo usare come colore di riempimento una sfumatura, per farlo dovremmo convertire il testo in tracciati ma perderemmo la sua editabilità…

2. Testo sfumato e mascherato (editabile!)

Ecco la soluzione: creiamo un testo e dal pannello “Aspetto” aggiungiamo un nuovo livello di riempimento e da quest’ultimo selezioneremo la sfumatura. Con questo livello di riempimento selezionato ci spostiamo sul pannello “Sfumature” e esattamente come abbiamo gia visto in precedenza assegnamo i colori alla sfumatura e l’angolo di inclinazione… ed ecco qui il nostro testo sfumato, ancora editabile! Ma possiamo fare un passo in più, creando un rettangolo di qualunque colore e applicandogli il filtro “Contorni frastagliati” (guardate le impostazioni nel video per farvi un’idea), dopo spostiamo il rettangolo deformato in un livello inferiore al nostro testo e selezionandoli entrambi, creiamo una maschera di ritaglio, permettendoci di ottenere visivamente un nuovo elemento, ma con la possibilità di avere sempre editabili gli elementi originali!

Se non si è ancora capito è la tecnica che ho utilizzato per il logo “Christmas Specials”

In conclusione:

Le maschere di ritaglio e il filtro che abbiamo visto oggi ovviamente non si applicano solo ai testi… quindi dateci dentro con gli esperimenti e guardate cosa potete ottenere riutilizzando questi semplici strumenti in altri ambiti!

Purtroppo la settimana speciale natalizia qui su MoebiusMania.net si avvicina alla fine… ma non dimenticate di passare ancora domani per l’ultima giornata e l’ultimo regalino: una selezione di tutorial e materiale freeware sparsi per il web!

Tutorial: Zucca vettoriale

Salvo — Mon, 26 Oct 2009 13:37:08 +0000

Apriamo questo “speciale” su Halloween con un paio di novità… innanzitutto il primo tutorial che pubblico su Illustrator, e grande novità per MoebiusMania.net arrivano i primi video! Registrati direttamente dal mio desktop, questi brevi filmati (per ora senza parlato, ma con sottofondo musicale) accompagneranno la parte testuale del tutorial in modo da rendere più “visuale” la spiegazione e sfruttare le comodità basilari dei video di poter fermare, rimandare indietro, e rivedere quante volte si vuole quella particolare azione.

Dettagli e note tecniche a parte, iniziamo con il primo tutorial di questo speciale tematico disegnando una zucca in stile Web 2.0, siccome Illustrator è un software che disegna in modo vettoriale e non raster, il prodotto finale del nostro lavoro sarà liberamente scalabile, sia aumentando che diminuendo le dimensioni (ma magari mantenendo le proporzioni ), rendendo cosi questa “Zucca 2.0″ adatta come elemento di decorazione sia per un sito/blog , sia per una cartolina da stampare.

Per maggiori informazioni riguardo le differenze tra la grafica vettoriale e quella raster vi rimando a quest’ottimo articolo che spiega il tutto in modo soddisfacente. Ora diamoci da fare con Illustrator!

Software richiesto:

Prerequisiti:

Conoscenza base di software grafici, livelli e strumento penna.

Argomenti trattati:

Metodi di fusione, maschere di opacità.

1. Colori e gradienti

Non è mai una cattiva idea preparare i colori che abbiamo intenzione di usare prima di procedere con il disegno stesso. In Illustrator questo compito ci viene facilitato dal pannello “Campioni”, quindi aprite un nuovo documento RGB e assicuratevi di avere aperto questo pannello che eventualmente potete richiamare dal menu Finestra –> Campioni . Il processo di memorizzare dei campioni di colore e gradienti (sfumature) è un’operazione molto semplice e molto utile perché ci permetterà di richiamare questi colori in poco tempo ogni volta che ci serviranno.

NOTA: La “lavagnetta” che mi vedete usare per gli appunti in questo video è la mia SalvoToDoList realizzata in Flash e Air, scaricabile gratuitamente.

2. La “base” della Zucca e un tocco di Web 2.0

Ora che abbiamo i campioni pronti, iniziamo subito a disegnare! Per creare la base della nostra zucca ci basta lo strumento ovale, impostiamo come colore di traccia il rosso scuro, mentre come riempimento mettiamo il gradiente che va dall’arancione chiaro verso il giallo, poi spostiamoci sull’area di lavoro e tenendo premuto il pulsante del mouse tracciamo il nostro ovale. Una volta fatto il disegno selezioniamolo e impostiamo la larghezza della traccia a 4 punti per renderla più spessa.

Poi sfrutteremo le “maschere di opacità” per creare un’effetto di superficie lucida e riflettente, che unita alla sfumatura dell’ovale che abbiamo disegnato prima darà alla nostra zucca quell’aspetto “Web 2.0″ tanto amato/odiato. Seguite attentamente il video per vedere i pochi ma fondamentali passaggi necessari per creare la machera di opacità ed adattarla alla nostra zucca.

In Illustrator CS4 abbiamo le guide automatiche che ci indicano quando stiamo allineando degli oggetti tra di loro, sfruttamiole per disporre rapidamente i nostri elementi!

3. La faccia

Per i 3 elementi della faccia (i 2 occhi e la bocca) dobbiamo semplicemente affidarci allo strumento Penna. Qui c’è poco da spiegare impostare il rosso scuro (lo stesso che abbiamo usato per la traccia della zucca) come colore di traccia e il gradiente che va dal nero al rosso come riempimento. Una volta disegnati gli elementi useremo lo strumento Sfumatura per sistemare il punto di inizio e di fine del gradiente in modo da simulare una luce all’interno della bocca e degli occhi, facendoli sembrare cavità con una luce dentro.

Con lo strumento Penna clicchiamo per creare dei punti connessi fra di loro da linee rette, mentre clicchiamo e teniamo premuto prima di rilasciare per creare delle curve.

4. Il gambo e il tocco finale

Sempre con lo strumento Penna, semplicemente disegnamo un linea un po curva, come colore avrà il verde scuro e tramite il pannello dei livelli lo spostiamo in fondo come ultimo livello in modo da poterlo posizionare sotto la zucca.

Ora la parte più interessante, daremo un tocco di realismo alla zucca con una texture. Duplichiamo la base della zucca e rimuoviamo la traccia, poi gli applichiamo un filtro di Illustrator che troviamo sotto la voce Effetto –> Filrtri SVG –> AI_EffettoLegno e vedremo sparire il colore di riempimento che sarà rimpiazzato da una texture. Cosi com’è non ci piace granche… apriamo il pannello “Trasparenza” e impostiamo come metodo di fusione “Sovrapponi” e impostiamogli un’opacità del 40%. Dopodiche spostiamo questo nuovo oggetto sulla nostra zucca, e dal pannello dei livelli arrangiamolo appena sopra il livello della zucca ed ecco fatto… la nostra “Zucca 2.0″ è pronta per essere utilizzata!

I metodi di fusione in Illustrator, sono quasi gli stessi di quelli Photoshop e funzionano proprio allo stesso modo, avevamo gia visto qualcosa nel mio primo tutorial su Photoshop.

In conclusione

In questo primo tutorial di Illustrator avete visto delle tecniche basilari per il disegno vettoriale, con un po di pratica riuscirete a farle più “vostre” e riutilizzarle per lavori originali. Per oggi è tutto, ma ripassate domani per una raccolta abbondante di link per risorse e tutorial a tema “Halloweeniano”!

PS: trovate il sorgente del file nel [Download not found] !

Le rockstar non sono tutte uguali…

Salvo — Mon, 11 May 2009 16:59:25 +0000

Digitale terrestre o Sky? WordPress TV!

Salvo — Sun, 18 Jan 2009 14:55:10 +0000

Ultimamente la linea che divide Internet dalla televisione si sta facendo sempre più sottile… a confermare questo fatto possiamo citare diversi servizi come YouTube, il recente Adobe Media Player (con la sua Adobe TV), l’Apple TV, l’ iPlayer della BBC , (prossimamente in arrivo per tutti i paesi extra USA) Hulu e adesso anche WordPress con il nuvo sito WordPressTV!