Tag Archives: development

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.

getPrevSaturday

Dealing width dates has always been tricky; recently I needed a way to find the first saturday of the previous week since a given date. Here’s a handy method to get the first occurrence of “Saturday”. If sunday is ‘1′ and saturday is ‘7′ and also if you use Calendar (you should use GregorianCalendar), January is ‘0′ and December is ‘11′… i spent half an hour trying to understand why today’s DAY_OF_WEEK was giving me ‘2′ (Tuesday) while I was expecting 6. Looking at the API you get that today’s MONTH is 10. If you say .set(2010,10,29) you’re setting the calendar to november… d’oh.

1
2
3
4
5
6
7
8
9
10
11
 public Calendar getPrevSaturday(Calendar in) {
   Calendar internal = in;
   Calendar prevSat = Calendar.getInstance();
   for(int i = 1; i <= 7; i ++) {
	   internal.add(Calendar.DATE, - 1);
	   if(internal.get(Calendar.DAY_OF_WEEK) == 7) // is it Saturday? then break and assign that date to our prevSat var
		break;
   }
   prevSat.set(internal.get(Calendar.YEAR), internal.get(Calendar.MONTH), internal.get(Calendar.DAY_OF_MONTH));
   return prevSat;
 }

Ok, how do you use it?

1
2
3
4
5
Calendar dataDummy = Calendar.getInstance(); // this is now.
Calendar prevSat = getPrevSaturday(dataDummy);
System.out.println(prevSat);
// if today is 2010 OCTOBER 29
// then the previous Saturday was 2010 OCTOBER 23

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.

jQuery, Microsoft, and Nokia

jQuery logoMicrosoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.

Model-View-Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package net.gcmingati.jsp.beans;
import java.util.*;
public class RoomBean implements java.io.Serializable {
    private static int index = -1;
    private List staffNames;
	public static void main(String [] args)
	{
		RoomBean rb = new RoomBean();
		rb.getStaffNames();
	}
    public RoomBean() {
        initStaff();
    }
    public List getStaffNames() {
		for (int i=0; i<staffNames.size(); i++)
		{
			//return (String) staffNames.get(index);
			System.out.println((String) staffNames.get(i));
		}
        return staffNames;
    }
    private void initStaff() {
        staffNames = new ArrayList();
        staffNames.add("Gian Carlo Mingati");
        staffNames.add("Francesco D.");
        staffNames.add("Fabrizio L.");
    }
}

Un semplice esercizio con la sintassi Java; con questa classe (o JavaBean), visualizziamo gli elementi di un array (di stringhe) su una pagina JSP (in locale con Jakarta Tomcat) per mezzo dei tags JSTL e del linguaggio di espressione EL.

1
2
3
4
5
6
7
8
<jsp:useBean id="stanza" class="net.gcmingati.jsp.beans.RoomBean" />
<ul>
<c:forEach items="${stanza.staffNames}" var="selezione">
	<li>
		<c:out value="${selezione}"/>
	</li>
</c:forEach>
</ul>

E’ che sono stato abbastanza fortunato da poter seguire – obbligatoriamente – un corso di quattro settimane sulla programmazione Object-Oriented, ed in particolare su J2EE (Java Enterprise Edition), ed in particolare sull’utilizzo del framework Java che usiamo qui per sviluppare applicazioni; in partica è Struts 1.2 con una serie di plugins.

Un’esperienza che è giusto definire tale, che ha subito stimolato tutta una serie di considerazioni tra le quali, la più importante è che – con Java si può fare qualsiasi cosa.
Il bello é che comunque i concetti di base sono applicabili a qualsiasi linguaggio di programmazione e una volta che sai cosa vuoi ottenere e sai come scriverlo, il solo limite è la tua fantasia; insomma, passo molto volentieri dalla ricerca sul DOM scripting a quella su come creare applicazioni J2EE basate sul design-pattern Model-View-Controller.

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.

liScroll – a jQuery News Ticker made easy

