Usabilità

Idea balzana e inutile? No se lo scopo è dimostrare la potenza e la flessibilità delle nuove specifiche CSS3.

David deSandro è molto bravo, leggete le indicazioni nel suo post Opera Logo with CSS.

Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers…

Che ne pensate?

Se siete curiosi di provare le nuove regole CSS3 ma non volete perdere tempo cercando la soluzione ideale per il vostro browser preferito potete prendere spunto da questo post che mostra come scrivere un foglio di stile in grado di generare un box (quello dell'immagine qui a sinistra) personalizzabile al volo, semplicemente cambiando i valori delle proprietà sottolineate.

AutoMagically, come scrivono gli americani…

Semplicissimo ma molto efficace aggiungo io!

You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet...

Qui trovate la pagina di CSS3 Please: The Cross-Browser CSS3 Rule Generator. Giocateci un po' e magari rendete l'esempio un po' più complesso.

N.B. mi scuso per l'assenza di questi ultimi giorni. Il lavoro, il freddo, la mancanza di ispirazione, un'invasione di cavallette… tutti ottimi motivi per avervi trascurato. cercherò di mettermi alla pari fin da subito!

Vi propongo un semplice ma efficace esempio di uso di jQuery che vi permetterà di inserire nel vostro sito un menu espandibile multi-link dall'aspetto personalizzabile.

La messa in opera del menu è davvero immediata e non necessita di particolari conoscenze di programmazione.

La larghezza del menu così come il suo aspetto possono agevolmente essere modificate per assecondare le vostre esigenze.

The other day I was searching for a jQuery based MegaMenu over google but couldn’t find any good plugin for the same so sat down and wrote one for myself. Here is a simple jQuery plugin to create an unbloated MegaMenu in seconds…

La segnalazione l'ho letta su GeekTantra.com (nome davvero originale: se siete interessati questo è il link a una demo mentre questo è il link al codice.

Ne conoscete di migliori?

Quante sigle… quanta confusione, insomma un sito è un sito no?

Bhe sì, insomma quasi, no non è vero: ci sono siti e siti. Belli, brutti, accessibili, usabili oppure da buttare e rifare appena si riesce.

Ma, c'è anche un ma… c'è anche un modo facile e un modo difficile per realizzarli (OK il modo difficile è anche se no lo si sa fare ma questo è un altro discorso).

Il modo facile, in arrivo e presto - si spera - supportato da tutti i browser nel modo più simile possibile, è quello di usare HTML versione 5 e i CSS versione 3 per riuscirci.

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

Nel post di Tutorialzine.com - Coding a CSS3 & HTML5 One-Page Website Template - trovate i semplicissimi passi per realizzarne uno, nemmeno troppo male graficamente!

Robert Nyman sul suo blog ci propone un metodo alternativo al "float" per disporre blocchi di elementi affiancati orizzontalmente.

Come il primo metodo anche questo, che utilizza la direttiva inline-block, ha dei pregi e anche dei difetti.

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block…

Tra i pregi un maggiore semplicità (forse) e minori problemi rispetto alle dimensioni dei blocchi contenuti nell'elemento contenitore principale.

Ma tra i difetti quello, importante, di subire l'elemento "spazio" che rischia di rovinare l'allineamento mandando a capo uno dei blocchi. Tra i work-around per risolvere questo difetto c'è quello di allineare gli elementi <li> uno dietro l'altro oppure di commentare gli spazi bianche lasciando nel CSS la suddivisione per righe.

Ma come si può leggere anche nei commenti dell'articolo CSS display: inline-block: why it rocks, and why it sucks anche queste soluzioni possono essere influenzate dal modo in cui un server può trattare gli spazi o di come un browser, per ottimizzare la velocità di rendering, visualizza questi elementi.

Insomma, la soluzione perfetta non c'è ma è importante sapere che c'è un'alternativa all'uso dei float, se serve.