Tag Archives: web

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.

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!

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!

Opera9, il posizionamento relativo degli elementi e jQuery

Avvertenza: le porzioni di codice riportate in questo post non corrispondono più alla reale implementazione iniziale nel blog. Ragioni di manutenibilità, compatibilità o mera obsolescenza ne hanno reso necessaria la rimozione.

Esigenza:

Inserire dinamicamente un’icona, posizionarla in maniera relativa (position: relative;) senza conoscere le dimensioni del container. E fare in modo che funzioni anche su Opera

relatively_positioned

Si lo so, il titolo è un pochino ‘criptico’ ma i miei colleghi developers e designers forse intuiscono che Opera9 è un browser e ‘posizionamento relativo’ ha a che fare coi CSS.

Ancora non ci siamo? Mi riferisco al bug in cui mi sono imbattuto in relazione al posizionamento ‘relativo’ di un elemento in un altro elemento di cui non è dichiarata la larghezza.

Prendiamo come esempio due siti che utilizzano questa tecnica, di apporre una gif sopra alla thumbnail (quindi posizionato in maniera relativa) di un video: YouTube e MTV; anche io volevo la mia iconcina enlarge img icon ma su questo mio blog, le cose non sono così semplici.

  1. Le immagini non sono necessariamente larghe sempre 150px
  2. Il wrapper del ‘blocco’ immagine + ombra non ha dimensione fissa
  3. Vorrei evitare di ’sporcare’ il codice inserendo “a mano” l’icona
  4. Inoltre poichè le immagini con ombra non hanno sempre la stessa dimensione (io le creo da Photoshop larghe 150px, ma come avevo spiegato l’ombra è dinamica e prescinde dalle dimensioni) ed il loro container div non ha dimensione definita, position:relative non funziona su Opera9, che mette l’icona spostata alla destra delle immagini, invece io le voglio sopra alla thumnail

fake_positioned_twoCome potete notare se fate click sull’immagine, questa si apre nella sua versione originale (non è ingrandita, in realtà è sempre la thumbnail) e non ha l’icona.
Ok, l’icona enlarge img icon è stata aggiunta a runtime con jQuery.
Ma vi ricordate che ho detto? Opera vuol sapere le dimensioni del container altrimenti per lui position:relative non funziona correttamente.

Ok allora tramite il ns. jQuery possiamo sapere quanto è “largo” qualcosa:

1
$('img.dropshadow').width();

Questo mi ritorna la larghezza dell’immagine nel link (la thumbnail).

1
var tbWrapperWidth = ($('img.dropshadow').width() + 34);

Qui creo una variabile che vale la larghezza dell’immagine + il margine necessario per staccare immagine ed ombra dal paragrafo di testo.

1
$('div.tb-wrapper').css({ width: tbWrapperWidth });

Qui assegno al div che mi avvolge tutto, uno stile in linea che definisce la larghezza in pixel tipo: style=”width: 184px;”
E qui è il trucco. Ora Opera conosce la larghezza del wrapper e mi posiziona l’icona correttamente.

Il resto del codice, tramite il metodo .prepend(content) di jQuery aggiunge la mia icona ed il gioco è fatto.

