6
Nov 13 2010

CSS3 PIE

Ho appena scoperto una cosa che tutti i webmaster/webdesigner ameranno.

Si chiama CSS3 PIE.

È uno script htc, cioè del formato proprietario di Internet Explorer che permette di introdurre nelle versioni 6-7-8 i CSS3.

Tuttavia sarà un lavoraccio usarlo perché dovete introdurlo in ogni elemento con la proprietà non-standard behavior in un foglio di stile sotto commento condizionale perché altrimenti non otterrete un risultato positivo nel validatore CSS.

Poi la cosa che lo rende ancora meglio è che è software libero (Apache License 2.0 o GPL 2.0), così lo potrete usare nei vostri progetti senza limitazioni.

0
Ott 31 2010

La mia versione del layout liquido a più colonne

Io amo il layout con dimensione percentuale, detto anche layout liquido.

La soluzione più semplice e che magari è adottata da coloro che fanno da poco pagine web è usare un layout a tabella ma ciò è sbagliato semanticamente e dal punto di vista dell’accessibilità: la tabella indica dati, non layout!

Fino ad oggi ho usato Equal Height Columns with Cross-Browser CSS di Matthew James Taylor ma purtroppo non va bene in un caso che mi è proprio necessario: usare le PNG trasparenti rispetto a un container di livello superiore.

Infatti questo web designer sposta verso sinistra i div se vedete la descrizione, mentre io voglio spostare verso destra.

In realtà il mio obiettivo sarebbe riuscire a fare n colonne non influenzate tra loro ma mi sono accorto che con questo trucchetto che comunque mi va bene non ce la faccio, magari in futuro arriverà anche per questo la soluzione.

Ma veniamo alla soluzione: mantenendo lo stesso codice HTML (o meglio, rimuovendo col3 e container3 visto che lo faccio a due colonne) ho adottato i margini negativi.

Personalmente li preferisco al posizionamento relativo e sono comunque compatibili con i browser (ho trovato un articolo sui margini relativi… [Leggi il resto...]

2
Ott 30 2010

Web Font

Possono essere una soluzione ai problemi di font?

Non so come si chiamano veramente ma io li chiamo così.

In pratica dei siti mettono a disposizione dei font richiamati grazie al CSS.

Non è che sia una cosa così rivoluzionaria in quanto da tempo è possibile però sono interessanti, soprattutto perché con la banda larga non è un problema scaricarsi un font.

I pro secondo me sono che finalmente si può ottenere l’effetto desiderato con ogni piattaforma.

Tuttavia i contro sono più di uno: intanto serve una licenza per l’uso (intendo tipo chiave servizio Google Maps) e poi certi siti magari non lasciano usare il font in ogni tipo di sito, cosa che sarebbe bella.

Purtroppo questo è il lato debole anche dei plugin e dei temi in generale: possono essere rilasciati con licenza diversa per esempio dagli altri progetti (vedi jQuery e Wordpress1) e lo sviluppatore non può contare su del software che sarebbe utile.

Penso che però sia così in generale con la grafica: chi è bravo spesso non rilascia oppure rilascia con troppe restrizioni.

Footnotes

  1. Grazie a Fabrix per avermi corretto. Devo essermi sbagliato con un altro progetto ;-) ^top
0
Ott 26 2010

Input

In questi giorni ho pensato a dei post sul web design e grafica da fare.

Apro con questo post sugli input che riguarda i tag HTML input, textarea e select e correlati, “visivamente” caselle di testo, bottoni etc.

Non so che sistema operativo usiate o browser ma ognuno ha le sue dichiarazioni grafiche di default.

Purtroppo mi è capitato di vedere alcuni siti o CMS o temi grafici che hanno personalizzato l’input senza tenere conto delle loro dichiarazioni di default.

Su Windows (almeno fino alla versione XP, Vista penso di averlo usato sì e no un’ora in totale e Seven mai usato) questo non è un problema e neanche su Mac da quanto ne so (neanche questo l’ho usato molto, al massimo iOS di iPod Touch).

Invece lo stesso non può essere detto dei Browser dei S.O. che usano un server X11, tra i quali si può citare GNU Linux.

Il problema è che ci sono moltissime combinazioni per esempio Gecko/GTK (es Firefox) o Webkit/GTK o Webkit/QT e non esiste un tema di default su cui contare o su un tema di default a maggioranza altrimenti (cosa comunque sbagliata).

Per esempio io ho provato un tema GTK chiamato Nodka Dark che personalizza anche gli input, rendendoli marroni/neri con il colore… [Leggi il resto...]

7
Set 07 2010

Menu stile applicazioni con jQuery

È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro.

Ai div.menucontent è stato applicato il posizionamento assoluto per non fare troppo spazio tra i menu, una larghezza fissa e… [Leggi il resto...]