7 maggio 2010
HTML5 For Web Designers
Come saranno i libri del futuro? Di carta, ma una carta molto buona, con una stampa di alta qualità, illustrazioni a colori ed un design fantastico.
Il prototipo dei libri del futuro parla di HTML5 ed è pubblicato da A Book Apart, ovvero A List Apart, ovvero gente che pubblica sul web da 15 anni, ma che si è guardata bene dal mettere in vendita questo testo in formato digitale.
HTML5 For Web Designers, anche se è scritto con stile informale ed è lungo solo 85 pagine, resta comunque una pubblicazione per addetti ai lavori. Ma potrebbe indicare la strada giusta a tutti gli editori, non solo a quelli di libri tecnici.
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 infinito1, 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 Explorer2) 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? ↩
20 aprile 2010
Laggiù in fondo, dietro alla pubblicità della Vodafone, c'è la nuova home page di Repubblica.it
Con almeno due anni di ritardo anche Repubblica.it adotta il layout standard internazionale per i giornali online: pagina bianca allineata al centro su sfondo grigio, ottimizzata per 1024 pixel di larghezza. Il nuovo design è meglio del precedente, ma non credo che vincerà un premio per la sua originalità.
Da notare la scelta di soluzioni sobrie e poco invasive per le inserzioni pubblicitarie.
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.
27 gennaio 2010
Simboli politici e religiosi come caratteri speciali HTML
Aggiornamento del 28 aprile 2010
Se siete finiti qui perché volete inserire nelle vostre pagine HTML un carattere che non è presente sulla vostra tastiera, potrebbe interessarvi questa bellissima mappa completa di tutti i caratteri del mondo con i relativi code points decimali da me realizzata.
Mi è capitato di dare un’occhiata ad una lunga lista di riferimenti ad entità carattere HTML, e nella sezione dedicata ai simboli politici e religiosi ne ho trovati 3 a cui sono particolarmente affezionato, di cui fin’ora ignoravo i codici.
☯ ☮ ☭
Belli, no? Ce li avevo tutti disegnati nello zaino, quando andavo al liceo.
Questi simboli possono essere inseriti come caratteri nelle pagine HTML utilizzando i codici ☯ (tao), ☮ (pace) e ☭ (falce e martello).
C’è solo un browser – mi sembra superfluo dirvi quale – che ha bisogno di un piccolo accorgimento per visualizzare correttamente tutti i caratteri speciali disponibili.
L’ accorgimento consiste nell’assegnare ai caratteri speciali il font Arial Unicode MS.
Un buon metodo per fare questo è creare una classe css di nome symbols con questa proprietà:
font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
e mettere le vostre falci e i vostri martelli dentro uno <span> che abbia quella classe, che è proprio quello che ho fatto io qui sopra.
Con il font Arial Unicode MS al primo posto, avremo la certezza che Internet Explorer riuscirà a mostrare anche i simboli più insoliti. Su Linux e OS-X il font Arial Unicode MS probabilmente non sarà installato, ma dato che nemmeno Internet Explorer sarà installato, non avremo alcun bisogno di lui.
9 gennaio 2010
Font del mese: League Gothic
Con il nuovo anno inauguriamo la rubrica Font Del Mese.
Ogni mese pescheremo nel mare dei free fonts – dove free si riferisce al prezzo ma anche alla licenza – un esemplare che riterremo superiore alla media ed adatto per essere usato in progetti web.
Inziamo con la riedizione di un capolavoro assoluto, ormai libero da copyright: Alternate Gothic No.1, disegnato da Morris Fuller Benton nel 1903, viene riproposto da The League Of Movable Type con il nome League Gothic.
Essenziale, elegante e compatto, perfetto sia per la carta che per il monitor, Legue Gothic è il nostro font del mese di gennaio 2010 (ma forse anche dell’anno).
Su Fonts Squirrell c‘è anche il @font-face Kit, per usare subito League Gothic nelle vostre pagine web.
