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.

Sono finiti i domini con nomi interessanti? Falso! Domain Name Dollar Store ha i migliori domini dell’universo! Come per esempio: plornk.com, slorpy.com, snordna.com, fwackoo.com, kffphrhrrrr.com e i social network myshpaesh.com e baycefook.com…
Questo esilarante video è stato realizzato da QuietLibrary, un gruppo comico americano. La cosa divertente è che i domini citati, molto probabilmente liberi prima del video, sono stati acquistati nel giro di pochi giorni. Un tipico fenomeno web.

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.

Dopo la presentazione dei nuovi iPod e iPhone lo scorso 9 settembre, si sono susseguiti rumors sull’uscita dei nuovi portatili e fissi di fascia consumer Apple: MacBook e iMac.
Voci che vogliono l’uscita di un nuovo modello di MacBook per il 14 ottobre sembrerebbero confermate da una notizia pubblicata ieri pomeriggio da Barron’s online e ripresa da MacRumors che afferma la partenza dei nuovi MacBook dai produttori ai distributori.
I nuovi MacBook sarebbero con un case sottile in alluminio, un display retroilluminato a LED e un prezzo di ingresso molto aggressivo. Alcune foto dei possibili nuovi portatili consumer erano trapelate i primi di agosto da un blog taiwanese.

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

In questo articolo di CSS-Tricks vengono spiegati tutti i trucchi e le varie compatibilità della proprietà css float.
Fondamentale per poter essere sicuri di un risultato cross-browser.