Frattali

Cos’è un frattale?
E’ forse la cosa più bella partorita viagra online canada dalla matematica!

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

L’altra faccia di YouTube

Suppergiù questo è YouTube

YouTube non è solo la patria dei gatti che suonano la http://sfadi.org/buy-viagra-online/ pianola, anzi ultimamente è una specie di vaso di Pandora di conoscenza, curiosità e passione per la scienza. Esatto, nerd.

  • Minute Physics
    Un canale che pubblica spiegazioni semplici e concise (solitamente mai oltre i 2 minuti) di problemi relativi alla fisica ma non solo. Lo stile dei video è poi particolarmente espressivo: sketching in stop motion. Non vi resta che guardare questa interessante spiegazione: se ci sono così tante stelle, perchè il cielo è buio?
  • VSauce
    VSauce è un canale davvero stimolante, nei suoi video Michael si pone domande davvero insolite, che anche se possono sembrare stupide aprono la strada a considerazioni interessanti e conclusioni inaspettate. Buona visione!
  • Asap SCIENCE
    Sulla falsa riga di Minute Physics, questo canale propone pillole di scienza “quotidiana” e curiosità nello stesso stop-motion sketch che abbiamo visto prima
  • Numberphile
    Numberphile è molto british (non riesco mai a trattenere un sorriso sentendo la pronuncia di James, lol), un canale dedicato alla matematica a 360°, dai trucchi di magia con i numeri alla congettura di Goldbach. Forse uno dei più nerd fino ad ora.
    Cosa c’è di più british e matematico di Enigma?
  • Sixty Symbols
    Un canale interamente dedicato alla fisica, gestito da numerosi scienziati dell’università di Nottingham (quella di Robin Hood!), trattano approfonditamente argomenti come meccanica quantistica e teoria delle stringhe, ma sono piuttosto bravi a spiegarle anche ai profani come noi
  • Periodic Table of Videos
    Sempre gestito dall’università di Nottingham, periodicvideos tratta argomenti di chimica. Attenti allo scienziato pazzo, ha un che di inquietante.
  • ViHart
    ViHart torna a parlare della matematica e dei suoi aspetti più strani e… belli

Styling trick #2

#element {height: 50px;}
#element .one-line-text {line-height: 50px;}

Per centrare verticalmente del testo, basta impostare l’altezza della riga (line-height) uguale all’altezza del buy cialis online no prescription contenitore

Styling trick #1

* {box-sizing: border-box; position: relative;}

border-box imposta un box-model più intuitivo dove le dimensioni degli elementi sono calcolate comprendendo http://mwcdc.org/buy-viagra-25mg padding e border, mentre position: relative permette di avere un posizionamento più immediato e di rendere utilizzabili subito rules come z-index

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!

Codemunity apre i battenti!


Dopo 11 lunghi mesi di sviluppo, Codemunity apre finalmente al mondo!
Codemunity è un social network per programmatori, dove ci può scambiare idee, codice, e qualunque cosa si voglia condividere con altre persone con la tua stessa passione.
Ho cercato di mantenere Codemunity semplice e concreto, con pochi fronzoli, garantedo all’utente un’esperienza semplice e coerente in tutto il sito.
Bando alle ciance, l’unico modo per sapere veramente cosa sia e come sia è http://santamonicaskin.com/online/ iscriversi oggi! Il lancio avverrà alle 10.00, quindi tra pochi minuti. Spero che chi legge questo blog (no, spambot, voi no!) possa apprezzare il lavoro che ho fatto con Codemunity, ma specialmente che possa apprezzare il servizio.
Non abbiate paura a dirmi qualsiasi cosa, anche negativa. Anzi, meglio le critiche: è con quelle che si migliora, non con i complimenti.

Potete seguire le ultime notizie su Twitter, seguendo @codemunity e l’hashtag #countdowntocodemunity
Vi aspetto tra poco!

UTF-8, internazionalizzare il proprio web

Ricordate questo articolo a proposito della gestione corretta di un sito http://dailykhabarnama.com/buy/ 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

  • http://docs.moodle.org/22/en/Converting_your_MySQL_database_to_UTF8
  • http://www.zago-dev.net/appunti/programmazione/php/utilizzare-php-e-mysql-con-il-charset-utf-8.html

Una nuova speranza

A grande (e insistente) richiesta, rilascio la Dowsplay Star Wars Suite, comprendente 7 programmi per la risoluzione di altrettanti problemi delle Olimpiadi di Problem Solving

A voi il link!

Disabilitare i cookie di terze parti

I cookie di terze parti sono cookie (informazioni salvate sul browser dai siti web) usati da contenuti caricati da siti terzi su una certa pagina.
Ad esempio, visito la pagina example.com e la pagina ha un banner pubblicitario. Questo banner viene caricato dal sito ads.banner.com, che ha registrato alcuni cookie sul mio browser.
Normalmente il browser invia i cookie al sito ads.banner.com, ma non è detto che quel sito usi bene questi cookie: spesso sono usati per tenere traccia dell’utente, di fatto spiandolo (lo fa pure Google).

Per evitare che ciò accada si può configurare il browser in modo che non invii i cookie di terze parti.
In Google Chrome è sufficiente andare in Impostazioni > Roba da smanettoni > Impostazione contenuti… e spuntare la casella Blocca cookie di terze parti e dati dei siti
Quando il browser bloccherà questi cookie visualizzerete nella barra degli indirizzi l’icona di un biscotto con una x sopra. Cliccandoci possiamo modificare le impostazioni per il singolo sito.
Infatti, nel fumetto che esce, se clicchiamo sul link in basso Gestisci il blocco dei cookie…, ci apparirà la finestra delle impostazioni di Chrome che ci permetterà di aggiungere schemi di URL con opzioni diverse. Di default, aggiungendo uno schema gli si consente di impostare i cookie di terze parti, ma nel menu a tendina affianco del nome si può impostare anche il blocco totale dei cookie da quel sito, o concedergli di impostare i cookie solo per la sessione corrente (alla chiusura del browser, verranno cancellati).
Personalmente, ho consentito l’impostazione dei cookie solo a Disqus e Facebook, siccome i commenti e i like sulle pagine web dei due servizi richiedono questa impostazione (per il login).
Per consentire a tutti i sottodomini di un sito di poter impostare i cookie, basta aggiungere [*.] prima dell’URL (es. [*.]facebook.com consente sia a like.facebook.com sia a facebook.com di impostare cookie di terze parti). Questo è spesso/sempre necessario siccome le varie risorse di certi servizi sono caricati da diversi sottodomini.

Spero vi sia di aiuto!