Category Archives: Web Design

modoslider(s)

modoslider
© modostudio

I talentuosi amici di modostudio mi hanno chiesto di realizzare un paio di nuovi imagesliders per il loro sito. Ne ho quindi realizzato uno per la homepage basato sul markup esistente in pagina ed uno per i singoli progetti generato da un feed xml – cioè il DOM relativo a lista ed immagini sono iniettati a runtime; quest’ultimo, in particolare, è una versione modificata del mio jQuery slideViewer, adattato allo scopo per poter usare i feed preesistenti (xml con nome e path delle immagini) che servivano a generare le galleries implementate con SlideShowPro, un Flash-based gallery engine che ha fatto il suo tempo. Lo slider per la home invece si presenta come un endless scroller con thumbnails.

Ken Schles uses slideViewerPro

kenschles
Image credits: Ken Schles photography – portaits page. featuring slideViewerPro.

Tre o quattro settimane fa, il fotografo Ken Schles mi ha contattato chiedendomi se potevo aiutarlo ad implementare slideViewerPro (il mio jQuery gallery engine) sul suo sito; mi capita abbastanza spesso di ricevere richieste di ‘aiuto’ o di implementazioni di nuove features. Questo ‘Ken’ mi aveva inviato anche una url per vedere come stava implementando l’engine e per farsi aiutare a risolvere alcuni problemi di allineamento su altri elementi della pagina; incollo la url nel browser e appena parte lo slider ecco apparire volti molto noti, tra i quali mi sembra di riconoscere Rod Stewart, Alicia Keys e Martin Scorsese. Dico, ma chi é questo Ken? Leggo la sua bio e mi accorgo che é uno dei fotografi americani più noti ed importanti, con esposizioni permanenti al MoMa di New York, autore di libri definiti una “intellectual milestones in photography” (Süddeutsche Zeitung) e di foto degli album di rock bands come Cypress Hill e Green Day, solo per citarne alcune. Insomma un pro della macchina fotografica.

In un primo momento ho tentato di applicare qualche fix al CSS ma mi sono subito reso conto che avendo Ken costruito quel sito nell’arco di alcuni anni, si era portato dietro parecchie incongruenze e ripetizioni inutili nelle dichiarazioni; un altro grande problema risiedeva nel fatto che nessuna pagina aveva lo stesso markup della precedente: ogni pagina era unica. Ovvio, un progetto amatoriale ma tutto sommato abbastanza bene eseguito; si vede che usa un Mac e che il suo browser di riferimento deve essere Safari: ha usato selettori ed animazioni ‘tipiche’ del webkit, molto avanzate e questo mi ha stupito. Comunque, mi sono proposto di riscrivere per intero il CSS e anche i templates dai quali avrebbe potuto continuare da solo a ricodificare l’intero sito; era l’unico modo – fra l’altro – di far funzionare correttamente la gallery e rendere la grafica consistente in tutte le pagine. Oggi lo ha pubblicato e sono davvero contento di averlo aiutato a ricostruire questo suo sito, nel quale evidentemente ha investito ore di lavoro e voglia di imparare. Bravo Ken.

vizlab.it

vizlab
VIZLAB – Digital Images for Architecture and Design www.vizlab.it

Gli amici di modostudio hanno chiesto la mia collaborazione per un nuovo progetto: Vizlab. Vizlab é il loro Visualization Department cioé l’area dello studio dedicata ai rendering; per un buon showcase dei loro incredibili lavori, abbiamo pensato di realizzare una gallery di immagini fullscreen con una interfaccia minimale ed effetti di fading fra una slide e l’altra, con jQuery, ovviamente. Dai rendering pubblicati ci si rende subito conto che ricerca, sviluppo ed un elevato livello tecnico rappresentano il motore e la vision del gruppo; modostudio/vizlab é una realtà tra le più promettenti del panorama italiano… e come si dice? Una immagine vale più di mille parole.

