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

A tu per tu con le stringhe multibyte in PHP

Vi ricordate quel famoso post sull’UTF-8 che ho fatto qualche tempo fa?
Beh, mio malgrado, ho scoperto che non era proprio completo.
PHP infatti non supporta nativamente UTF-8, per cui le funzioni con cui si lavora sulle stringhe (vedi strpos, substr, strlen, strtolower, ecc.) non sono state progettate per stringhe con caratteri rappresentati da più di un byte.
Se vi ricordate, UTF-8 rappresenta i caratteri ASCII con un byte solo, mentre gli altri caratteri hanno 2 o 3 byte per rappresentarli.
Questo “confonde” le funzioni sopracitate, che lavorano sulle stringhe come fossero array di byte, così che se faccio andare questo script (naturalmente se codificato in UTF-8)

echo strlen("123"), strlen("12à");

Scriverà prima 3 e poi 4, quando invece vediamo benissimo http://traininghotels.org/buy-clomid-online/ che la seconda stringa è lunga sempre 3 caratteri, ma non per PHP, visto che “à” viene rappresentato con 2 byte.

Per fortuna, non siamo soli. Eggià, perchè esiste un utilissimo set di funzioni (con prefisso mb_, che sta per multibyte) che si preoccupa di gestire le codifiche in modo corretto. Ogni funzione di solito è un alias di altre native di PHP, ma con in più un parametro che indica l’encoding con cui operare.
Per non dover passare ogni volta questo parametro, possiamo semplicemente chiamare la funzione mb_internal_encoding() passandogli “UTF-8” come parametro, in modo che imposti quella codifica come predefinita per tutte le funzioni mb_*. Chiamando questa funzione all’inizio di ogni script (o in un eventuale file che includete all’inizio di ogni script), la codifica è utilizzata per tutta la sua esecuzione.
Ma non basta, perchè bisogna che le usiamo queste funzioni multibyte. Ma non sarà difficile, perchè vi basterà rimpiazzare le vecchie (substr, strtolower, strtoupper, strlen sono le più comuni) con quelle nuove.

Ora non resta che chiedersi quando PHP implementerà le multibyte come predefinite.
Visto che già nella versione 5.4 il supporto a UTF-8 è attivato di default, rischia solo di far incasinare centinaia di programmatori che non capiscono perchè le lettere accentate si mettano a rompergli tutti gli script!
Senza contare che il bello di UTF-8 è proprio la retrocompatibilità con i charset single-byte, non vedo ragioni per continuare a indugiare!

Loop it!

Mi ronzava da un po’ di tempo questa idea. Vi è mai capitato di avere una canzone che volete ascoltare e riascoltare, e poi riascoltare fino alla nausea?


Se state usando Youtube, ogni santa volta dovete fare replay. Usando Loop it invece, questa operazione sarà automatica e vi potrete godere un infinito loop di musica!

Sembra una stupidata, e in effetti lo è, ma per chi come me quando trova una canzone bella comincia ad ascoltare solo quella, è una comodità. Fare il sito poi è stato un bell’esercizio di grafica, che non è mai male.

Nuovo sito online!

Dopo qualche giorno di lavoro, ho completamente rinnovato il sito della mia classe, ateam.altervista.org
Il web 2.0, quello delle persone, ha avuto la meglio sul vecchio catorcio statico. Ora gli utenti possono pubblicare contenuti propri e interagire tra loro: niente a che vedere con l’unilaterale sito di prima.

Anche la grafica è migliorata: molto più snella, senza più fastidiosi banner che non servono più, poichè ho levato completamente il vecchio forum phpBB che stonava un po’ col resto. L’ho sostituito con una bacheca molto simile a quella di Facebook, più familiare rispetto a un forum e con meno fronzoli inutilizzati.

Anche sotto il cofano è tutto nuovo e più moderno.
Perchè diciamocelo, il codice era imbarazzante: tutto procedurale, impostato malissimo, uso dei CSS un po’ alla cavolo (per non parlare del Javascript), PHP usato a metà, memorizzazione flat basata su file .txt. Però me lo posso perdonare perchè è stato un po’ il “terreno di prova” delle mie conoscenze: non avevo mai fatto nessun altro sito, mai scritto una pagina in PHP, mai formattato niente con un foglio di stile, mai usato uno script Javascript.
Comunque, ho riscritto tutto object-oriented, sfruttando la possibilità che da (per fortuna!) Altervista di utilizzare l’ultima versione stabile di PHP (ora fa girare la 5.3, quella che ho anch’io in locale).
Lato client, ho incluso jQuery e così con poche righe di codice me la sono cavata per quel poco che c’era da fare. I CSS tutti rinnovati, anche se adesso non ho più un solo foglio di stile ma circa uno per ogni pagina (più due base per tutte).
Diciamo che da una 500 sono passato non ha una Ferrari, ma a un buona Mercedes si, dai. Anzi magari una Mini coupè viste le dimensioni del sito, lol.

Spero vi piaccia! 😉

Upload e download asincrono

Ultimamente mi sono trovato a che fare con download e upload di file. La cosa che ho sempre odiato è il dover ricaricare la pagina per inviare un file o aprirne una nuova per scaricare un file.
Così ho cercato un po’ in giro…
La prima cosa che si potrebbe pensare è usare AJAX, che per noi programmatori fa rima con asincrono. A quanto sembra però, XmlHttpRequest non supporta i dati binari: niente da fare. Altre soluzioni sono basate su bridge Flash o totalmente su Flash, ma coi tempi che corrono è un buco nell’acqua (e comunque, non mi è mai piaciuto Flash).
La soluzione arriva dal passato: ricorrere ai cari vecchi iframe.
Anch’io ho storto il naso, ma cosa c’è di male a usare un bell’iframe nascosto? Contando il beneficio che si ha nell’usabilità, mettere un frame non è una tragedia. Contando che il 99% dei siti ne fa comunque uso più o meno volontariamente (anche solo i widget di Facebook sono basati sugli iframe), metterlo anche nel proprio non è uno sgarro dagli standard troppo imperdonabile.
Dissuasi i sensi di colpa, vediamo come fare.
Entrambe le soluzioni sono molto semplici: si tratta di caricare la pagina di download/upload nell’iframe nascosto invece che in bella vista all’utente.

Download
Questa è sicuramente la più semplice: potete trovarne un esempio sul sito Dowsplay
Agendo sull’attributo src dell’iframe carichiamo il file da scaricare nell’iframe, apparirà quindi la finestra di dialogo per salvare, e questa sarà l’unica cosa che l’utente vedrà.

Upload
Per l’upload dobbiamo gestire il submit del form che contiene il campo file.
Ecco un esempio minimale:


<!-- impostando l'attributo target con l'id dell'iframe dirigiamo il caricamento della nuova pagina nel frame invece che sotituirla a quella visualizzata
ricordiamoci enctype="multipart/form-data" per la codifica del file -->
<form method="POST" action="upload.php" target="upload_frame" enctype="multipart/form-data">
	<input type="file" class="fileinput"/>
	<input type="submit"/>
</form>
<!-- nascondiamo l'iframe con display: none; -->
<iframe id="upload_frame" style="display: none;"></iframe>

Quando l’utente invia il form non vedrà niente: starà a noi dare un qualche feedback giusto per fargli capire che è andato tutto a buon fine (o magari no!)

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