In questo periodo ho dovuto creare parecchi di questi news ticker(s) per delle app. intranet. Chi lo voleva che leggesse il contenuto da un XML feed, chi lo voleva largo, chi lo voleva più lento… oh ma un requisito comune no eh?! Insomma tanto ho fatto che ho deciso di farne un plugin per jQuery e lo ho chiamato liScroll (beh, scrolla una lista…) così ognuno se lo fa come vuole: si crea la solita lista non-ordinata di links, gli si dà un ID univoco, si include jQuery 1.2.1 e si inizializza così:

1
2
3
$(function(){
	$("ul#ticker01").liScroll();
});

Opzionalmente, se non vi va bene la velocità, potete cambiare la stessa in questo modo:

1
2
3
$(function(){
	$("ul#ticker02").liScroll({travelocity: 0.08});
});

Enjoy jQuery liScroll!

jquery.slideviewer.js

Dopo avere sperimentato un altro pò con la galleria di immagini realizzata nel precedente post, ho realizzato il mio primo plugin ufficiale per jquery: slideViewer.

Si usa molto banalmente; si parte da una lista non ordinata (UL) con dentro delle immagini. Gli si dà un ID (id=”myGalleryID”) ed una classe (class=”svw”) e in perfetto stile jQuery gli si ‘applica’ il plugin dopo avere atteso che sia il DOM sia le immagini si siano caricate:

1
2
3
$(window).bind("load", function() {
	$("div#myGalleryID").slideView();
});

27 giugno 2007: enhanced tooltips
Una cosa che mi ha portato a verificare se un altro plugin poteva essere integrato in slideViewer opzionalmente, e cioè che potesse funzionare con o senza altri plugin estendendo le sue features, è stato il numero di feedback ricevuti sulla discussion list di jQuery.

Commenti come questo, proprio dall’inventore dell’utilissimo toolTip plugin mi hanno fatto molto piacere:

Now, how cool is that? Great stuff. I love the backinout easing. I consider integration of plugins the toughest part of all plugin development, nice to see some great work getting done on that matter :-)

In un paio di giorni (non full-time eh, ho anche gli elicotteri da far volare…) ho integrato il toolTip plugin e ho reso parametrizzabili il tipo di animazione e la sua durata. Il tutorial con gli esempi sono sempre alla stessa pagina comunque posto in queste due righe:

1
2
3
4
5
$("div#mygalthree").slideView({
	easeFunc: "bounceinout",
	easeTime: 2400,
	toolTip: true
});

Si tratta del comando che diamo nell’head della nostra paginetta html se vogliamo creare un galleria di immagini che abbia 2 secondi e quasi-mezzo di durata della transizione tra un foto e l’altra, e che rimbalzi per esempio tramite la funzione bounceinout. Ah appunto, vogliamo anche un tooltip un pò gajardo…

et voilà, slideViewer plugin per jQuery.

Got it, thanks. Fantastic, most lightweight/best slide carousel out there. money. :-P
— E.

Una lista di siti che usano jquery.slideviewer aggiornata al 01/04/2008:
Zachary Zavislak Photography
Di Stefano landscaping
Rival Songs

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!

modostudio

modostudio.net è il sito dello studio di architettura dei miei amici Giorgio, Roberto e Fabio.

modo250407

modostudio si occupa di progettazione architettonica, urbanistica ed industrial design coniugando alla sperimentazione, teoria, ricerca ed innovazione architettonica una elevata conoscenza tecnica e professionalità, grazie alla integrazione delle rispettive competenze dei suoi partners ed alla continua collaborazione e contributo di esperti.

Il sito, di cui ho curato il design e lo sviluppo del front-end è realizzato in (x)html semantico.

Si contraddistingue per la leggerezza del markup, la semplicità di gestione, per il suo design così pulito che fa risaltare i bellissimi rendering realizzati da Fabio e visualizzati tramite il flash component SlideShowPro.