KISSlider: slider responsive, semantico e minimale

Ieri un amico mi ha chiesto aiuto per uno slider in jQuery: lui si appoggiava a un plugin che non capiva come funzionava (Responsive Slider, stranamente famoso). Guardando il codice non capivo come potesse servire un simile pachiderma (divisione in categorie, markup inutile, 200 righe di Javascript) per creare un semplicissimo slider di immagini.
Così mi è venuto lo stuzzichio di scriverne uno da solo, e nel giro di 20 minuti era pronto. Responsive, semantico e con circa 30-40 righe di codice in totale.
Sono rimasto stupito pure io (sono io fenomeno o loro ritardati?).

Il markup
Il markup è fatto per essere semplice, semantico e facile da scrivere anche a mano, quindi concreto e pulito.
Il vantaggio è che spesso un markup semantico è anche più human-readable e viceversa: due piccioni con una fava.
<div class="slider">
<div class="slides">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/1a.jpg" />
<img src="images/1b.jpg" />
<img src="images/1c.jpg" />
<img src="images/2a.jpg" />
<img src="images/2b.jpg" />
</div>
<div class="commands">
<button class="slide-command back">&lt;</button>
<button class="slide-command next">&gt;</button>
</div>
</div>

Il div slider fa da contenitore: in slides abbiamo tutte le immagini che compongono lo slider, mentre in commands due button per navigare lo slider.
Come vedremo più avanti, lo slider non usa le immagini ma lo sfondo di slides per mostrare le slide, i tag immagine hanno una funzione semantica e intuitiva per la costruzione dell’HTML. Passare un array con i percorsi delle immagini infatti è decisamente poco semantico, mentre un markup più elaborato diventa pesante & difficile da impostare manualmente e complicato anche da mantenere.

