Monthly Archives: December 2007

Flash Player 9 update 3: the HD revolution

In questi ultimi 12-18 mesi mi sono poco dedicato al Flash e molto agli standards. La tendenza è, in linea di massima, “Standard, Simple & Social”, progettare in maniera semplice, web 2.0 (bordi arrotondati, caratteri San Serif e lower case, menu di navigazione semplici e persistenti, “bold” logos, colori vibranti, icone e ancora icone, riflessi su superfici, molto spazio bianco, tabs, drag & drop, autocomplete, widgets di ogni tipo etc.) e di sperimentare nuove forme di visualizzazione dei contenuti e nuovi ‘metodi sociali’ di navigazione, come i tag clouds, le previews, gli annotation systems, il social bookmarking, e in generale hanno spopolato i framework javascript e le librerie di effetti per le UI. Ma… non era un post sul Flash? Con tutta questa pantomima sul web 2.0 quasi me ne ero dimenticato.
flash HD
Pochi giorni fà, infatti, ho notato che Adobe ha rilasciato la update 3 (versione 9,0,115,0) del Flash Player 9. Sono andato sul sito Adobe Flash On e sono sobbalzato nuovamente sulla sedia (mi capita 2-3 volte l’anno al massimo) quando da questo sito di movie trailers noto il tasto “HD”.
Clicco e… voilà: full-screen e una definizione incredibile!

Mi ricordo che quando 4 anni fa sperimentavamo in Kyneste con i video in streaming (Flash Communication Server MX) e il player era alla versione 6, il video con flash era ancora sperimentale; lo stesso YouTube ci bombarda 4 anni dopo con video da 320px di larghezza con scarsa qualità, ma i trailers che ho visto su Flash On dimostrano come con questa release del player, Adobe abbia voluto estendendere e rinforzare la posizione di leadership nel segmento di tecnologie per il web video.

Inevitabilmente, i progetti di “desktop Internet TV” come Joost e Babelgum – che hanno investito molto per ideare qualcosa di alternativo, di simil high-definition, e per lo sviluppo di tecnologie proprietarie di video encoding, peer-to-peer networking e streaming video – subiranno dei rallentamenti, in termini di interesse da parte del pubblico; immagino che su a Milano siano sobbalzati sulla sedia anche loro, e così a Leiden. E pensare che anche io stavo per aderire alla “viewing revolution”, ma sono contento di come, tutto sommato, siano andate le cose visto che non ci siamo me$$i daccordo. Ma questa è un’altra storia e dimostra quanto sul web, tentare di affermarsi in un segmento così dinamico quale il video entertainment (entertainment e advertising online varranno ulteriori stramilioni di euro) sia davvero difficile, e ancora di più se ci si confronta con colossi come Adobe.

With the explosion of video on the Internet, a massive shift is under way in how people consume video entertainment. Television programs are being viewed not only on TV sets but also on computer screens and mobile devices. Yet challenges in creating and profiting from next-generation content persist; the future of television is online.
— adobe.com/solutions

Nessuno abbandonerà il browser (non ancora) e questo Adobe lo sa bene: con il Flash Player installato sul 99.1% dei computer collegati ad Internet e con la consapevolezza che l’80% di tutti i video streams oggi avvengono tramite Flash, é dura invogliare milioni di utenti a scaricare una desktop Internet TV application quale fonte di video entertainment. Sopratutto da questo momento in poi, ora che si può fare video broadcasting in alta definizione da fruire sempre nel “solito” browser. Certo, non è detta l’ultima parola, ma con questa mossa Adobe si aggiudica ancora una volta la leadership in un settore in grandissimo sviluppo, che nel breve periodo porterà alla nascita di nuovi servizi di video broadcasting. E’ certo che il 2008 sarà l’anno del sorpasso del web rispetto alla TV, in generale.

HD e Flash player: include da questa release il supporto per lo standard di compressione video H.264, un subset dello standard MPEG-4, lo stesso standard supportato dai device Blu-Ray e i video players HD-DVD. H.264 è anche conosciuto col nome di MPEG-4 Advanced Video Coding. In altre parole, la qualità del video ha subito un esponenziale miglioramento dalla precedente versione anche se il supporto di H.264 doveva arrivare con la versione 10 del player.

Inoltre c’è il supporto per l’High Efficiency AAC (HE-AAC) audio e “hardware accelerated, multi-core enhanced full screen video playback” e per i formati 3GP, MP4, e MOV; ovviamente l’HighDefinition si porta dietro tutti i problemi relativi alla ampiezza di banda necessaria per fare il delivery dello stesso: non aspettiamoci che per esempio YouTube converta tutto in HD rendendo impossibile lo streaming (per ora almeno), ma H.264 è comunque un codec molto più efficiente di quello in uso nelle versioni precedenti di flash player, e permette di visualizzare contenuti video di qualità assai migliore con lo stessa banda. Apple recentemente aveva chiesto a YouTube di re-encodare il suo catalogo di video nel formato H.264 per la distribuzione dei video su AppleTV e iPhone, per la stessa ragione: meno banda più qualità.