1
2
3
var tbWrapperWidth = ($('img.dropshadow').width() + 30);
$('div.tb-wrapper').css({ width: tbWrapperWidth });
$("a.thickbox").prepend("<img class="tb-larger" alt="larger view" src="http://www.gcmingati.net/wordpress/wp-content/uploads/tblarger.gif" />");

Enjoy!

Flash video accessibili e non intrusivi

jQuery.Flash – sviluppato da Luke Lutman – è un potente e flessibile plugin per jQuery che serve ad aggiungere a runtime un ‘oggetto’ Flash. Come questo.

Loading the player…


Google, the Master Plan. © 2007 O. Halici, J. Mayer

Pages are progressively enhanced when Flash and Javascript are available, and fallback to plain (X)HTML when they’re not — like search-engines, pdas or mobile phones. Replacements can happen as soon as the dom is ready. (X)HTML, CSS and Javascript stay where they belong — away from one another — making it easy to remove, update or swap out down the road.

Il plugin, offre la possibilità di fare dinamicamente l’embed di 5 ‘tipi’ di flash movies (Basic Embed, Flash Text-Replacement – sIFR, MP3 Player, YouTube Video, Inline Params, FlashBlock). Io mi sono ispirato con lo scritp che fa funzionare l’MP3 player.

Questa la mia versione ‘ispirata’ (ma sia chiaro, basata 90% su quanto già scritto da Lutman, ma anche 98…).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $('a[@href$="flv"]').flash(
{ src: 'flvplayer.swf'},
{ version: 8 },
function(htmlOptions) {
$this = $(this);
htmlOptions.width = '320';
htmlOptions.height = '260';
htmlOptions.flashvars.file = $this.attr('href');
htmlOptions.flashvars.image = $this.children().attr('src');
htmlOptions.flashvars.showfsbutton = 'false';
htmlOptions.flashvars.autostart = 'false';
$this.before($.fn.flash.transform(htmlOptions));
}
);

Infatti, anche se l’esempio con l’mp3 player usa l’SWF FLV 3.6 di Jeroen Wijering (che tra l’altro é il miglior .flv player attualmente reperibile), Lutman non aveva pensato ad usare questo player anche per i video.

E io, che tra elicotteri e gite fuori porta ho parecchi video che volendo potrei postare, avevo bisogno di un sistema che mi mantenga le pagine pulite e semplici da gestire e così ho ‘esteso’ lo script per le mie esigenze.

E questo metodo è perfetto.
Dovunque io voglia un video d’ora in poi, mi basterà inserire un’immagine ed un link:

1
<div class="flv-player-instance"><a href="http://www.domain/media/yourpathtovideofile.flv"><img alt="Bergen Intrepid Turbine R/C helicopter" src="http://www.gcmingati.net/wordpress/wp-content/uploads/bergen.jpg" /></a></div>

Il nostro javscript sostituisce a runtime il link con il nostro bel lettore di file flv e usa come preview l’immagine nel nostro tag ‘a’ e come path per il filmato, l’attributo ‘href’ del link.

Sounds accessible?
Enjoy!

Nota: jQuery Flash plugin su IE ha il bug “jQuery/Packer/ActiveX Bug” che sostanzialmente forza gli utenti a fare click su ogni singolo controlo ActiveX (Flash, Quicktime, etc.) in una pagina, prima di poterlo utilizzare anche se il plugin è embeddato dinamicamente via javascript. Per questo su IE bisogna prima attivare il plugin facendo click sopra al player video e poi riprodurre il filmato. E’ un bug risolvibile e comunque non credo sia bloccante… piuttosto usate Firefox!

Nota: il video qui riprodotto è stato downloadato da YouTube grazie a VideoDL.

Update da mercoledi 13 febbraio 2008: jquery.flash non é più utilizzato per fare l’embed dinamico del player di filmati Flash Video JW FLV Media Player 3.14. Al suo posto utilizzo SFWObject (formerly known as FlashObject) ed é quindi possibile usufruire della modalità full-screen (in Firefox e Opera). Gli esempi in questo post restano comunque validi nella sintassi ma è comunque consigliabile usare SWFObject per l’embed dei file Flash, ed in particolare col JW FLV Media Player vista la disponibilità di una API JS con cui controllare il playback e non solo.

multicolumn lists con jQuery

Problema:

Creare una lista disposta su 3 colonne, senza sapere a priori quanto è lunga la lista.

E aggiungono:

Non preoccuparti di quanto è lunga la lista, ci servono 3 colonne di links. La lista andrà su un sito pubblico.

mmmh. vediamo…
L’obiettivo, come al solito, è scrivere il meno possibile. Ma non perchè sono lazy, ma perchè è una sfida. Quindi mi serve certamente 3 colonne UL. Flottate, così ottengo 3 colonne. ok.
Ma per scrivere meno, dovrei avere una sola lista….

Per creare una lista su tre colonne, se sapessi quanti elementi sono nella prima e nella seconda colonna non sarebbe difficile. Basta applicare al primo LI della mia ipotetica seconda colonna, un margin-top negativo pari all’altezza della prima, ed un margin-left sempre pari alla larghezza delle colonne (tutte e due le precedenti, e così via).

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="mainlist">
<li class="licol1"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">3 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">n --- --- </a></li>
<li class="licol2"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">n --- --- </a></li>
<li class="licol3"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">n --- --- </a></li>
</ul>

Ma se questa lista non so quanto è lunga? Voglio dire, se mi possono anche dividere in tre le liste, assegnare una classe diversa per ogni blocco di lista, come posso inserire il margine negativo al punto prestabilito per fare andr sù la seconda e la terza colonna? E quale è questa misura, esattamanete in pixel?(E’ evidente che questa lista viene creata dinamicamente tramite qualcosa server-side come per es. una JSP.)
Ecco che mi viene incontro jQuery una libreria javascript ideata da John Resig e attualmente molto, molto diffusa ed estesa da molteplici plugins sviluppati dalla community.
Infatti il motto di jQuery è “write less, do more” e significa che jQuery serve per scrivere meno javascript ed ottenere di più. Tra le cose che sin dall’inizio mi hanno impressionato positivamente di questa libreria, oltre ai metodi built-in per quel che riguarda Ajax, qualche effetto e in generale la manipolazione del DOM, sono i selettori (supporta la sintassi di CSS 1-3 e basic XPath ).

E vediamo con questi selettori cosa si può fare. Ecco il codice che mi risolve brillantemente il problema delle tre liste parametriche affiancate, e del loro posizionamento.

1
2
3
4
5
6
7
8
$(document).ready(function(){
elNumberInColOne = $(".licol1").length;
var PixelCountColOne = 0;
for (i=0; i li.licol2:eq(0)").css({ marginTop: - PixelCountColOne});
ElNumberInColTwo = $(".licol2").length;
var PixelCountColTwo = 0;
for (i=0; i li.licol3:eq(0)").css({ marginTop: -PixelCountColTwo});
});

La parte più interessante, secondo me qui da notare è il selettore inserito nel ciclo

1
"li.licol1:eq("+i+")").height() + 9

che cerca nel LI con classe “licol1″ OGNI elemento LI e ne calcola l’altezza in px. +9 poi sono il padding top e bottom e il bordo assegnati via CSS al singolo LI (al suo A, a dire il vero).
Quindi cosa fa questo script?

  1. Prende la prima colonna, e per ogni LI ne calcola l’altezza in pixel
  2. Assegna al primo LI della seconda colonna un margin-top negativo pari all’altezza della prima colonna. Il margin-left resta assegnato dal css.
  3. Ripete lo step 2 nella terza colonna
1
"ul#mainlist > li.licol2:eq(0)"

Et voilà. Css multicolumn lists.
Comunque allego il sorgente dell’esempio, per chi volesse usarlo.

Gli standard W3C in Banca

Mi occupo del design e dello sviluppo del front-end di alcuni siti e web applications di uno dei maggiori gruppi bancari italiani. Quindi sono un web designer. oh-yeah (?!)
Saltuariamente, svolgo qualche lavoro come freelance, ma il grosso del mio entusiasmo e del mio impegno… é vanificato ove lavoro : – )

Mi é stato chiesto di scrivere due righe per una presentazione, due righe su cosa sono i web standard e come e perché li usiamo in banca, per le ns. applicazioni.
Le linee guida W3C in materia di accessibilità dei contenuti e struttura delle informazioni definiscono i tipi di tecnologie da utilizzare per lo sviluppo del frontend, e sono tecnologie ideate per resistere al tempo e essere accessibili al pubblico più vasto possibile.
L’ obiettivo è sempre la realizzazione di un markup pulito e semantico, pronto per la transizione a XML e altri futuri linguaggi. Le web applications in linea con gli standards hanno le seguenti principali caratteristiche:

  1. HTML semantico: si deve usare una marcatura semantica per strutturare il contenuto di un documento.
    Quando esiste un elemento XHTML con un significato strutturale idoneo per la parte di contenuto che si sta codificando, non ci sono ragioni per usare altre soluzioni che tra l’ altro, rendono pesante il codice e difficile la manutenzione dello stesso. Utilizzando HTML semantico, si rende il documento significativo per ogni browser, che sia l’ultimo browser grafico su un moderno PC, un vecchio browser che non gestisce i CSS, o un browser testuale in una shell Unix.
  2. CSS (Cascading Style Sheet): Permettono di controllare senza limite alcuno la disposizione degli elementi di un documento, il modo in cui viene reso ogni elemento grafico, testuale e di navigazione. Funzionano bene con XHTML strutturato e semantico. L’ uso dei CSS, oltre che standard, assicura notevoli vantaggi in termini di tempo richiesto per le modifiche (sia di tipo grafico che strutturale) dato che una modifica su un singolo file (per esempio il colore di sfondo della testata, diverso per ogni Banca) si riflette su tutte le pagine, o ancor di più un elemento come un menu può essere disposto in verticale o in orizzontale con poche righe di codice, con evidenti risparmi di tempo e certezza del risultato.
  3. JavaScript e AJAX (Asynchronous JavaScript And Xml): Lo strato di logica col quale si definisce il modo in cui l’ interfaccia (o singole parti di essa) comunica (chiede e riceve dati) col back-end: AJAX é un insieme di tecnologie standard che permettono di comunicare in maniera asincrona col web server richiedendo solo porzioni di dati, il quale tramite servizi web XML-based li invia allo strato Ajax, che li processa e li visualizza a schermo. Il risultato é un’ applicazione più veloce, dal momento che l’ammontare dei dati scambiati tra il browser e il server é notevolmente ridotto.
    Molto lavoro del Web server viene fatto dal client; la user-experience ne é notevolmente migliorata.

Certo, questi siti, magari trattano argomenti meno banca-oriented. Ma il concetto resta lo stesso: usare gli standard torna utile sia che si debba realizzare qualcosa per coca-cola sia che si debba favorire l’accesso semplice ed intuitivo a molte informazioni.