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!

Dec 3

ATTENZIONE: se state leggendo la versione inglese di questo articolo, i link ai files e il codice potrebbero non funzionare a causa della traduzione automatica di Google. Andate nella versione italiana e copiate il materiale da lì. Alan Curtis.

Qualche mese fà mi è capitato di dover fare un sito in flash per un’agenzia turistica, dove bisognava inserire delle gallerie di immagini.

Visto che erano piccole serie di immagini suddivise in pagine ben precise, ho pensato di utilizzare uno script che adoro: il LightBox v2.

Il bello del LightBox 2 è che può creare le serie di immagini, cioè carica l’immagine cliccata e poi ci aggiunge i pulsanti avanti e indietro. Così si può navigare la galleria restando nella sua finestra!

Ma non solo, il LightBox 2 fà anche il preloading delle altre immagini in modo da velocizzare la visione. Magnifico!

Però mi sono accorto di un problema: il buon LightBox v2 non funziona se richiamato da flash!

Armato di pazienza, mi metto a cercare in rete se qualcuno avesse fatto l’adattamento che mi serviva. Però non trovo nulla.

Allora ci penso un po’ e decido di farlo io.

Ecco quindi questo piccolo tutorial con esempio live, scaricabile qua:
flash-lightboxv2.zip
(compatibile flash 8 e mx 2004)

Sito per vedere lo script applicato: http://www.globaltravel.com.al

Flash LightBox v2

-

Nota: Questo script è un adattamento dell’originale LightBox V2 by Lokesh Dhakar del sito http://www.huddletogether.com/projects/lightbox2/
L’adattamento consiste nel poter caricare il LightBox da un filmato flash, permettendo anche serie di immagini con pulsanti di avanti/indietro.

Ecco come fare per integrarlo nel vostro sito o filmato flash:

1. copiare le seguenti cartelle nella stessa che contiene la vostra pagina/filmato flash:
- css
- images
- js

2. aprire il file flash e creare un nuovo layer (livello) chiamato “actions”, che conterrà gli actionscript. Nel primo frame del livello actions inserire il seguente codice:

// Alan Curtis - Flash LightBox v2
// Adaptation for flash of the original script by Lokesh Dhakar - http://www.huddletogether.com/projects/lightbox2/
// http://www.alancurtis.it
// http://blog.alancurtis.it
//
// Creo un array con i nomi delle immagini grandi da caricare.
// Per aggiungere immagini, basta continuare con “pics[4] = …” e così via.
// I create an array with the names of the big images to load.
// To add more images, just continue with “pics[4] = …” and so on.
pics = new Array();
pics[0] = “borsacaterinabianca.jpg”;
pics[1] = “borsacaterinabiancarossa.jpg”;
pics[2] = “borsacaterinabrunera.jpg”;
pics[3] = “borsacaterinarossa.jpg”;

// Url - cartella dove sono contenute le immagini, senza slash finale!
// Url - folder with the images, without ending slash!
var url = “fotografie”;

// Ora creo una variabile chiamata “allpics” che contiene tutti i nomi delle
// immagini separate da una virgola. Questa variabile verrà poi passata al LightBox.
// Now I create a variable called “allpics” which contains all the images’ names
// divided by a comma. This var will be passed to LightBox.
var allpics = url+”/”+pics[0];
var i = 1;
while (i<pics.length) {
allpics = allpics+”,”+url+”/”+pics[i];
i++;
}

3. Sempre nel file flash, creare le thumbnail o i pulsanti che caricheranno le immagini, convertirli in “symbol -> Button” e inserire per ognuno il seguente codice:

on (release) {
getURL(”javascript:show(0, ‘”+allpics+”‘)”);
}

4. Aprire la pagina che contiene il filmato flash con un editor di html o dreamweaver/frontpage e apportare le seguenti modifiche:

a) Nell’HEAD (tra <head> e </head>) aggiungere le seguenti righe:

<script src=”js/prototype.js” type=”text/javascript”></script><br /><br><script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script><br /><br><script type=”text/javascript” src=”js/lightbox.js”></script><br /><br><link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” /><br /><br>