E’ iniziata la HD revolution, non ci resta che stare a guardare (nel vero senso della parola) e rimboccarci le maniche anche su questo fronte. E’ questo il bello: non sai mai come sarà domani; per non perdersi è essenziale essere attenti osservatori, avere intuito, senso critico e voglia di “vedere” cosa c’è dietro. Sempre.

accordion menu con jQuery

Con estrema lentezza visti i vari impegni – scusa Nicola – sto lavorando ad un progetto freelance; per le tematiche relative all’interaction design ho pensato di usare jQuery mentre il markup è rigorosamente sviluppato in xHTML strict; il tempo non è molto e mi son detto: voglio usare quanti più plugin riesco, voglio vedere quanto è vero stò motto “write less, do more”, e quanto riesco a customizzarli in base alle mie esigenze.

Ma veniamo al perchè di questo post: nel mentre sviluppavo il mio design già pensavo ad un simpatico menu di tipo “a soffietto” o accordion, per dirla in inglese, che suona meglio.
Ed ho deciso di condividere con voi tale idea anticipandovi che comunque ci sono già buoni tutorial e plugin sull’argomento ma nessuno, non capisco perchè, parte da un set di liste non-ordinate annidate.
Questo è il nostro markup: molto semplice. Ricordiamoci di dare un ID alla lista.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="prjcats">
	<li><a href="#">Henseleit Helicopters</a>
		<ul>
			<li><a href="#">MP V91 XL</a></li>
			<li><a href="#">MP XLE</a></li>
		</ul>
	</li>
	<li><a href="#">Mikado Model Helicopters</a>
		<ul>
			<li><a href="#">V Stabi 3 Axis</a></li>
			<li><a href="#">Logo 500DX</a></li>
			<li><a href="#">Logo 500 3D</a></li>
		</ul>
	</li>
	<li><a href="#">Thunder Tiger</a>
		<ul>
			<li><a href="#">A109 Scale Fuselage Kit</a></li>
			<!-- eccetera -->
		</ul>
	</li>
</ul>

Ora passiamo allo script che ce la trasforma in un accordion menu con effetto easing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
  $("ul#prjcats li ul").hide();
  $("ul#prjcats>li>a").click(function() {
  	$(this).addClass("current");
  	var $subnav = $(this).next();
		if($subnav.is(":visible")) {
		$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
		}
		if(!$subnav.is(":visible")) {
		$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
		$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
		}
		return false;
	});
});

E questo è il nostro script jQuery. Ricordiamoci di includere il framework stesso e il plugin jquery.easing

1
2
<script type="text/javascript" src="../js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.2.js"></script>

Ora vediamo nello specifico cosa fà questo script:
Per prima cosa nascondiamo tutte le liste annidate.

1
$("ul#prjcats li ul").hide();

Al click dei link di primo livello – notare la sintassi “>”

1
$("ul#prjcats>li>a").click(function();

aggiungiamo una classe .current (il colore rosso di selezione) e assegnamo alla variabile $subnav le liste di secondo livello.
.next() trova il primo elemento “discendente” di A: appunto una lista UL

1
2
$(this).addClass("current");
var $subnav = $(this).next();

Qui controlliamo se $subnav è visibile – cioè aperto; se lo è usiamo toggle per switchare tra lo stato di visibile o invisibile. Se é “.is” visibile, chiudi la sub-lista.
Per l’animazione usiamo un tempo “750″- millesimi – ed un metodo easing “easeInOutExpo”. Risaliamo con .prev() ad A e gli togliamo la classe di selezione.
Nota sugli effetti easing: sono 30 e potete giocherellare con i vari metodi di cui trovate un elenco qui. Provate l’effetto che più vi piace. E un’ulteriore nota: gli effetti si fanno apprezzare su liste con molti elementi; se le vostre liste sono corte, evitate effetti di accelerazione/rimbalzo.

1
2
3
if($subnav.is(":visible")) {
	$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}

Qui invece controlliamo se $subnav selezionato non è visibile – è chiuso – e se lo è, prima controlliamo se qualcun altro è aperto “”ul#prjcats li ul:visible”” e lo chiudiamo, e poi apriamo il $subnav selezionato.

1
2
3
4
if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}

Dopo gli if, usiamo “return false;” per evitare che al click dei link di primo livello, che sono vuoti “#”, si verifichi il balzo verso l’alto della pagina.

1
return false;

Ed ecco fatto, accordion menu con effetto easing.

si può fare. seguili

Ale, dovevo annotarlo e farti i miei più vivi complimenti per il risultato raggiunto dopo tutte queste ricerche, colloqui, incertezze. Hai raggiunto il tuo obiettivo, quello che meritavi, quello che volevi.

Loading the player…


© Enel 2007

Sono certo che ora saprai dare il meglio di te, e non preoccuparti più di tanto se ti sfuggono parole come “Social”, “RSS”, “SEO”, “Feed” e “SEM”. Sarà mia cura insegnarti tutto quello che non sai, e ricorda che siamo tutti fieri di te, e io in particolare! Complimenti, mia bellissima manager!

Si può fare, seguili!