Dal punto di vista design/development del minisito, oltre a consigliarvi di dare uno sguardo al codice JavaScript (jQuery), posso anticiparvi che parti di esso potrebbero essere utilizzate per costruire soluzioni similari o più avanzate; non entrerò troppo nel dettaglio ma posso dire che data l’esigenza di dover visualizzare delle immagini a fullscreen, l’unico problema poteva essere quello di dover attendere il caricamento delle stesse (5, 25 o 100 e molto grandi) prima di far partire lo slideshow (come avviene per slideViewer e slideViewer Pro). Per risolvere il problema ho pensato di sviluppare una soluzione in cui gli oggetti immagine vengono reperiti a partire da un file JSON nel quale si trovano il path e la descrizione – non sono quindi inseriti del DOM della pagina; in questo modo, definito un limite minimo di attesa (per es. si attenda che le prime 3 immagini siano in memoria) é possibile far partire lo slideshow. Non é di certo una soluzione non intrusiva (se JavaScript é disabilitato non si vede nulla) ma se state tutti in fissa con FaceBook vuol dire che avete tutti JS abilitato.

In realtà si tratta del motore per slideshow basati su JSON che avevo ideato per visualizzare le mie foto da flickr ma che non ho mai realmente completato e reso pubblico sotto forma di plugin poichè in questo momento sono più interessato allo sviluppo con Processing. In ogni caso, usando il metodo getJSON() é possibile parsare un file di questo tipo ed utilizzarlo per costruire a runtime tutto il DOM che volete; poche righe di codice per un risultato professionale e la base per un plugin molto interessante, che mi riprometto di completare, prima o poi.

Web Design All-in-One For Dummies

web design all in one for dummiesQualche mese fa, Sue Jenkins (Luckychair) mi ha chiesto il permesso – prontamente accordato – per poter pubblicare sul suo libro di prossima uscita “Web Design All-in-One For Dummies“, in una sezione relativa alla creazione di gallerie di immagini, un tutorial su slideViewer – il mio famigerato quanto semplice (per dummies?) jQuery plugin; il libro è uscito, e alle pagine 447-449 (Chapter 8 > Creating slide shows) si parla proprio del mio plugin e di come costruire una galleria di immagini per il proprio sito. Sono piccole soddisfazioni, ma questo dimostra quanto alla fine, lavorare ‘per gli altri’ porti sempre buoni frutti.

na3.it

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

na3
na3 studio di architettura

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare – con effetto easing – gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!

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.

jQ stripViewer

Come probabilmente si é capito da vari post su questo sito, tra i miei interessi al momento c’è jQuery, questo framework JS che sta rivoluzionando il mio modo (ma non solo il mio) di scrivere javascript (il behaviour di una pagina).
Inspirato dagli effetti in dynamic HTML di questo sito e dalle ormai ‘vecchie’ interfacce in Flash tutte sliding e rimbalzanti, mi sono detto: ma perchè non farne una con jQuery?

strip viewerDi componenti slideShow in js o scritte anche con jQuery già ce ne sono, quindi non mi sono inventato nulla di nuovo, ma ho creato una base su cui lavorare. L’obiettivo é arrivare alla realizzazione di un plugin jQuery per visualizzare delle immagini in una mini-gallery e tale gallery dovrebbe essere parametrica cioè funzionare a prescindere dal numero e dimensione delle foto. Un motore che vada bene per foto grandi e piccole e basato sull’ormai standardizzato concetto che il javascript nelle pagine deve essere “degradabile” e cioè che se l’utente non ha l’interprete JS abilitato nel browser, semplicemente non vede gli “effettini” ma ha accesso comunque ai contenuti.

E così ho creato uno stripViewer (no, non ci sono donnine nude; per strip intendo una ‘fascia’, e cioè un’immagine lunga di cui si vede solo una porzione), e cioè un componente che ‘muove’ con un effetto easing le immagini della gallery, rivelandone solo una alla volta. Il tutto a partire da un markup semplicissimo, come questo:

1
2
3
4
5
6
<ul>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer01.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer02.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer03.jpg" /></li>
	<!-- eccetera -->
</ul>

