@font-face in Ubuntu block notes

Un breve resoconto di come utilizzo i font esterni nel mio blog tramite @font-face.

Da un po’ di tempo a questa parte dovreste vedere questo blog con i font di una famiglia precisa: il Droid. Gran bel font, senza dubbio, che uso anche come carattere standard nella mia linux-box. Dopo averlo provato sul blog senza includerlo negli stili del CSS, ho deciso di renderlo operativo per chiunque usi un browser moderno che legga correttamente la dichiarazione @font-face. In questo articolo condivido alcuni punti fondamentali per l’implementazione.

Leggi tutto “@font-face in Ubuntu block notes”

La creazione delle colonne in CSS3

Una delle funzioni di CSS3 che può affascinare chi ama impaginare libri è la facilissima possibilità di impostare il testo in colonne. Ieri, dando uno sguardo a questo articolo, ho pensato di prenderne spunto e scriverne brevemente soprattutto per chi ancora non avesse visto in azione questa funzione.

Non tutte le caratteristiche della gestione delle colonne sono ancora implementate. Firefox 3.5 non comprende ancora lo spanning di un titolo su tutte le colonne.

Di seguito alcuni esempi, con il relativo stile utilizzato.

Leggi tutto “La creazione delle colonne in CSS3”

Pulsanti aggiuntivi al pannello di scrittura di WordPress

Usi spesso l’editor di WordPress in modalità HTML e ti servirebbero dei comodi pulsanti per velocizzare la scrittura dei tag? Leggi l’articolo e scopri come fare.

Come sapete, quando scrivete un articolo di WordPress, potete scegliere se usare l’interfaccia “Visuale” o quella “HTML”, selezionabili dalle due schede poste sopra il campo di scrittura dell’articolo. La differenza è sostanziale: con la versione HTML potete intervenire nel codice dell’articolo e usare alcuni tag HTML che altrimenti WordPress vi taglierebbe. Ora, avrete presente che la versione HTML del pannello è più o meno questa:

I pulsanti sono pochi, anche rispetto alla sua versione “Visuale”. Ma potete aggiungerne quanti ne volete e far scrivere ai pulsanti i tag che vi servono più spesso. Ecco come si presenta attualmente il mio pannello:

Ho aggiunto la seconda e terza riga di pulsanti che scrivono per me quei tag che uso di più e che scoccia dover scrivere a mano quando si modifica l’HTML (a me capita spesso). Aggiungere questi pulsanti personalizzati è davvero semplice: basta un plugin.
Leggi tutto “Pulsanti aggiuntivi al pannello di scrittura di WordPress”

HTML, CSS e Wordpress Help Sheets

sheets_pdf.png

Quante volte sarà capitato agli smanettoni del codice HTML, dei fogli stile (i CSS) e del codice PHP di WordPress di non ricordarsi la sintassi di quel particolare comando! A me, che non sono uno smanettone, è capitato tante volte. Ci ha pensato gosquared.com, che ha creato tre PDF con la sintassi dei comandi più comuni. Un ottimo strumento per chi modifica spesso codice. Ecco i link alle tre pagine:

  1. HTML Help Sheet
  2. CSS Help Sheet
  3. WordPress Help Sheet

Tipografia e Web: Typetester

typetester_1.png

Vorrei segnalare a coloro che sono soliti modificare il file css del proprio blog o crearne da zero che esiste un bel servizio di test delle impostazioni dei caratteri: Typetester.
Il servizio ci permette di mettere rapidamente a confronto diverse impostazioni del testo per verificarne la leggibilità: si può provare il corpo del carattere, l’interlinea, il tracking, l’allineamento, il colore dello sfondo e del testo, ecc.

typetester_2.png

Lo spazio della pagina è suddiviso in tre colonne in modo da poter confrontare rapidamente, in un colpo d’occhio, quale sia la migliore soluzione.

typetester_3.png

typetester_4.png

Lungo la colonna, poi, possiamo confrontare anche le varianti stilistiche del carattere scelto, come il regular, il grassetto, il corsivo, e così via. Alla fine delle nostre prove, una volta soddisfatti del risultato, Typetester ci permette di visionare il css relativo alla colonna desiderata.
Con un copia e incolla lo possiamo trasferire al file del nostro css e applicarne le modifiche.

typetester_5.png

Un servizio davvero molto utile. ;)