First of all we’ll make a checklist of requirements, second we’ll make a scratch of the carousel, third we’ll analyze each element of the scratch, which is their role in the context and at the end we will develop the jQuery solution.

Requirements and scratches

Our carousel should have 5 visible elements at time: one in the center and other on both sides of central element. The elements would become transparent as they assumes a far position from the center of the carousel. The distant elements, must be smaller than the intermediate elements, which in turn must be smaller than the central element.

Starting with the above idea in mind, I made a scratch of the carousel as you can see in the image below.

So, we have a main container that encloses our carousel, the item container and two navigation elements placed on both left and right sides of the carousel, inside the main container.

Items into the carousel will be classified depending on their current position:

• Current Item is the current visible item in the carousel
• Near Item is the first item near the carousel, placed in the middle of our carousel..
• Far Item is the item at the border of the carousel

At this point is obviously clear how to structure the carousel to make it semantically valid.

1. The carousel is a list of items. Sorted? Unordered? It does not matter, it could matter only if think that the information inside the carousel makes their sense if read sequentially, else we can use an unordered list.
2. The navigation items are simply hyperlinks to nothing.
3. The main container is a “div” element. It can host inline elements and blocklevel elements (the unodered list) and inline elements (the hyperlinks).

I was just thinking about that:

But what we need to create by hand? And what not?

We will create the main container and the unordered list too, but we will not create the navigation links because they will be produced by javascript.

<div id="my-carousel">
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
    </ul>
</div>

The above structure, without stylesheet and javascript, will be semantically valid. The next week we will produce the CSS and wetting our hands with jQuery plugin developement.

Stay tuned!

Issue #1 “the truncated images count as full view images”

Each item has an exact size, in our case it is 105px x 105px. So if the wrapper of the carousel has a width multiple of 105px nothing goes wrong. But if the wrapper is bitter greater than multiple of 105px (for example 317px), the pagination break to work properly. This is because in an exact point of the script we are counting the number of contained items in the wrapper rounded by excess ( ceil function in javascript ).

So what we need to do, teorically, is just to change the used method from ceil (rounding by excess) to floor (rounding by defect) in the following instruction:

$wrapper.visible = Math.ceil($wrapper.innerWidth() / singleWidth),

This will solve all our problems.

Issue #2 “Handling the swipe”

Managing the swipe gesture is not so simple, than we could proceed in two ways.

The first is to handle the touchstart/touchend events, identify the gesture calculating the angle of movement and in dependence of it raising the exact event (swipe to left, swipe to right). How to do that?

The way i thing it would be correct to manage the swipe is:

1. handling the touchstart event to grab the first point where the touch begins
2. handling the touchmove event to grab all the points where the user is swiping
3. for each time that the touchmove event is raised, you have to calculate if all points are on the same line with tollerance. If it is not so we keep care to untrack the next movements and release all user resource.
4. reached the minimum distance and ensured that the user is swiping (the above point 3) we can raise a custom event onSwipe where you can describe the distance from the base point, the speed,   the angle the start point and the end point.

Another much simpler way to do this, is integrating the jQuery Touchwipe plugin into our pages and leave it the hard work. This plugin works almost fine but it is acceptable for our goal.

It can manage the 4 directions (left, right, up and down) we need just the left and right direction. But what do it not do?

It does not give us the speed, angle or if the gesture is exactly a swipe: you could make a wavy movement and the swipe will be raised if the X or Y distance between start point and end point will be at least the minimum defined.

So the only things we need to do are:

1. Creating just 2 new methods in the Carousel Javascript: gotoNext() and gotoPrev() just after the gotoPage() method. Is goal is to move the carousel to the next page and to the previous page.
2. Including in our pages the jQuery Touchwipe plugin
3. Attaching it to the carousel and
4. Configuring its behavior.

The gotoNext and gotoPrev methods will be simply:

function gotoNext(){
return gotoPage(currentPage+1);
};

function gotoPrev(){
return gotoPage(currentPage-1);
};

Then we have to attach the  swipe plugin to the wrapper then configure its behavior in this way:

$wrapper.touchwipe({
wipeLeft: function(){
gotoNext();
},
wipeRight: function(){
gotoPrev();
}
});

Our plugin now works with swipe and buttons on touchscreen that implements the touch events and works with navigation buttons on desktop browser and mobile device that does not support the touch (but support at least javascript :-) ).

I made a package with the full source code (css, javascript, dependencies and used html), and a working demo.

Happy coding to all!

Mi domando quindi perchè non potrei partecipare anche io al dibattito nazionale? Non sarò un esperto di economia ma, visto che parlano tutti di economia, penso di non aver minor diritto di altri a chiacchierare. Non lo farò con la voce ma ci proverò con questo articolo sul mio blog. Almeno non sarete costretti ad ascoltarmi!