Ok vediamo nello specifico che ci facciamo con questa lista. La lista è una banalissima lista flottata (così tutti i LI sono orizzontali) e all’interno di ogni LI abbiamo messo un’immagine.
Ok una lista di immagini. Bene, ci mettiamo intorno una DIV col seguente stile:

1
2
3
4
5
6
7
8
#stripViewer {
	position: relative;
	width: 200px;
	height: 100px;
	overflow: hidden;
	border: 5px solid red;
	margin: 2em 0;
}

Bene, si vede che questa DIV funge da maschera per il suo child (la lista UL) e ne rivela solo 200px; quindi tutte le immagini le dobbiamo fare 200px? Si, fino a che non avrò reso parametrico il valore width del container della lista…
Ok e ora?
Ora creiamo l’interfaccia. Una serie di ‘bottoni’ che comandino la gallery.
Partiamo sempre da una lista. Le liste, ricordate, sono la chiave per scrivere la struttura di un sito: tutto può essere una lista.

1
2
3
4
5
6
7
<ul>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<!-- tanti Li quanti sono quelli della lista immagini -->
</ul>

Ok, a questo punto aggiungiamo un pochino di javascript (jQuery).

1
2
3
4
5
6
7
8
var steps = $("#stripViewer>ul > li > img").attr("width");
	$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) );
		var cnt=-(steps*i);
		$(this).click( function() {
			$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
		});
	});

Vediamo come funziona:

1
var steps = $("#stripViewer>ul > li > img").attr("width");

Qui cerchiamo la dimensione delle immagini nella lista. Si, devono essere tutte della stessa larghezza (ma lavorerò anche su questo per svincolarla dalle dimensioni fisse e renderlo così parametrico).
L’attributo width delle immagini mi torna 200px.
Ok quindi gli step da fare sono tuti da 200. Ad ogni click ’scorro’ sull’asse x di 200px o multipli di esso (a seconda del tasto premuto).

1
2
3
$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) )
});

Qui per ogni tag A nella mia lista in “div#stripTransmitter” stampo (.append()) il numero. Otteniamo così una lista con bottoni numerati da 1 a n.

E ora la parte divertente:

1
2
3
4
var cnt=-(steps*i);
$(this).click( function() {
	$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
});

Qui la variabile cnt vale 200(steps) moltiplicato l’iteratore (i) quindi varrà 200, 400, 600 ecc.
Sul click di questi tag A nella nostra lista in “div#stripTransmitter” usiamo il metodo .animate() per dire che ci spostiamo a sinistra, quindi negativamente (-) per i pixel passati da steps , in 750 millesimi di secondo con animazione easing di tipo “expoinout”. per funzionare necessita ovviamente di jQuery Easing Plugin v1.1 ma se usassimo i metodi built-in di jQuery ci basterebbe scrivere “slow” al posto di “expoinout” e funzionerebbe lo stesso, ma senza easing effect.

Et voilà, uno stripViewer con jQuery.
Demo1: stripViewer di un’ unica immagine lunga
Demo2: stripViewer di una serie di immagini in una lista

Enjoy!

Google Maps Street View

gmaps street viewStreet View é una nuova feature di Google Maps che permette di navigare panorami (Adobe Flash) a 360 gradi, ad alta risoluzione, ad altezza della strada di varie (per ora, poche) città degli Stati Uniti. Google ha investito $25 (milioni) per l’operazione ed evidentemente per scattare tutte queste foto ha sguinzagliato i suoi “geeks” in giro per le città. Ecco il tipo di macchina fotografica impiegata.

La cosa simpatica che sta avvenendo, mentre questa nuova feature viene sempre più usata, é che ci sono siti che raccolgono le stranezze di Street View e cioè foto di persone e cose, che a causa dell’adattamento e della post-produzione necessaria a ricreare tutti questi panorami in Flash, appaiono stravolte nelle sembianze, addirittura senza faccia, o immortalati quando meno se lo aspettavano…. guardate un pò voi. Ma chissà cosa dicono le persone fotografate. Avranno dato l’autorizzazione a Google per diffondere le loro foto? Non credo proprio, si vede chiaramente che queste foto sono state scattate in maniera pseudo-automatizzata (ogni tot. metri).

