Feb 17

I font veramente universali, cross-browsers e cross-systems, sono molto pochi.
Mi riferisco a quei font (set di caratteri) che vengono visualizzati allo stesso modo da tutti i computer e sistemi operativi più diffusi al mondo (pc, mac, unix-linux, amiga -se esiste ancora chi la usa per navigare, palmari con symbian o windows mobile, ecc…)

Infatti, affinchè un font sia visualizzato correttamente, non basta definirlo nel codice html o css. Quel font deve anche essere installato nel computer di chi visualizza la pagina web. Infatti se non viene trovato, il sistema lo sostituirà in automatico con uno standard tipo Arial o Times New Roman.

Ecco perchè i font “web safe” sono molto pochi, il loro requisito indispensabile è che siano preinstallati in TUTTI (o quasi) i sistemi operativi esistenti al mondo. Ma alcuni sono protetti da copyright, quindi non utilizzabili da altre società (vedi il Times New Roman di Microsoft).

Ecco quindi le liste di font sicuri per il web con le varianti per la compatibilità su tutti i sistemi, pronte per essere incollate dentro a stili css.

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Visualizza l’anteprima di questo testo:

Dimensione Font:

RISULTATO:

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Arial, Helvetica, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Arial Black’, Gadget, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Bookman Old Style’, serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Comic Sans MS’, cursive;


The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Courier, monospace;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Courier New’, Courier, monospace;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Garamond, serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Georgia, serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Impact, Charcoal, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Lucida Console’, Monaco, monospace;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

0123456789

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘MS Sans Serif’, Geneva, sans-serif;


The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘MS Serif’, ‘New York’, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Symbol, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Tahoma, Geneva, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Times New Roman’, Times, serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

0123456789

font-family: Verdana, Geneva, sans-serif;


The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Webdings, sans-serif;


The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Jan 13

Oggi a lavoro, nella mia nuova società Advertalis (così nuova che non ha ancora il sito, ehmm…), da un cliente mi è stato richiesto un piccolo script in php con creazione di cookie.

Lo scopo è identificare se il visitatore è nuovo oppure è già venuto sul sito e mostrargli un messaggio diverso in base al caso.

Non è niente di chè, ma può essere interessante per chi non ha troppe conoscenze di php. Poi potrebbe servirmi di nuovo in futuro, quindi ho deciso di “annotarmela” qua. :)

INIZIAMO: Per creare il cookie correttamente, non bisogna inserire altri comandi o tag html prima di queste righe di codice:

<?php
/*
Scadenza del cookie:
una volta scaduto, l’utente sarà riconosciuto come “nuovo”
è stato inserito 60*60*24*30 (corrispondente a 1 mese - sec*min*hh*gg) per comodità,
in realtà il valore è in secondi
*/
$expiration = time() + 60*60*24*30;

//testo da visualizzare per nuovo utente (o prima visita),
$firstVisit = ‘This is the first visit’;

//testo da visualizzare alla seconda o successiva visita
$secondVisit = ‘Returning visitor’;

if($_COOKIE['AAA-WelcomeCookie']) {
$welcometext = $secondVisit;
} else {
setcookie(’AAA-WelcomeCookie’, date(”H:i - Y/m/d”), $expiration);
$welcometext = $firstVisit;
}
?>
<html>
<head>

…continua con l’header… poi, nel BODY, inserire a piacere questo codice php per visualizzare il messaggio:

<body>

<?php echo $welcometext; ?>

</body>
</html>

Questo è tutto, semplice semplice e senza pretese.
Ringrazio Klevis, il mio nuovo programmatore in via di addestramento, che ha scritto materialmente queste righe di codice. :)

Sep 15

Si sa, per quel che riguarda i CSS (Cascade Style Sheets o fogli di stile) Internet Explorer è tra i browser peggiori.

Non interpreta correttamente (come da manuale w3c) le proprietà dei css e li legge a modo suo.

Firefox invece è molto più aderente allo standard ufficiale, ma non tutti usano Firefox.

Così, quando bisogna centrare un <div> o un’altro elemento le cose si complicano. Per evitare il classico <center></center> ed avere la compatibilità su tutti i browsers un modo c’è, ma bisogna fare un piccolo trick.

Visto che mi capita di farlo spesso lo scrivo qua come promemoria personale, magari utile anche a qualcun’altro.

Il “trucco” è questo.

Bisogna creare 2 <div> uno dentro l’altro, in questo modo:

<div id="contenitore1">
<div id="contenitore2">Contenuto, testo, foto, ecc...</div>
</div>

Poi bisogna creare gli stili nell’header della pagina o in un file .css a parte:

#contenitore1 {
text-align: center; /* per Internet Explorer */
}

#contenitore2 {
margin: 0 auto;     /* allineamento standard in CSS */
text-align: left;     /* compensiamo l’allineamento al centro  */
/* AGGIUNTI SOLO PER VISUALIZZARE MEGLIO L’ESEMPIO: */
border: 2px solid #000;
width: 50%;
}

Ecco fatto, il trucco è tutto qui.

Buon allineamento!

« Previous Entries

Improve the web with Nofollow Reciprocity.