ilDavid.com

L’utilizzo dei caratteri (font) sul web è sempre stato limitato ai cosiddetti font di sistema. Windows, Mac OS e Linux hanno i propri caratteri predefiniti e di conseguenza nella creazione di un layout grafico bisogna tenerne conto: il testo propriamente testuale deve per forza essere in un carattere disponibile in tutti gli ambienti. Esempi di questi font sono: Arial, Helvetica, Times New Roman, Verdana, Trebuchet, o più genericamente serif e sans-serif.
Da qualche anno però si stanno sperimentando varie tecniche per ovviare a queste limitazioni.
Il primo è sIFR: un sistema che attraverso JavaScript, css e Flash permette l’utilizzo di qualsiasi tipo di font. sIFR ovviamente richiede che JavaScript sia abilitato e che sia installato il plug-in di Flash. Nel caso in cui queste due condizioni non fossero esaudite, il testo viene visualizzato normalmente, col font di sistema specificato nei css.
Il secondo, leggermente più difficile da implementare, è FaceLift, che funziona lato server ovvero ha bisogno di PHP (meglio se 5) e le librerie GD. Anche se è più ostico del primo, garantisce a mio modo di vedere, un risultato migliore, e non necessita di un plug-in aggiuntivo nei client.
Ma il terzo è sicuramente più interessante. Si chiama Typeface.js e necessita solo di JavaScript. Come funziona?

typeface.js uses browsers' vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing — Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

In browsers that support <canvas> the text is selectable, but you have to have faith. As you select there's no feedback, no highlighting to let you know that it's working. Future work will aim to implement better, cross-browser support for selecting text with highlighting.

Lo script Perl serve solo per convertire i font e renderli utilizzabili con la libreria js, e si può anche utilizzare il convertitore presente nel sito.

Un interessante script php che comprime (con Gzip) gli elementi della pagina (css, javascript e html) per minimizzare il tempo di caricamento.

Ovviamente il server deve avere php4 (php5 per comprimere i javascript), e la classe php deve essere in una cartella scrivibile.

Un problema davvero fastidioso per un webdesigner è la cattiva (quando non impossibile) applicazione degli stili CSS alle select nei form. Fortunatamente JavaScript ci viene incontro, e grazie al lavoro fatto dagli australiani di Ace Web Design e all’aiuto del mio amico e collega Michele, vi presento un plug-in per jQuery che permette di personalizzare (e animare) una select in tutti i browser.
In sostanza lo script sostituisce il campo <select> con un campo nascosto e una serie di div, successivamente al cambiare delle opzioni viene valorizzato il campo nascosto e quindi viene passato al form come un normale campo.

Scarica lo script con una spiegazione e alcuni esempi, oppure guarda il codice:

$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
	// based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
	// modified by David Vian http://www.ildavid.com
    return this.each(function(){
        var obj = $(this);
		var name = obj.attr('id');
		var id_slc_options = name+'_options';
		var id_icn_select = name+'_iconselect';
		var id_holder = name+'_holder';
		var custom_select = name+'_customselect';
        obj.after("<div id=\""+id_slc_options+"\"> </div>");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("<div title=\"" + $(this).attr("value") + "\" class=\"selectitems\"><img src=\"" + this.title + "\" /><span>" + $(this).html() + "</span></div>");
        });
        obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\"> </div>").remove();
        $("#"+id_icn_select).click(function(){
            $("#"+id_holder).slideToggle(200);
        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.title);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).slideToggle(250)
        });
    });
}