Non mi soffermerò a lamentarmi dei parlamentari che guadagnano 2 volte quello che guadagnano gli altri parlamentari in altri paesi d’Europa. Una persona che lavora al servizio del paese merita ogni centesimo che prende, se lavora bene.

Non voglio raccontare del sistema Europa che non vuole salvare l’Italia o del conto alla rovescia che ci separa dal defaul in stile profezia Maya.

Non voglio lamentarmi delle pensioni, perchè, già quando iniziai a lavorare, ero consapevole che quanto versavo nelle casse dell’ente previdenziale sarebbe andato a favore dei pensionati attuali e che il Paese non avrebbe potuto garantirmi alcuna pensione,  trovandosi l’Italia in una fase di invecchiamento.

Io ho voglia di chiacchierare in materia di evasione fiscale. Questa trascurata materia per la quale tutti dicono che è complicato. Lo sarà certamente non lo metto in dubbio ma sono un po’ perplesso su come si apporccia al problema.

Dunque, l’ammontare dell’evasione fiscale in italia è mediamente del 38%, ovvero 275.000 miliardi di euro (!!!). Magari saranno miliardi di lire? Può darsi, non sono un esperto di finanza, allora vuol dire che l’evasione fiscale in italia ammonta a circa 150 Miliardi di Euro? Ovvero 6 volte la manovra “Salva Italia” varata dal Governo Monti!!!

Beh, io sarò un semplicione, un superficiale e uno che fantastica troppo ma… se il Governo consentisse anche ai privati di scaricare l’IVA che scenario si presenterebbe?

Sì la prima cosa che salterebbe all’occhio è che l’IVA è uno degli incassi più redditizi che lo stato ha e quindi se si toglie quella è tutto il sistema che va a gambe all’aria.

Però se la persona potesse scaricare il costo di un bene, un servizio o quanto altro così come fanno le aziende e poi scaricare (o meglio recuperare) una parte dell’IVA versata alle casse dello stato (anche un misero 20% di quanto viene anticipato in fase d’acquisto, ovvero il 2.5% di quel 21% attuale), chiunque vorrebbe ricevere fattura, scontrino e ricevuta per qualsiasi servizio ricevuto!

Gli evasori sarebbero costretti ad uscire allo scoperto perchè a quel punto sarebbero denunciati direttamente da chi riceve il servizio! Non credete?

Avrò detto tante cavolate sicuramente e me ne scuso con gli economisti, politici e affaristi di ogni sorta, ma un cittadino onesto che paga le tasse e rispetta la legge ha tutto il diritto di dire la sua! Siamo pur sempre in Democrazia!

Poichè ho due bimbi in casa che già da qualche settimana hanno iniziato a definire questa lista, ignari della vera identità dell’uomo barbuto vestito di rosso che arriva sulle renne con tanti campanelli, mi sono domandato se ci fosse un Babbo Natale tecnologico cosa potrei chiedergli io?

Segue la lista dei miei desideri tecnologici:

1. Banda larga: sono una di quelle persone colpite dal Digital Divide (non è una malattia ma un disagio social-digitale) e quindi sono costretto a utilizzare una connessione a banda larga mobile a 3.6MBit con le relative limitazioni.
2. Aggiornamento del layout del mio sito web: è da agosto del 2010 che il layout è rimasto invariato, sì certo ho apportato di tanto in tanto qualche modifica, ma è quello che avevo iniziato ad usare provvisoriamente 15 mesi fa e credo sia ora di cambiare. Qualcuno ha suggerimenti da darmi?
3. Più risorse per il framework php ALPHA: ultimamente ho ripreso in mano il progetto valutando una riscrittura completa di alcune delle classi del Core. Ho inziato a fare degli esperimenti, ma di questo vi racconterò nei prossimi giorni con maggiori dettagli. Sarebbe comodo però se Babbo Natale mi prestasse un po’ di suoi folletti per migliorare il Framework sarebbero i benvenuti!

La mia letterina la concluderei così:

…Quindi, non avendo grosse pretese, che ne dici di contattare un gestore telefonico e digli di attivare la connettività nella mia zona (sì poi il contratto lo pago io non devi accollartene tu)? Sì poi se conosci un buon webdesigner che vuole farsi pubblicità e propormi un layout innovativo, essenziale e adatto al mio sito certo non disdegnerei il suo operato anzi, caro Babbo Natale, te ne sarei Grato! E perchè non coinvolgere una trentina dei tuoi folletti nelle attività di sviluppo sul framework? Se questi folletti fossero italiani sicuramente si potrebbe sbandierare il come progetto tutto italiano!

Insomma Babbo Natale, sappi che il bicchiere con il latte e i biscottini te li lascerò comunque sul tavolino accanto all’albero, ma tu puoi vedere di fare qualcosa anche per me?

