CSS

Compass CSS Framework


compass-cssCompass è un interessante CSS framework che rivoluziona il modo in cui siano normalmente abituati a creare i fogli di stile. Non si tratta infatti di una semplice collezione di classi, ma di un sistema che utilizza il linguaggio SASS per creare fogli di stile.

Compass non si propone come antagonista dei vari framework CSS esistenti come BluePrint, YUI e 960 ma al contrario permette di integrarli in modo da utilizzarli per la realizzazione dei propri progetti.

Per utilizzare Compass è necessario avere installato il supporto al linguaggio Ruby ed utilizzare una macchina dotata di sistema operativo Linux o Mac OS X, dato che il sistema non è stato testato a fondo in ambiente Windows. E’ richiesta inoltre una certa confidenza con l’utilizzo di un’interfaccia a linea di comando. Continua a leggere »


Anno nuovo, vestito nuovo


Con l’arrivo del nuovo anno ho deciso di aggiornare un po’ il template di questo blog, puntando a rendere l’aspetto più semplice ed essenziale e lasciando maggiore spazio ai contenuti.

Il template è ora più largo e alterna la visualizzazione a tre colonne (nella home page e nelle pagine degli archivi) a quella a due colonne, riservata alle pagine dei singoli articoli.

Molti elementi che prima erano presenti nelle colonne laterali sono stati spostati nella testata e nel footer del blog.

Le operazioni di aggiornamento non sono ancora completate del tutto, dato che ho in programma ancora alcune modfiche che probabilmente introdurrò nelle prossime settimane. Per il momento però godetevi il nuovo tema e ditemi come vi sembra.


Editor CSS a confronto


Smashing Magazine ha pubblicato un confronto tra i diversi strumenti che permettono di gestire i fogli di stile CSS nel modo più veloce e funzionale possibile.

Gli editor CSS non sono strumenti indispensabili, dato che è possibile creare e modificare i fogli di stile con un semplice programma di testo come Notepad o EditPlus, ma semplificano notevolmente le varie attività grazie ad una serie di funzionalità che velocizzano i compiti più ripetitivi.
Continua a leggere »


Dal 2003 ad oggi è triplicata la dimensione media di una pagina web


Photo by Melting MamaLa dimensione media di una pagina web è più che triplicata dal 2003 ad oggi. A riportare questa informazione è il sito Websiteoptimization.com. Si è passati da una media di 93.7 Kb ai 312 Kb odierni. Anche il numero di elementi presenti in una pagina è salito in questi anni e si è arrivati ad una media di circa 50 oggetti per pagina, aspetto che contribuisce notevolmente nell’aumentare il tempo di caricamento di una pagina web.

Nel 2007 è risultato che l’84.8% delle pagine considerate conteneva almeno un elemento JavaScript esterno, dalla dimensione media di 8.845 byte. Il numero medio di script per pagina era invece pari a 7.

Per quanto riguarda l’uso dei fogli di stile, nel 2007 l’82,4% delle pagine conteneva il tag link per richiamare un foglio di stile esterno, mentre il 54,5% impiegava (anche o esclusivamente) il tag style per incorporare gli stili direttamente nella pagina. La dimensione media dei file CSS esterni era di 6.575 byte.
Continua a leggere »


Scopri come appare il tuo sito sui diversi browser


La parte spesso più fastidiosa nello sviluppo di un template per un sito riguarda lo sforzo necessario per adeguarsi ai differenti comportamenti dei browser presenti sulle diverse piattaforme. Può succedere infatti di avere un sito che corrisponde esattamente al mockup grafico di riferimento quando viene visualizzato su un pc con Internet Explorer 6 e con Firefox, ma che presenta caratteri troppo grandi se visto con Safari su Mac oppure elementi non perfettamente allineati con Internet Explorer 7.

Per rendersi conto di queste problematiche è quindi necessario testare un sito su diversi browser e piattaforme differenti. Non sempre però è necessario essere dotati di altri computer per effettuare questi test.
Continua a leggere »


Provate a selezionare questo testo


text-selezione.jpgVisitate questa pagina con Mozilla Firefox o Safari e selezionate il testo presente con il mouse (o tramite il comando “Seleziona tutto”).

Selezionando il testo vedrete apparire un’immagine. Merito dello pseudo-element “selection”, una caratteristica presente nel linguaggio CSS3.

E’ stato reso disponibile anche uno strumento per creare nuovi testi con tale effetto.


Analizzare le pagine web con XRAY


Chi progetta spesso pagine web ed ha quotidianamente a che fare con (X)HTML e CSS dispone ormai di una serie di strumenti che gli permettono di analizzare il risultato del proprio lavoro in un modo che va oltre la semplice visione delle pagine attraverso un browser.

Sul browser Mozilla Firefox è possibile ad esempio installare la famosa Web Developer Toolbar che permette di sezionare in mille modi una pagina web per verificare la bontà del codice sin nei minimi particolari.

Ora è però disponibile anche un nuovo strumento che non richiede alcuna installazione, ma è accessibile attraverso la logica del bookmarklet, ossia di una funzione JavaScript che si presenta come un normale bookmark.
Continua a leggere »


70 consigli per la realizzazione dei CSS


Su Smashing Magazine è possibile trovare una lista di suggerimenti che possono tornare utili nella creazione dei fogli di stile. Dagli hack più diffusi ai consigli per l’organizzazione dei vari elementi contenuti in uno o più file CSS.


Generatore di temi per WordPress


Per chi ha fretta e non è molto pratico di HTML e CSS, ecco un generatore di temi per WordPress che permette di ottenere in pochi minuti un template relativamente personalizzato per il proprio blog.


Consigli per scrivere un buon markup HTML


Roger Johansson su 456 Berea Street, riprendendo un articolo apparso su Digital Web, pubblica una lista di punti (pienamente condivisibili) da tenere presente nella realizzazione di un buon markup html.

Continua a leggere »