ilDavid.com

Sitepoint, importante sito di riferimento per lo sviluppo web, offre gratuitamente uno dei suoi più importanti libri The Art & Science of CSS per 12 giorni ancora. Ci sono 2 modi per ottenerlo: lasciando la propria email, alla quale viene inviato il link per il download del PDF, oppure seguire il loro Twitter.

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.

Sitepoint è una “online media company” che si occupa di advertising e servizi per webdevelopers (sua la community di 99designs.com). Negli ultimi mesi hanno pubblicato due reference per i linguaggi web: HTML e CSS. Una terza, su JavaScript, è in arrivo. Questi manuali sono molto utili per i webdesigners, perchè spiegano in dettaglio come funzionano gli elementi e gli attributi, e come si comportano nei diversi browser. Indispensabile nei bookmarks.

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)
        });
    });
}

Un menu a tab, con l’uso esclusivo di xhtml e css. Semplice ed efficace. CSS Tabs Menu E la relativa lista di menu orizzontali.

E una raccolta di 56 menu moderni di Smashing Magazine

Uno dei grossi problemi che un webdesigner si trova ad affrontare quando ha a che fare con righe orizzontali <hr> e i browser Microsoft, è il bordo che Internet Explorer decide di mettere quando si usa una immagine di sfondo a fare da separazione tra una sezione e un’altra.

In tanti hanno proposto delle soluzioni, e la più seguita credo sia quella di Marek Prokop, tradotta in italiano da risorse.net. La soluzione è certamente la più corretta a livello semantico e di standard, rimane però il problema che non sempre è possibile usare un <div> contenitore (per esempio in un CMS).

Jaroslav Polakovič ha però trovato una soluzione a mio avviso più interessante, ovvero utilizzare un attributo css proprietario di IE: lo zoom.

Presente fin da IE 5 la proprietà zoom permette appunto di ingrandire (o diminuire) un oggetto in percentuale. In questo modo, rimpicciolendo la dimensione del <hr> a un quarto della sua dimensione, i bordi “spariscono”. Per fare questo è però necessario un commento condizionale per IE e una immagine di sfondo 4 volte più grande di quella usata per i browser standard compliant.

Il codice:

<!--[if lte IE 7]>
<style type="text/css">
hr {
  background-image: url('four-times-larger-image.gif');
  height: 60px;zoom: 25%;
}
  </style>
<![endif]-->