Il CSS
.slider {width: 100%;}
.slider > * {width: 100%; height: 500px;}
.slides {background: no-repeat center #fff; background-size: 100%;}
.slides img {width: 100%; display: none;}
.commands {position: absolute; top: 0; left: 0;}
.slide-command {position: absolute; width: 90px; height: 100%; font-size: 80px; padding: 0 15px; font-weight: bold; background: none; cursor: pointer; color: #000;}
.slide-command:hover {background: rgba(255, 255, 255, .1);}
.slide-command.back {left: 0;}
.slide-command.next {right: 0;}

Il CSS si occupa di disporre il layout dello slider: nascondiamo le immagini, portiamo i comandi ai due lati dello schermo e definiamo come mostrare lo sfondo con l’effettiva slide. Con no-repeat mostriamo la slide solo una volta e non ripetuta lungo tutto il background, con center la portiamo al centro, e specialmente impostiamo la larghezza dello sfondo al 100%, in modo da allargarsi lungo tutto lo slider ma conservando le proporzioni.
Un analogo effetto si ottiene con il valore cover, ma in questo modo avremo un supporto browser limitato.
Usando lo sfondo con queste proprietà riusciamo a ottenere un layout responsive: l’immagine sarà sempre centrata e scalata alla larghezza massima dello slider senza perdere il rapporto d’aspetto originale.

Javascript
$(function() {
$(".slides").css("background-image", "url('" + $(".slides img:first-child").addClass("selected").attr("src") + "')");
$(".slide-command").click(function() {
var slide = $(this).hasClass("next") ?
(!$(".slides .selected").next().length ? $(".slides img").first() : $(".slides .selected").next()) :
(!$(".slides .selected").prev().length ? $(".slides img").last() : $(".slides .selected").prev());
$(".slides .selected").removeClass("selected");
$(".slides").animate({opacity : 0}, function() {$(this).css("background-image", "url('" + slide.addClass("selected").attr("src") + "')").animate({opacity: 1});});
});
});

Per il codice js ci appoggiamo a jQuery (ma essendo ormai incluso nella maggior parte dei progetti e molto utile anche per piccole cose, non lo vedo come un handicap), rendendo così il codice ancora più conciso.
Passando a $() una funzione la registriamo per l’evento ready della pagina, così da essere eseguita subito (un equivalente evoluto dell’onload insomma).
Questa funziona si occupa innanzitutto si mostrare la prima slide, impostando la src del tag corrispondente come background-image di slides.
A questo punto registra gli eventi click dei due pulsanti di navigazione: gli handler trovano la nuova immagine da mostrare, controllando se è alla fine o all’inizio ed eventualmente facendolo proseguire in loop, quindi la impostiamo sempre come sfondo di slides ma con un’animazione di cross-fading. Prima portiamo l’opacità a zero, quindi nel callback settiamo lo sfondo e rianimiamo l’opacità fino a 1.

Trovate una demo qui

Standard Web, lo stiamo facendo sbagliato?

Ho iniziato a seguire qualche blog famoso di web designing (il più presitigioso, A list apart), e ho letto qualche articolo a proposito dei nuovi standard web definiti dal W3C: parliamo quindi di CSS, HTML, ma anche Javascript (o meglio, ECMAScript).

Questi gli articoli che mi hanno fatto riflettere:
A List Apart: Every time you call a proprietary feature “CSS3”, a kitten dies
e questo post, con relativi commenti
Edit di HTML.it: Proposta per estendere i valori multipli dei CSS

Nel primo articolo, l’autore lancia un allarme ai web designer: il troppo uso di proprietà CSS con i prefissi proprietari (i famosi -webkit-*, -moz-*, -o-*) rischia di far nascere una nuova selva di non-standard come quella creatasi durante la guerra dei browser tra Netscape e Internet Explorer. In poche parole, un delirio.
Il secondo articolo narra le peripezie di un programmatore che ha proposto una feature, banale ma comoda, da implementare nello standard CSS che è stato respinto con pressapochismo e senza una seria considerazione, lamentando soprattuto che il futuro di uno standard è spesso controllato dagli sviluppatori dei browser che non hanno voglia di fare troppa fatica per implementare qualcosa di nuovo.

Che dire?
Leggendo l’articolo linkato a quello pubblicato su A list apart, ho visto tante buone, ottime idee su nuove proprietà CSS. Ce ne sono molte che andrebbero migliorate, la stessa sintassi CSS sarebbe da ampliare (citando Oliver Twist “Please, sir, i want some more“), magari con un po’ di ereditarietà e elasticità nelle assegnazioni.
Il problema secondo me è la lentezza del processo di standardizzazione. L’ultimo standard emesso dal W3C per i CSS, quello a proposito dei CSS 2.1, risale al 2004. I CSS 3 sono si ormai supportati dai maggiori browser, ma non sono standard pubblicati. In teoria quindi, una pagina che utilizza i CSS 3 non è valida secondo gli
standard vigenti e validi.
Perchè? Perchè aspettare così tanto tempo per poter implementare nuove feature? Non sarebbe più semplice elasticizzare il processo, rilasciare aggiornamenti spesso e non essere avidi in nuove feature da implementare?
Il compito della standardizzazione è infatti quello di stabilire un modo comune per i browser di processare un dato e produrne il giusto output, e per i programmatori stabilire le giuste sintassi e regole semantiche per i linguaggi.
Questo processo può essere molto velocizzato. Già molte feature proprietarie e sperimentali, usabili con mille diversi prefissi ma implementate grossomodo allo stesso modo, potrebbero essere regolamentate e pubblicate.
Sia chiaro, non credo di modificare radicalmente gli standard in pochi giorni e come viene viene, ma penso che le funzionalità più semplici e ininfluenti sul resto dello standard possano essere incluse senza stare troppo a filosofeggiare, ma soprattutto senza aspettare di dover finire di sviluppare tutte le altre.
I tempi ormai sono maturi per questo, i browser si stanno aggiornando con sempre maggior velocità, sia Chrome che Firefox pubblicano una nuova versione ogni circa 6 mesi, non vedo perchè a scadenze simili non si potrebbero aggiornare anche gli standard, integrandosi perfettamente quindi con i cicli di sviluppo dei browser.
Una maggiore sveltezza si potrebbe dire, può portare a commettere errori con altrettanta maggiore facilità. Dov’è il problema? La rapidità degli aggiornamenti permette anche una rapidità nelle correzioni. Inoltre credo che questo sistema si potrebbe integrare con politiche di sviluppo con gli sviluppatori molto più ampie di quelle attuali, permettendo di avere più controllo di quello che sia ha ora.

Credo che una rivoluzione in questo senso andrebbe fatta, voi che ne dite?
Il form per i commenti è lì, a voi la parola 😉

La minificazione per ottimizzare le pagine web

Cos’è la minificazione?
Si tratta di un processo per ridurre la dimensione di un codice sorgente rimuovendo da esso elementi inutili al compilatore (tipo le tabulazioni per indentare il codice, commenti, e altri elementi a seconda del linguaggio considerato) ma magari utili al programmatore durante la fase di produzione del codice.
Questo processo riduce quindi le dimensione del file sorgente, e in ambito web è una cosa piuttosto utile, poichè meno è pesante un file da inviare al browser, meno tempo la pagina ci metterà a caricarsi.
La minificazione di solito si fa quindi con script Javascript o fogli CSS, raramente con HTML, poichè questi file vengono inviati direttamente al browser.

Minificazione in pratica
Un ottimo tool per la minificazione di Javascript e CSS è YUI Compressor (qui un’implementazione online).
Per minificare il codice YUI Compressor sfrutta diverse particolarità di Javascript e CSS.
Per quanto riguarda Javascript, applica una serie di piccole ottimizzazioni sostituendo certe sintassi con altre più stringate (es. object[“property”] diventa object.property, risparmiando 3 bytes), e inoltre sostituisce i nomi delle variabili con altri più corti, ma che non cambiano l’esecuzione del programma.
Ad esempio:

function prova(primo_argomento, secondo_argomento) {
    return primo_argomento + secondo_argomento;
}

Diventa:

function prova(a,b){return a+b;}

Che è assolutamente equivalente, ma molto più corta.
Per migliorare ulteriormente l’utilizzo di questo minificatore, vi consiglio la lettura di questo articolo su A List Apart (un sito da adorare, dove scrivono grandissimi programmatori di tutto il mondo), scritto proprio dall’ingegnere di YAHOO! che ha inventato YUI Compressor. Descrive semplici regole da usare per rendere il compito più facile al compressore, oltre ad altre buon tecniche di scrittura del codice per diminuire le dimensioni dei sorgenti che il compressore non può applicare.
In quanto ai CSS, YUI Compressor oltre a rimuovere totalmente spazi (tranne dalle dichiarazioni dei selettori) e commenti, esprime i colori nella forma più breve possibile. Ad esempio #FFFFFF, il bianco, diventa #FFF, oppure rgb(10, 10, 10) diventa #AAA.

Il PHP, come spiegato diversi post fa, invece, è interpretato lato server, quindi prima viene eseguito, poi viene inviato il suo output sottoforma di HTML al browser, che non vedrà assolutamente la differenza tra una pagina .php e una .html
Quindi, perchè minificare uno script PHP?
Intanto, si risparmia spazio sul server, e poi non dimentichiamoci che PHP, normalmente, viene compilato in bytecode ad ogni chiamata dello script, e quindi minore è la dimensione del file, minore sarà il tempo di swap su disco e di parsing del codice.
Script molto voluminosi possono essere formati in buona percentuale da spazi e tabulazioni piuttosto che dal codice vero e proprio. Più che gli script che si si scrivono da soli, è utile minificare librerie esterne, che spesso sono largamente commentate. Magari durante la fase di sviluppo la si tiene “normale” e la si minifica solo quando si è finito di lavorarci e la si carica sul server.
Per farlo, dobbiamo usare la direttiva -w chiamando php.exe, e specificando come secondo argomento il percorso del file da minificare.
Tradotto in pratica (qui la procedura per farlo su Windows), ci serve un interprete PHP installato sul proprio PC, con Wamp Server, Xampp, Lamp, EasyPHP o affini.
Cercate nelle cartelle dell’interprete fino a trovare il programma php.exe, quindi aprite blocco note e scrivete:

php.exe -w "C:\pippo\script_lungo.php" > "C:\pippo\script_minificato.php"

E salvatelo come minify.bat nella cartella dove avete trovato php.exe. Quindi apritelo facendoci doppio click sopra e.. volià! Troverete nella cartella pippo il vostro script minificato script_minificato.php