Dunque, partiamo dall’inizio, diverso tempo fa ho lavorato prima come impiegato e poi come collaboratore presso il Circondario Empolese Valdelsa, per il quale ho sviluppato e manutenuto il sistema per la gestione delle domande e delle offerte di lavoro da parte dei Centri per l’Impiego semplicemente denominato Me.La. 

Avendo un po’ di tempo a disposizione qualche mese fa, avevo segnato che avevo lavorato al Circondario Empolese Valdelsa, specificando un periodo ben preciso ma Facebook insisteva nel dire (sulla mia scheda di profilo pubblico) “Lavora presso Circondario Empolese Valdelsa“. Lavora, e non lavorava? Dopo un po’ di tentativi ho rinunciato a fargli capire che non lavoravo più lì… In fondo non c’è peggior sordo di chi non vuol sentire :)

Oggi ho avuto di nuovo voglia di capire cosa potesse esserci di errato e… ho trovato l’inghippo! :)

Appena ho specificato la posizione che ricoprivo nell’organico magicamente il mio profilo citava testualmente “Ha lavorato presso Circondario Empolese Valdelsa come Sviluppatore software“.

Che faccia parte sempre della delega dell’attività di testing all’utente finale?

Stamattina ho ricevuto diverse notifiche da Facebook e la cosa che ho notato è che le notifiche inviate vengono elaborate come se chi la ricevesse fosse dello stesso sesso della persona che l’ha spedita… :)

Eccovi gli esempi:

Ciao Diego,
nome dell’amico ha commentato un post in cui sei taggato.

Eccovi l’altro esempio:

Ciao Diego,
nome dell’amica ha commentato un post in cui sei taggata.

So di non aver cambiato sesso, almeno non ricordo di averlo fatto… quindi c’è qualcosa che non va! :)

Ecco, questa curiosa esperienza mi ha fatto riflettere in genere sulla qualità percepita di un servizio e la qualità effettiva.

La qualità (strutturale)  di Facebook da me percepita è molto alta, un Social Network in costante evoluzione che offre tantissime funzionalità, estetica ben curata, uptime pari quasi al 100%.

Poi però leggo una notifica con questi errori che sono riconducibili a meri errori di logica di programmazione e mi sorge il dubbio conto che il beta testing viene demandato all’utente finale, l’ultimo utilizzatore del software (in questo caso Facebook) e non dal produttore… o forse quest’ultimo svolgerà solo una minima parte dei controlli?

Bene da quì comincia la mia “calda” esperienza.

Inizio a guardare la compatibilità dell’hardware con Ubuntu 10.04 LTS utilizzando una distro Live e subito, alla prima installazione, ho riscontrato un surriscaldamento dell’intero notebook.

Avevo pensato dipendesse dal fatto che il DVD girando surriscaldava tanto e il PC andava sotto sforzo quindi cercando una spiegazione meccanica al problema.

Dal punto di vista hardware non c’erano incompatibilità, solo il driver della scheda video veniva richiesto ma il resto andava tutto correttamente.

Poi ho deciso di azzardare l’installazione di Ubuntu 10.04 LTS su una SDCard da 2Gb. Un’esperimento interessante in quanto viene suggerita l’installazione su una partizione di almeno 2.4 Gb, dopo diversi tentativi sono riuscito ad installarlo e ho ridotto al minimo le prestazioni grafiche. Sì, perchè riscaldava ancora tanto e mi sono detto che poteva essere causato dagli effetti visivi che “Lucid Lynx” adotta di default (effetti visivi Normali). Nulla continuava a scaldare tanto.

Ho visto però che la SDCard scaldava. E scaldava anche negli altri punti del notebook, proprio come avveniva con la distro Live.

Bene, ho deciso di azzardare un’installazione su una SDCard 4Gb HC per iniziare a lavorare realmente su Ubuntu e subito dopo ho cominciato a fare delle ricerche su Internet per vedere se cera qualche impostazione particolare da settare per evitare questo surriscaldamento.

Ho trovato questa utilissima soluzione.

Adesso sto provando a risolvere il problema installando il nuovo Kernel, a presto spero di fornirvi buone nuove.

Il vecchio sito è sempre disponibile (per gli amanti del retrò style :-) ) all’url http://old.diegolamonica.info.

Al momento sto ultimando la migrazione tutti i contenuti e sto ottimizzando l’installazione di WordPress.

Quindi, mentre vi preoccuperete di navigare i contenuti di questo blog, n0n arrabbiatevi troppo (almeno per ora) se vi compaiono errori di tanto in tanto ;)

Per ora non ho pianificato ancora la migrazione di una serie di servizi che prima avevo reso disponibili sul sito (Newsletter e NoPaste), nel tempo reintegrerò di nuovo queste funzionalità per garantirvi sempre il meglio.

Grazie e mi auguro che sia di vostro gradimento il nuovo layout!