MEIAWEB #7

❦ 28 aprile 2010

Una mappa di tutti i caratteri che l'Uomo ha inventato e messo nei computer (più che completa, ma priva di indicazioni)

Per tutti quelli che amano perdersi nella straordinaria varietà di simboli che gli esseri umani sono riusciti fin’ora a produrre e a codificare (ce ne sarà almeno uno, oltre a me? Se ci sei, scrivi un commento) ecco una lista più che completa dei caratteri che si possono scrivere al giorno d’oggi con un computer, dove per più che completa si intende da zero a infinito¹, e dove i numeri tra zero e infinito sono i code points decimali dei caratteri stessi definiti da Unicode.

Basta scrivere un code point iniziale ed un code point finale (necessario perché i browser trovano difficoltà nel mostrare un numero non finito di elementi, specialmente Internet Explorer²) per visualizzare tutti i caratteri compresi in quell’intervallo.

Se ne individuate uno che vi piace in modo particolare e volete mostrarlo nelle vostre pagine HTML, dovete copiare il suo codice decimale, che è scritto nell’angolo destro di ogni casella, e metterlo tra &# e ;. (Dico a tutti quelli che finiscono qui cercando su Google “caratteri speciali html” o cose simili.)

Se invece volete leggere una bella e per niente noiosa storia dei code points Unicode e dell’encoding dei caratteri andate qui. E’ un argomento che vale la pena di approfondire, se vi capita di scrivere un po’ di codice.

Questa mappa più che completa dei caratteri è stata ideata e realizzata da me con HTML, CSS e 2 righe di JavaScript, e naturalmente non ha alcuna utilità pratica – salvo, forse, come test di performance per il vostro browser: se ci mettete più di 3 secondi a visualizzare 3000 caratteri, allora il vostro computer è un po’ lento. Se ce ne mettete più di 10, il vostro computer è molto, ma molto lento. Del resto, nel vostro sistema operativo probabilmente è già compresa, sotto la voce Accessori, una piccola applicazione in grado di mostravi una mappa dei caratteri divisa per categorie, con codici, descrizioni e tutto il resto. Però, insomma, non credo che riuscireste mai a trovarci un simbolo come questo:

☿

Numeric Character Reference: ☿

Name: La natura maligna della donna

Straordinario.

1. Ovviamente i code points non sono infiniti, ma sono moltissimi. E saranno sempre di più. ↩

2. sarà una battuta troppo sottile? ↩

❦ 15 marzo 2010

Nuovo sito dei Defekt con 5 canzoni da ascoltare e scaricare

Da qualche tempo ho ripreso a suonare con una certa continuità insieme ai Defekt, e mi sono divertito a mettere su una pagina web in cui si possono ascoltare e scaricare alcuni pezzi nostri, registrati qualche anno fa.

Mi rendo conto che siamo nel 2010 e che ormai ci sono MySpace, Facebook, Virb ed altre decine di servizi che consentono di promuovere la propria band in modo più efficace di una isolata pagina web, ma avevo voglia di fare un po’ di esperimenti con css3 ed il tag <audio> di html5. E poi MySpace mi ha sempre fatto cacare.

Per chi non è uno sviluppatore web ed ha solo voglia di ascoltare un po’ di buona musica (a tratti anche molto, molto buona) ecco la pagina dei Defekt.

Per chi invece si occupa di web design/development, ecco un po’ di informazioni tecniche.

Il doctype della pagina è html5.

Per realizzare il player audio ho usato jQuery con l’ottimo plugin jPlayer. Questa soluzione consente di far suonare gli mp3 (o i file ogg) usando direttamente il tag <audio> di html5, supportato attualmente dalle ultime versioni di Firefox (solo formato ogg), Chrome, Safari ed Opera. Nei browser che non supportano il tag <audio> (ovvero: in Internet Explorer) gli mp3 vengono suonati da un oggetto Flash invisibile all’utente.

Per lo stile della pagina ho usato parecchie nuove regole css: @font-face, border-radius, text-shadow e valori rgba per il colore di testo e sfondi, in modo da renderli parzialmente trasparenti. Queste proprietà css permettono di arricchire il design della pagina senza usare immagini di sfondo ed altri artifici, e sono ben supportate da tutti i browser più diffusi, tranne uno. In Internet Explorer le ombre e le trasparenze non vengono mostrate e gli angoli non sono arrotondati, ma la pagina ha ugualmente un aspetto decente.

Il font della pagina è Essays 1743, una riproduzione del carattere con cui era stampata una edizione inglese del 1743 dei Saggi di Montaigne, creata da John Stracke.

L’immagine di sfondo è il bellissimo quadro City 12 dell’artista Emiliano Baiocchi.

❦ 18 dicembre 2009

Zen Coding

Chiunque faccia il web designer o lo sviluppatore front-end sa che scrivere codice HTML può essere molto noioso.

Anche se si usano editor che completano e chiudono i tag, quando si deve scrivere un nuovo template e metterci dentro dei contenuti è sempre un’enorme scocciatura copiare ed incollare gli elementi delle liste, assegnare classi ed id, scivere link e mettere div dentro div e paragrafi accanto ad altri paragrafi .

Se pensate che non sarebbe male poter scrivere questo codice in stile CSS:

div.article>h2.title+p*5

e generare queste righe di HTML solo premendo Alt+E:

<div class="article">
    <h2 class="title"></h2>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

siete ad un solo click dal posto giusto.

Zen Coding è un plugin per editor HTML che consente di fare proprio questo e molto di più. Funziona, tra gli altri, su Aptana, Textmate, Coda, UltraEdit. La versione per Aptana/Eclipse è scritta in Javascript, quella per tutti gli altri editor in Python.

In questo video ci sono una serie di esempi notevoli.

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Io l’ho provato su Aptana in Ubuntu e funziona alla grande. Provatelo anche voi, che è sempre bello lasciar fare alle macchine le cose noiose e ripetitive, il più possibile. (A meno che non facciate parte di quei fanatici che si vantano di fare tutto con il blocco note. Se è così, restate sintonizzati, che tra poco voglio parlare male di voi.).