Quali sono i veri vantaggi nell’utilizzo di un CSS fatto per bene?

• Terminato e pubblicato il sito, il cliente cambia idea e decide di cambiare tutti i font da Arial a Verdana –> Velocità di aggiornamento totale sul sito cambiando un unico file
• L’architettura informativa prevede una marea di voci di menu grafici nei tre tipici stati: attivo, inattivo, visitato –> Caricamento di un’unica immagine in background che cambia il suo posizionamento, comandata dal css
• La bozza grafica prevede la sovrapposizione di più elementi con trasparenze, sovrapposizione di colori ed ombre –> Utilizzando i <div> possiamo posizionare a “livelli” ogni singolo elemento e con i css determinarne i bordi, i colori e gli effetti senza l’utilizzo di immagini che appesantirebbero il caricamento della pagina
• Il titolo della pagina è grafico e penalizza l’indicizzazione nei motori di ricerca –> Personalizzando il css dell’H1 si puo’ nascondere il testo fuori dal monitor e rimpiazzarlo con un’immagine di background, facendo però indicizzare dai motori di ricerca in maniera corretta il titolo e mantenendo la possibilità di lettura anche per le tecnologie assistive.
• Il logo aziendale si è evoluto ed ha cambiato un codice colore che deve essere cambiato in tutto il sito che è stato fatto da terzi –> Grazie a strumenti gratuiti di debug posso agevolmente variare il colore avendo un’anteprima veritiera ed in tempo reale del layout, riducendo i tempi di realizzazione
• Il cliente vuole il suo sito internet visualizzato su un palmare per poterlo monitorare mentre è in vacanza, ma mi ha comunicato che partirà tra un paio di giorni –> clonando il css e personalizzandolo, a seconda di dove viene visualizzato il sito, verrà caricato quello più consono

Questi sono solo alcuni dei vantaggi nell’utilizzare correttamente la combinazione dei css applicata ai div, ma se vi state chiedendo se le tabelle siano state bandite, la risposta è no.
Le tabelle si continueranno ad utilizzare nel modo per cui sono state inventate, ovvero per formattare dati.

Gio

L’articolo su AlistApart permette di conoscere tutti gli utilizzi di questa ottima tecnica: http://www.alistapart.com/articles/sprites/
C’è chi la definisce come una tecnica misteriosa riportando molti esempi di siti che la utilizzano: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Anche il LAU – Laboratorio di Accessibilità e Usabilità ne parla con un utile articolo in italiano con le istruzioni per implementare la tecnica.
In tutti gli articoli viene consigliato l’utilizzo di CSS Sprites Generator, se ne trovano di diversi tipi in rete e in pratica fanno tutto il “lavoro sporco” per noi, restituendoci le immagini già composte con le posizioni corrette. 
L’unico neo  riguarda l’accessibilità, in quanto non è possibile utilizzare testo alternativo (tag alt) sulle immagini, inoltre se usiamo questa tecnica per visualizzare loghi e parti grafiche rilevanti del sito, dobbiamo sapere che non ci sarà possibilità di stamparle.

Vale

Il sito in perfetto stile web 2.0 permette di interagire inserendo i propri consigli, taggarli con parole chiave  e suggerire tutorial o esempi relativi al consiglio proposto.
Inoltre il sito propone anche una suddivisione di tutti gli accorgimenti inseriti in tre livelli di apprendimento: beginner, intermediate e advanced e un sistema di votazione per decretare i consigli più votati.

Mi sembra una proposta originale e interessante per raccogliere idee, condividerle tra gli utenti e creare una guida utile e facile da consultare.  Speriamo che il servizio abbia successo e continui ad arricchirsi e magari ad aggiungere qualche altra features interessante in stile web 2.0.

Vale

*Carlo*

Un bravo sviluppatore web sa che Firebug è un estesione per Firefox che rente molto facile il debug delle nostre pagine web e ti permette di ottimizzare i tempi per fare delle modifiche evitando ogni volta di andare ad aprire direttamente il codice sorgente.

Non tutti sanno però che esiste una versione semplificata del mitico Firebug chiamata Firebug Lite, utilizzabile su browser come Internet Explorer, Opera e Apple Safari.

Firebug lite

Per poterlo utilizzare ci sono 2 modi: come chiamata Bookmark o come libreria Offline.

In modalità Bookmark bisogna aggiungere il seguente link nei preferiti:

javascript:var firebug=document.createElement(’script’);firebug.setAttribute(’src’,'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’);document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Sarà possibile attivare Firebug Lite su qualsiasi sito Web e da qualsiasi browser. Questa è forse l’opzione più interessante, nonostante le funzioni siano davvero limitate.

In modalità Offline se stiamo sviluppando noi un sito Web, è possibile scaricare un pacchetto Javascript ed installarlo sul nostro Web! In questo modo possiamo usare Firebug Lite anche senza una connessione Internet ed in locale.

Sebbene non sia possibile editare il CSS degli elementi selezionati, Firebug Lite fornisce un meccanismo per editare il CSS. E’ una cosa simile a una console CSS da dove scrivete il vostro codice CSS e ne visualizzate il risultato.

Sul sito ufficiale sono descritte piccole modifiche che si possono apportare a Firebug Lite, chi ne fosse interessato può consultarlo al seguente indirizzo http://getfirebug.com/lite.html.

Bene

Per  comprenderle meglio linko qualche post interessante dai blog che hanno contribuito a divulgarle e che ogni giorno si impegnano per far si che l’accessibilità in Italia non sia solo teoria:

Marco Bertoni nel suo blog  Semplicemente.org, riassumendo ci fornisce una versione chiara delle dodici linee guida e dei principi alla base delle WCAG2.0.  (secondo me da stampare e conservare)

Da Webaccessibile.org troviamo la prima bozza integrale di traduzione delle WCAG2.0. in italiano, uscita recentemente.

E infine dal blog di Roberto Scano, un’ interessante interpretazione delle linee guida,  portate in musica offrendoci addirittura la canzone ufficiale in versione rap delle WCAG2.0., un modo alternativo per farle conoscere  e per far capire quante persone si impegnano affinchè ci sia diffusione sempre più consapevole dell’esigenza di  una cultura dell’accessibilità.

Vale

Dati statistici riportano un sostanziale calo dell’utilizzo di IE6 da parte degli utenti nell’ultimo anno,  viene quindi naturale chiedersi quale sia la strategia migliore per farlo uscire di scena nella maniera più indolore possibile.

Molti siti norvegesi hanno deciso di non supportare più questo browser, così come un buon numero di sviluppatori avevano dichiarato che nel 2009 avrebbero abbandonato IE6 creando anche gruppi sui social network come “Liberiamoci da Internet Explorer 6” su Facebook.

Le soluzioni sono molte, dalle proposte meno invasive  come una box /warning , prima dei contenuti,  che consiglia all’utente  di aggiornarsi per godere di tutte le funzionalità più avanzate del sito, alle proposte più estreme, come quella di non passare più fogli di stile a IE6, limitando l’esperienza utente a chi non vuole aggiornare il browser, ai soli contenuti testuali .

Io credo che la giusta soluzione stia nel mezzo, è vero che l’utente dovrebbe essere invitato con risolutezza ad aggiornarsi ma bisogna considerare anche le esigenze di molte aziende che non si aggiornano con facilità.
Sono curiosa di sapere cosa succederà e voi cosa ne pensate?

Vale

Il problema della compatibilità con i browser, infatti, riguarda tutti i siti Internet e nasce quando una pagina web o qualsiasi altra risorsa condivisa in rete viene sviluppata senza tener conto delle funzionalità presenti nei diversi browser, nelle diverse versioni degli stessi e nelle diverse piattaforme che li supportano.

Bisogna cercare di  adottare determinati accorgimenti in termini di linguaggi di markup (XML, XHTML, HTML ecc), fogli di stile (CSS, XSLT ecc), scripting lato client (javascript/ajax o altri) o eventuali altri formati di uso frequente sul web (Flash, Java), al fine di permettere all’utente che naviga di visualizzare e fruire i contenuti senza differenze dipendenti dal browser che utilizza.

Io la vedo come una ricerca, una ricerca del codice perfetto; a volte si rischia così di trasformarla in un’odissea, in una ricerca estenuante di trucchi e soluzioni alla miriade di bug che affliggono i browser presenti nel mercato.

Ma come fare a testare il nostro sito web su tutti i browser esistenti nel mercato?
Bè , esistono svariati programmi che ti permettono di testare il sito web, ma quello che mi ha colpito di più girando in rete è stato Browsershots.

Browsershot è un servizio web, gratuito, che permette di visualizzare un sito in 50 web browser diversi, di tutti e 4 i maggiori sistemi operativi (Linux, Windows, Mac OS X, BSD).
Basta inserire l’url del nostro sito web nell’apposito spazio , selezionare i browser con cui fare il controllo, addirittura puoi decidere di selezionare le dimensioni dello schermo, la profondità di colore, selezionare se sono presenti script  java e se è presente un animazione flash.

Avremo davanti a noi una serie di thumbnails: una per ogni browser scelto.
Se clicchiamo la thumbnail, ingrandiremo lo screenshot e otterremo informazioni  sul computer, sul browser, e sul rendering in generale. Cliccando invece sullo screenshot avremo l’immagine a grandezza massima.

Peccato che il confronto avvenga solo con degli screeshot e non si possa navigare all’interno dei vari  browser, ma chissà che in un futuro non venga sviluppato un modo semplice e veloce per testare i nostri siti web interagendo con i vari browser.

Quanto dovremmo ancora soffrire per raggiungere il codice perfetto?
Bene

Si tratta di un foglio di stile di base in grado di annullare tutte le proprietà CSS attribuite di default dai browser (dimensioni, peso, tipo, margini, padding, ecc..).

Interessante l’evoluzione del CSS nelle diverse versioni e soprattutto da non perdere la logica dietro le varie scelte implementative, ben illustrata dal guru.

Molti preferiscono usare un CSS di base magari che includa anche un ritmo verticale, in grado di fornire già un solido punto di partenza.

Io personalmente utilizzo con soddisfazione la tecnica di Meyer e voi? quale approccio di sviluppo preferite?

*Carlo*