b) nel tag OBJECT (del file flash) aggiungere la seguente proprietà (se non già inclusa in automatico):

<param name=”allowScriptAccess” value=”sameDomain” />

c) nel tag EMBED aggiungere la seguente proprietà assieme alle altre (se non già inclusa in automatico):

<embed allowScriptAccess=”sameDomain” …….>

d) dopo il filmato, in una zona vuota (es. una cella o riga), inserire il seguente tag:

<div id=”anchors”></div>

Ecco fatto, il vostro filmato flash ora è pronto per caricare le gallerie di immagini fatte con il LightBox v2!
Buona visione!

Nov 22

Tante volte mi capita di dover intervenire sul codice di un sito e magari cambiare una password di qualche applicazione web fatta in php o asp.

Il problema è che tante piattaforme e scripts vari memorizzano le password criptate (crittografate o cifrate che dir si voglia) nel file di configurazione. Così per cambiare la password bisogna inserire il cosiddetto hash (risultato della crittografia) della password scelta.

Nella maggior parte dei casi l’algoritmo di crittografia usato è l’md5, anche se non è assolutamente il più sicuro (se si cerca su google “md5 break” vengono fuori moltissimi siti che spiegano come crackare l’algoritmo.

Ma non è il solo: altri algoritmi usati sono l’md4 e il più sicuro Sha-1.

Ecco che ho fatto una piccola ricerca ed ho trovato finalmente come creare una paginetta dove scoprire l’hash delle password con questi 3 algoritmi in modo istantaneo.

Mi è talmente utile che lo riporto “live” qua sotto, con tanto di file .zip con il codice per inserirlo nei vostri siti o usarlo sul vostro pc!

Encryption Tool

Password
Calcola l’hash
Risultato

-

Se volete integrare anche voi questo script, potete seguire questo breve tutorial:

  1. scaricate il file encryption.js
  2. copiatelo nella stessa cartella della pagina html nella quale volete inserire lo script
  3. aprite la pagina html ed inserite il seguente codice:

<h1>Password Encryption Tool</h1>
<script src=”encryption.js” type=”text/javascript”></script>
<form>
<table border=”0″ cellpadding=”4″ cellspacing=”1″ bgcolor=”#000000″>
<tr>
<td style=”color: white; font-weight: bold; padding:10px;”>Password</td>
<td bgcolor=”#32922D”>
<input name=”input” size=”50″ type=”text”>
</td>
</tr>
<tr>
<td style=”color: white; font-weight: bold; padding:10px;”>Calcola l’hash</td>
<td bgcolor=”#32922D” align=”center”>
<input onclick=”hash.value = hex_md4(input.value)” value=”MD4″ type=”button”>
<input onclick=”hash.value = hex_md5(input.value)” value=”MD5″ type=”button”>
<input onclick=”hash.value = hex_sha1(input.value)” value=”SHA-1″ type=”button”>
</td>
</tr>
<tr>
<td style=”color: white; font-weight: bold; padding:10px;”>Risultato</td>
<td bgcolor=”#32922D”><input name=”hash” size=”50″ type=”text”></td>
</tr>
</table>
</form>
<i><font size=”1″> Encryption Tool by <a href=”http://blog.alancurtis.it/”>Alan Curtis Blog - software, scripts, web marketing & SEO</a></font></i><br /><br /><br />

Questo script è utilizzabile anche in locale, visto che richiede solo i JavaScript abilitati.
Ecco la versione .zip da scaricare con questo esempio incluso: password_encryption_tool.zip

Il presente esempio è stato realizzato usando le librerie di creazione hash realizzate da Paul Johnston, vai al sito dell’autore: http://pajhome.org.uk/crypt/md5
Io mi sono solo limitato a fondere insieme gli algoritmi in un file .js unico ed ho fatto la paginetta html d’esempio. Se lo usate e avete voglia… lasciate anche il mio link! Vi ringrazio!

Bene, questo è tutto!
Buona crittografia a tutti!

Improve the web with Nofollow Reciprocity.