Fermiamo IE6!

Pubblicato il 19/06/2009 nelle categorie: webdesign

Man mano che vengono implementate regole dei CSS3 o anche le innovazioni dei framework javascript diventa sempre più frustrante confrontarsi col problema della resa su Internet Explorer 6 (e pure col suo fratello più grande IE7). Sono sorte petizioni, siti e script vari per ovviare ai problemi, ma secondo me finchè la gente continua ad usare questo browser ci saranno sempre problemi. Ecco quindi il mio plugin per jQuery che invita ad aggiornare all’ultima versione di IE o di passare ai browser che funzionano: Firefox, Chrome, Safari, Opera.

$(document).ready(function(){
                if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)< =7){messaggio='<div id="stopie6">Il programma che state utilizzando per navigare &egrave; obsoleto. Per aumentare la sicurezza durante la navigazione e le funzionalit&agrave; vi consigliamo di aggiornare il vostro browser. <br />Passate gratuitamente a <a href="http://www.microsoft.com/italy/windows/products/winfamily/ie/default.mspx" target="_blank">Internet Explorer 8</a>, o <a href="http://www.mozilla-europe.org/it/firefox/" target="_blank">Firefox</a>, <a href="http://www.apple.com/it/safari/download/" target="_blank">Safari</a>, <a href="http://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="http://www.opera.com/" target="_blank">Opera</a>.';$("body").prepend(messaggio);$('#stopie6').css({'background-color':'#ffc','color':'#333','font-family':'Arial,sans-serif','padding':'8px','font-size':'13px','border':'solid 1px #333'})}
            });
Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

styleCheckbox: a jQuery plugin

Pubblicato il 30/01/2009 nelle categorie: webdesign

Un piccolo plugin per personalizzare le checkbox dei form.
Sostituisce le checkbox in input type="hidden" e applica le classi checked e unchecked alla label della checkbox.

$.fn.styleCheckbox = function () {
	$(":checkbox").each ( function() {
		var nome=$(this).attr('id');
		var etichetta = $("label[for='"+nome+"']");
		var moo = $('
');
		if (this.checked) {
				$(etichetta).addClass("checked");
				moo.attr('value','on');
		} else {
				$(etichetta).addClass("unchecked");
		}
		$(this).before(moo).remove();
		$(etichetta).click( function() {
			if(moo.attr('value') == ''){
				val = 'on';
			} else {
				val = '';
			}
			moo.attr('value',val);
			$(this).toggleClass("checked").toggleClass('unchecked');
		})
	});
}

Si attiva alla caricamento della pagina con

$(document).ready(function(){
    $('#contatti').styleCheckbox();
});

Vanno poi applicati i fogli di stile, ad esempio

#checkbox {
	width:auto;
	cursor:pointer;
}
#checkbox .unchecked {
	background:transparent url(images/check_off.png) no-repeat left bottom;
	padding:0 0 0 18px;
}
#checkbox .checked {
	background:transparent url(images/check_on.png) no-repeat left bottom;
	padding:0 0 0 18px;
}
Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Un interessante regalo

Pubblicato il 20/11/2008 nelle categorie: webdesign

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.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Tipografia sul web

Pubblicato il 30/10/2008 nelle categorie: webdesign

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.

Edit: un nuovo script che funziona più o meno come Typeface: Cufón.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Domain Name Dollar Store

Pubblicato il 26/09/2008 nelle categorie: video

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.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Sitepoint Reference

Pubblicato il 26/09/2008 nelle categorie: webdesign

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.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Compressione css, html e JavaScript

Pubblicato il 22/09/2008 nelle categorie: webdesign

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.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook

Nuovi MacBook in arrivo?

Pubblicato il 16/09/2008 nelle categorie: hardware

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.

Condividi nel 2.0
  • Digg
  • del.icio.us
  • Technorati
  • Google
  • BarraPunto
  • Meneame
  • Pownce
  • Segnalo
  • StumbleUpon
  • Facebook