Aldolat.it — Post con tag HTML

No alle email in HTML /2

aldolat@gmail.com (Aldo Latino) — Wed, 21 Aug 2024 11:09:38 +0200

Ho scritto qualche anno fa in merito e vorrei ribadire ed estendere quanto già comunicato. Ho trovato per caso la pagina Use plain text email, citata sia dal Wiki di Arch Linux sia da The Linux Kernel Archive, dove nella sezione “Why is plain text better than HTML?” elenca i motivi per cui è bene evitare come la peste le email in HTML. Elenco solo i titoli dei paragrafi:

HTML as a vector for phishing
Privacy invasion and tracking
Higher incidence of spam
Mail client vulnerabilities
HTML emails are less accessible
Some clients can’t display HTML emails at all
Rich text isn’t that great, anyway

L'articolo No alle email in HTML /2 è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

@font-face in Ubuntu block notes

aldolat@gmail.com (Aldo Latino) — Thu, 04 Feb 2010 11:59:52 +0000

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.

Typekit o DIY?

Per chi vuole evitare di imparare a incorporare un font nel proprio foglio stile, può utilizzare il servizio di Typekit, semplice e veloce, che propone un account gratuito per iniziare: un set di font prestabiliti tra i quali scegliere quelli da usare, fino a un massimo di due font.

Per chi desidera avere più font senza limiti può pagare per un servizio più esteso oppure può imparare a gestire i font liberamente e senza alcun tipo di limite. Tra l’altro non ci sono difficoltà particolari da superare per utilizzare qualsiasi font senza vincoli nel proprio blog.

La sintassi

La sintassi è la seguente:

@font-face {
    font-family: <Nome del font usato nel CSS>;
    src: <nome del font installato nel PC del visitatore e/o percorso del file del font>;
    [font-weight: <bold>];
    [font-style: <italic>];
}

Vediamo in dettaglio.

font-family: è il nome del font che verrà usato lungo tutto il CSS. Non deve necessariamente essere il vero nome del font, ma anche un nome di fantasia; l’importante è che venga utilizzato sempre nella stessa forma tra la dichiarazione @font-face e gli stili del foglio. È importante inoltre che venga mantenuto identico tra le altre dichiarazioni @font-face relative agli stili del font (grassetto, corsivo, ecc.).

src: qui si indica il percorso del file del font da dove il browser del visitatore può prelevarlo per renderizzare la pagina. Prima però di farglielo prelevare, è bene indicare al browser di guardare se tra i font già installati nel sistema esiste questo font: per questo motivo si usa local per indicare il nome o i nomi con cui potrebbe essere individuato. Se il font è installato, verrà usato quello già presente nel sistema, altrimenti si procederà al download del font.

font-weight: si indica se questo font è da utilizzare come grassetto quando negli stili del CSS viene dichiarato font-weight: bold;.

font-style: in questo caso lo si usa quando è da utilizzare come corsivo. Ovviamente per il grassetto corsivo vanno specificati entrambi gli stili.

Esempio pratico

Facciamo un esempio col font Droid, utilizzato in questo template. Di questa famiglia di font esistono le varianti Serif, Sans serif e Monospace. Vediamo la Sans serif, che ha solo due stili: il regolare e il grassetto.

/* Droid Sans Regular */
@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/DroidSans.eot');
    src: local('Droid Sans Regular'),
         local('Droid Sans'),
         local('DroidSans'),
         url('fonts/DroidSans.ttf') format('truetype');
}

Il valore per font-family è quello che ho scelto di usare lungo tutto il CSS. Seguono due linee diverse per l’origine del font, cioè due src distinti: il primo è specifico per Internet Explorer, il secondo è valido per i browser Firefox, Chrome, Safari e Opera. I due src vengono utilizzati in questo modo: Explorer legge il primo e lì si ferma perché non sa cosa vogliano dire local e format presenti nelle righe successive; gli altri non riconoscono il formato .eot e leggono il successivo src. Nei tre local vengono specificati i nomi possibili con cui il browser può trovarli nel sistema: ad esempio, nei Mac il browser lo troverà col nome PostScript ('DroidSans') e non con gli altri. Se il browser non trova il font nel sistema, procederà al download dalla directory specificata. Il parametro format specifica il tipo di font, in questo caso un TrueType; se si fosse trattato di un OpenType, di un WOFF o di un SVG, avremmo avuto rispettivamente:

url('fonts/DroidSans.otf') format('opentype'),
url('fonts/DroidSans.woff') format('woff'),
url('fonts/DroidSans.svg@droidsans') format('svg');

Supporto dei browser

Nell’attesa che i WOFF diventino probabilmente lo standard per i caratteri sul web, al momento in cui scrivo Firefox, Chrome, Safari e Opera (ultime versioni) supportano tranquillamente i TrueType. Per approfondire l’argomento seguite i link riportati in fondo all’articolo.

Stili dei font presenti in questo blog

Per avere una panoramica di come questa tecnica è implementata in questo blog, eccovi tutte le dichiarazioni usate:

@font-face {
    font-family: 'Droid Sans Mono';
    src: url('fonts/DroidSansMono.eot');
    src: local('Droid Sans Mono Regular'),
         local('Droid Sans Mono'),
         local('DroidSansMono'),
         url('fonts/DroidSansMono.ttf') format('truetype');
}

@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/DroidSans.eot');
    src: local('Droid Sans Regular'),
         local('Droid Sans'),
         local('DroidSans'),
         url('fonts/DroidSans.ttf') format('truetype');
}

@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/DroidSans-Bold.eot');
    src: local('Droid Sans Bold'),
         local('DroidSans-Bold'),
         url('fonts/DroidSans-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('fonts/DroidSerif-Regular.eot');
    src: local('Droid Serif Regular'),
         local('Droid Serif'),
         local('DroidSerif'),
         url('fonts/DroidSerif-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Droid Serif';
    src: url('fonts/DroidSerif-Italic.eot');
    src: local('Droid Serif Italic'),
         local('DroidSerif-Italic'),
         url('fonts/DroidSerif-Italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('fonts/DroidSerif-Bold.eot');
    src: local('Droid Serif Bold'),
         local('DroidSerif-Bold'),
         url('fonts/DroidSerif-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('fonts/DroidSerif-BoldItalic.eot');
    src: local('Droid Serif Bold Italic'),
         local('DroidSerif-BoldItalic'),
         url('fonts/DroidSerif-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: bold;
}

Repository di font liberi o gratuiti

Dove trovare i font? Ovviamente potete usare tutti i font presenti nella vostra magnifica distribuzione Linux, tutti liberi da vincoli nell’utilizzo che preferite, oppure provate questi link:

Font Squirrel
Ralf Herrmann, 10 Great Free Fonts for @font-face embedding
Smashing Magazine, 40+ Excellent Freefonts For Professional Design.
Web Fonts, Fonts available for @font-face embedding.

Per approfondire

Mozilla Developer Center, @font-face.
Mozilla Hacks, Beautiful fonts with @font-face.
Wikipedia, Web typography.
Jonathan Snook, Becoming a Font Embedding Master.
Paul Irish, Bulletproof @font-face syntax.

L'articolo @font-face in Ubuntu block notes è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

La creazione delle colonne in CSS3

aldolat@gmail.com (Aldo Latino) — Fri, 24 Jul 2009 07:36:45 +0000

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.

Tre colonne

Il browser crea 3 colonne con spazio di 20 pixel e le distribuisce nello spazio a disposizione. Se avete installato Gridfox, un plugin per Firefox, vedrete come i valori si adattano perfettamente alla griglia di impaginazione usata nel tema di questo blog (12 colonne con spazio intercolonna di 20 pixel su una giustezza pagina di 940 pixel).

Questo lo stile:

.style {
    -moz-column-count: 3; /* conteggio colonne */
    -moz-column-gap: 20px; /* spazio intercolonna */
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Ed ecco come appare:

Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Colonne di 220 pixel

In questo caso creeremo due colonne, ma anziché dirne il numero, specificheremo la larghezza di ogni colonna e il relativo spazio. Il browser farà il resto.

.style {
    -moz-column-width: 220px; /* larghezza della colonna */
    -moz-column-gap: 20px;
    -webkit-column-width: 220px;
    -webkit-column-gap: 20px;
    column-width: 220px;
    column-gap: 20px;
}

3 colonne con riga divisoria

Stesso esempio del primo, ma con la riga intercolonna.

.style {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #ccc; /* riga di divisione delle colonne */
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #ccc;
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
}

Altezza + larghezza della colonna singola

Se la nostra esigenza è di occupare prima di tutto lo spazio in verticale, possiamo specificare l’altezza come al solito e poi la larghezza di ogni colonna. Il browser onorerà, appunto, prima il valore di altezza.

.style {
    -moz-column-width: 140px;
    -moz-column-gap: 20px;
    -webkit-column-width: 140px;
    -webkit-column-gap: 20px;
    column-width: 140px;
    column-gap: 20px;
    height: 760px; /* Altezza blocco colonne */
}

Altezza + numero di colonne

Come nell’esempio precedente ci interessa occupare lo spazio in altezza, ma questa volta specificheremo quante colonne vogliamo.

.style {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    height: 820px;
}

L'articolo La creazione delle colonne in CSS3 è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Pulsanti aggiuntivi al pannello di scrittura di WordPress

aldolat@gmail.com (Aldo Latino) — Tue, 12 Aug 2008 20:47:03 +0000

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.

AddQuicktag

AddQuicktag è il plugin che ci serve e lo trovate nella directory ufficiale dei plugin di WordPress. Scaricatelo, decomprimetelo e copiatelo nella vostra directory /wp-content/plugins del vostro server. Attivatelo quindi dal pannello di gestione dei plugin. Dopo l’attivazione, vi ritroverete con un comando in più nella scheda “Impostazioni” dal nome “Add Quicktag”. In questa pagina troverete tre campi per ogni riga:

la prima contiene il nome che visualizzerete sul pulsante;
la seconda contiene il tag di apertura;
la terza quello di chiusura.

Ecco un esempio di alcuni miei “quicktag”:

Capire come funziona è molto semplice. La prima riga riguarda il tag H3 che non è presente come pulsante nel pannello HTML: aggiungetelo così come lo vedete in figura e salvate le opzioni. Provate a scrivere un articolo di esempio. Per usarlo basta premere il pulsante H3 che vi ritroverete nel pannello HTML e WordPress scriverà per voi <h3> che corrisponde al secondo campo (quello successivo al nome). Scrivete il titolo e quindi premete di nuovo il pulsante H3 che adesso chiuderà il tag con </h3>. Allo stesso modo funzionano tutti gli altri.

Capito questo, potete sbizzarrirvi ad inserire tutti i comandi che volete. Ad esempio: avete creato uno stile che vi crea un box colorato, con una icona a sinistra e vi scrive il testo usando un carattere diverso? Anziché ricordarvi come si chiama quello stile e anche per evitare di scrivere tutta la trafila, potete aggiungere un pulsante così:

primo campo: il nome che vi piace;
secondo campo: il tag di apertura come <div class="mio-stile">;
terzo campo: il tag di chiusura come </div>.

Dei tre campi solo il terzo può non essere riempito in alcuni casi, come ad esempio nel caso in figura del pulsante “Spezza pagina”. In questo caso WordPress scriverà per voi una sola stringa di testo (come in figura, nel secondo campo) e nulla come tag di chiusura. Questo perché quella stringa è un marcatore per indicare a WordPress quando spezzare un articolo/pagina in un’altra pagina (e non necessita di chiusura tag).

È evidente che questo plugin scrive il tag per voi, ma la modifica del tag HTML e la creazione di stili specifici dovrà essere fatta nel vostro file style.css. Tutti i pulsanti che vedete nella prima figura (tranne “Spezza pagina” e “Download”) fanno riferimento a stili che ho definito nel foglio stile: altrettanto dovrete fare voi. Ad esempio, se io sono solito evidenziare un testo, come questo:

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.

avrò creato uno stile apposito dal nome “evidenzia” e avrò creato un pulsante “Evidenzia” (potete usare il nome che volete e non è necessario che stile e pulsante abbiano lo stesso nome). Se non lo avrò fatto, il pulsante non avrà alcun effetto.

L'articolo Pulsanti aggiuntivi al pannello di scrittura di WordPress è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Angoli arrotondati senza immagini

aldolat@gmail.com (Aldo Latino) — Fri, 06 Jun 2008 12:57:02 +0000

Quando si vuole creare un box con gli angoli arrotondati, generalmente si crea – in base all’uso – una immagine già pronta oppure una serie di piccole immagini ognuna contenente uno dei quattro angoli richiesti (come nel caso di questo blog). Ma c’è un sistema, ancora in fase di bozza, per far generare al browser i quattro angoli necessari per il layout senza l’uso di alcuna immagine.

La funzione si chiama border-radius e ha questi valori:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

In attesa che la funzione entri nelle specifiche ufficiali degli standard CSS, i software di casa Mozilla e quelli che usano Webkit già consentono l’uso di questo comando, diversamente, invece, da Explorer.

Implementazione Mozilla

Per l’uso con le applicazioni Mozilla queste sono le specifiche della funzione:

-moz-border-radius: <top-left top-right bottom-right bottom-left>
-moz-border-radius-topleft: <valore>
-moz-border-radius-topright: <valore>
-moz-border-radius-bottomright: <valore>
-moz-border-radius-bottomleft: <valore>

Implementazione Webkit

Le applicazioni che usano webkit (come Safari) utilizzano questa implementazione:

-webkit-border-radius: <top-left top-right bottom-right bottom-left>
-webkit-border-top-left-radius: <valore>
-webkit-border-top-right-radius: <valore>
-webkit-border-bottom-right-radius: <valore>
-webkit-border-bottom-left-radius: <valore>

Esempi

Ecco qualche esempio con relativo codice. Ovviamente, in attesa che la funzione diventi operativa, potete usare assieme l’implementazione Mozilla e quella Webkit.

I quattro angoli con solo il bordo a 10px

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="border: 1px solid #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 20px con riempimento e senza bordo

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 10px con riempimento e senza bordo

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

Superiore sinistro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Superiore destro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore destro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore sinistro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Fonti:

Non sono un webdesigner né tantomeno un esperto di codice HTML&Co.: se ho scritto inesattezze, segnatale pure nei commenti. Grazie per la pazienza! 🙂

L'articolo Angoli arrotondati senza immagini è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

HTML, CSS e Wordpress Help Sheets

aldolat@gmail.com (Aldo Latino) — Tue, 11 Dec 2007 10:37:52 +0000

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:

L'articolo HTML, CSS e Wordpress Help Sheets è uno scritto di aldolat.it. Rispettane le condizioni di licenza.