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!

UTF-8, internazionalizzare il proprio web

Ricordate questo articolo a proposito della gestione corretta di un sito codificato in ISO-8859-1? (Se non sapete di che parlo, leggetevelo, visto che almeno l’introduzione vi sarà utile per comprendere questo articolo)

Oggi parlerò di come estendere il proprio supporto alle lingue di tutto il mondo tramite UTF8 (Unicode Transformation Format, 8 bit), ossia uno dei charset che permette di codificare tutti i caratteri di qualsiasi alfabeto, dal cinese al suomi, e qualche posticino avanza pure per vari caratteri speciali (mai visto ❤ o ♫?)
Anche se UTF8 non è l’unica codifica a permettere ciò, è il charset raccomandato dall’IETF (Internet Engineering Task Force), quello standard per XML e JSON (i principali formati per il data exchange). Presenta anche altri vantaggi: essendo un charset multibyte a lunghezza variabile, codifica alcuni caratteri con 1, altri con 2, 3 o 4 byte. Ciò significa che se io uso solo i primi 256 caratteri, ossia alfabeto latino e poco più, le codifiche Latin 1 e UTF8 sono identiche, garantendo la stessa dimensione della stringa e la compatibilità con sistemi limitati all’ASCII (se usassi una stringa UTF8 in ANSI C non avrei problemi finchè rimango in quel range). Inoltre, tutti gli alfabeti conosciuti (compreso quello cuneiforme e quello fenicio) riescono a essere codificati con massimo 3 byte.
Per una comparazione con UTF16, UTF7 e UTF32, il sito UTF-8 Everywhere fornisce un bello scorcio della situazione.

Detto ciò, per un sito internazionalizzato, che abbia pochi problemi di codifica, che non sprechi memoria e che sia compatibile con i maggiori standard web, la giusta codifica è UTF8.

Grazie, ma come la implemento?
Niente paura! C’è da lavorare un po’, ma è possibile. Parlando di una configurazione PHP – MySQL, abbiamo le solite tre cose da equalizzare: codifica dell’output HTML, codifica del sorgente PHP, codifica del database MySQL.
Per quanto riguarda HTML, le solite cose da fare: tag <meta> per le pagine e impostazione dell’header Content-Type per gli script AJAX.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

e

//il MIME-type dipende da che tipo di output volete servire: questo è per il JSON, text/html per semplice HTML, text/plain per testo semplice o application/xml per XML
header('Content-type: application/json; charset=utf8');

L’altra cosa di cui tenere conto è la codifica dei sorgenti PHP: anche quella dev’essere UTF8, per fare in modo che le stringhe hard-coded servite siano codificate con il giusto charset!
Se usate blocco note di Windows (oltre a cambiare editor), dovrete risalvarvi ogni file sorgente selezionando la codifica UTF8 (File > Salva con nome… > Codifica: UTF8). Se invece come me usate Notepad++, la cosa è estremamente più facile: andate in Configurazione > Preferenze…, selezionate la tab Nuovo documento/Directory predefinita e nel riquadro Codifica scegliete UTF-8 senza BOM (BOM: Byte Mark Order, serve a indicare al decoder l’endianness dei byte della stringa, il che crea problemi in PHP) e spuntate la casella Applica all’apertura di file ANSI. In questo modo aprendo un file sorgente in ANSI (che dovrebbe essere la codifica predefinita su Notepad++, quindi circa ogni file che avete creato) lo convertirete automaticamente in UTF8, e basterà aprire tutti i vostri sorgenti per convertirli tutti alla giusta codifica. Ottimo!

Passiamo alle gatte da pelare: MySQL.
Anche se gestire le codifiche è (per fortuna!) molto facile, il difficile è convertire un database che avete già creato con un altro charset in UTF8.
Il problema è che dovrete andare a cambiarvi la collation di ogni campo che la usa, in ogni tabella che avete creato.
Il modo più veloce per farlo è creare un dump in SQL del proprio database (su phpMyAdmin basta selezionare il database, cliccare sulla tab Esporta e subito su Esegui), aprirlo con un editor avanzato (tipo Notepad++) e rimpiazzare tutte le dichiarazioni della collation in latin1_swedish_ci (o altre, se ne avevate impostate di nuove) con una dichiarazione per utf8_unicode_ci. La cosa è molto rapida se usate le comode funzioni di replace dell’editor.
Dopodichè, svuotate il database da tutte le tabelle, settate charset e collation del database a UTF8 (eseguendo la query ALTER DATABASE nome_database DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci), e importate il dump modificato (su phpMyAdmin, tab Importa, seleziona il file di dump e Esegui).
Se tutto va bene dovreste avere la giusta codifica dei dati nel database.

Ultime due cose: impostare la codifica anche nei file di configurazione di MySQL e PHP.
Per il primo, aprite il file di configurazione (my.conf, my.ini o simili) e nella sezione [mysqld] aggiungete
collation-server=utf8_unicode_ci
character-set-server=utf8

mentre in quella [client] va aggiunto
character-set-server=utf8
In quanto a PHP, trovate sempre il file di configurazione (solitamente php.ini) e nella sezione principale [PHP] impostate default_charset = "utf-8".

Una volta cambiati entrambi i file di configurazione, riavviate il server web e godetevi la possibilità di scrivere in cirillico!

Utili

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! 😉

XMedia Recode

Ultimamente ho avuto a che fare con il video-editing (magari vi farò anche vedere il risultato :)) e la cosa in assoluto più difficile che ho dovuto fare è stato convertire i diversi formati video in formati compatibili con Movie Maker (AVI ad esempio).
Nell’intricata selva dei convertitori e dei codec, ho trovato un programma veramente egregio, gratuito, fatto bene, in italiano, semplice da usare ma configurabile in mille modi diversi.
Questo programma è XMedia Recode (link al setup)

Una volta installato, per iniziare a convertire è sufficiente fare “Apri file” dalla grande barra in alto, selezionare il file da convertire, impostare tramite i diversi pannelli le impostazioni (volendo basta il primo, in cui selezionare formato e dispositivo di destinazione, se si vuole fare ad esempio un filmato apposta per iPhone o simili), selezionare il percorso di destinazione dal pulsante “Sfoglia…” in basso a destra, quindi cliccare sempre dalla barra in alto “Nuova attività” e poi “Codifica”.
A questo punto partirà il processo di codifica (che dura quel che deve durare, a seconda dei file e dei parametri)

Volendo è possibile codificare più file di seguito aggiungendo all’elenco dei file i file da convertire e ripetendo le operazioni sopra per ognuno, ma facendo un’unica operazione di codifica cliccando “Codifica” solo alla fine.
Una comoda checkbox permetterà, se spuntata, di spegnere il computer una volta terminato il processo.

Spero che questo software risolva i problemi a voi come li ha risolti a me!

Frattali!

Condivido una delle bellissime immagini del frattale di Mandelbrot che sono riuscito a generare con un mio programma in VB.NET, ancora in fase di “perfezionamento”, ma che promette molto bene :)