With Street View, you can virtually explore city neighborhoods by viewing and navigating within 360-degree scenes of street-level imagery. It feels as if you’re walking down the street!

Io già ho visitato ‘a piedi’ tutta l’area vicino al bay bridge a San Francisco e vi assicuro che questa nuova feature é davvero fantastica e certamente diverrà popolare molto presto. Provate voi stessi.

Queste le città visibili ad oggi: San Francisco Bay Area, New York City, Las Vegas, Denver and Miami.

 

CSS3: si ma quando?

css3infoIeri mi sono imbattuto in questi due post: Is it time for CSS 2.2? di Roger Johansson e CSS2.2 di Andy Budd.

Si tratta di un paio di riflessioni sull’ argomento Cascading Style Sheets e sulla lentezza con la quale il W3C sta lavorando: é infatti dal 1999 che si attende la release ufficiale dei “moduli” CSS3 (cioè delle specifiche da implementare nei browser al fine di supportare la nuova sintassi CSS3).

The early pace of CSS development was pretty impressive. First proposed by Hakon Lie in Oct 1994, CSS1 became one of the first W3C recommendations in Dec 1996. Nipping at its heals, CSS2 became an official recommendation in May 1998, just 18 months later. By June 1999 the first 3 draft modules of CSS3 had been published, and in their ground breaking book published that same year, Bert Bos and Hakon Lie postulated that CSS3 would arrive sometime in late 1999. Over 7 years later, and we’re still waiting. This begs the question, what went wrong?

Per noi designers e developers, già avere il pieno supporto da parte di tutti i browser in circolazione, almeno della sintassi CSS2.1 già sarebbe cosa buona perchè non dovremmo usare selettori differenti per ogni tag a seconda dei browser (sopratutto per Microsoft Internet Exploder, che anche nella versione 7 non ce l’ha fatta a supportare almeno un paio di selettori decenti… ma si sapeva… infatti io ancora non me lo sono installato).

Solo Mozilla/Firefox supporta quasi del tutto la sintassi CSS2.1 ma addirittura supporta alcune delle cool features di CSS3 come i multicolumns layout, rounded corners, alcuni potenti selettori di attributo…
Il problema dei CSS riguarda in generale anche il futuro del web perchè se i browser vendors da un lato hanno enormi difficoltà ad implementare le direttive W3C, c’è anche da dire che il W3C stesso sta impiegando troppo tempo a definire il futuro del web, dimenticandosi nel frattempo del presente. Comunque se volete dare un’occhiata alle ‘cool features’ di CSS3 (cool features per designers, ovviamente) guardatevi questo sito e il PDF che Andy Budd aveva preparato per una recente conference sui web standards in Scozia.

Vini nel Mondo

Vini nel mondo.org è il sito di una delle più importanti rassegne d’incontro tra produttori e consumatori di vini, ambientata in una città gioiello, quale è Spoleto.

Dal 1 al 3 giugno prossimi, Spoleto torna ad essere la capitale italiana dell’eccellenza enologica. Il programma dell’ appuntamento del vino per gli appassionati, prevede una ricca esposizione di cantine ed etichette, un fitto panorama di degustazioni, incontri e spettacoli, un’importante asta di beneficenza e, per il pubblico del sabato notte, una scintillante seconda Notte bianca del vino.

Quest’anno siamo alla terza edizione e per il secondo anno consecutivo ho curato la direzione tecnico-creativa ed il graphic design del sito; a differenza dell’anno scorso però, non ho sviluppato il markup ed i CSS perchè questi ultimi sono stati realizzati da una società di giovani professionisti di Spoleto che hanno anche realizzato un bel CMS in PHP.

vnm150507

Il risultato finale è un bel portale, che rispecchia in pieno quanto già ideato da Meet per il BTL; abbiamo usato SlideShowPro e jQuery (thickbox e curvy corners) e devo dire che sono stati implementati in maniera egregia.

Un sito moderno dunque, facile da navigare e pieno zeppo di contenuti.

Correte a Spoleto dal 1 al 3 giugno e… buoni vini nel mondo a tutti!