FREEDANCE: Il blog di Alessandro D’agnano

Finalmente,
un ottimo (anche se semplice) tutorial che parte dalla creazione di un layout con photoshop, per finire alla sua realizzazione in Xhtml/Css con validazione compresa.

Non aspettatevi cose complesse, però per capire bene i processi, per aggirare alcuni ostacoli, questo tutorial si pone come un utile appiglio soprattutto per i meno pratici.

Secondo me di questi tutorials se ne dovrebbe fare un manuale.
Che ne pensate? Lo facciamo tutti insieme?

Molte volte l’uso delle png ci rimane un pò indigesto per via del non supporto da parte di IE6.
Ci sono tanti work-around per usare cmq le png, ma ho notato che con altri script js vanno un pò in conflitto.

Se siamo fortunati e non dobbiamo ottimizzare per IE6 (c’è sempre la soluzione di servire un Css alternativo), possiamo divertirci creando sfondi affascinanti per i nostri siti.
Su Vitamin c’è un bel tutorial su come realizzare tutto ciò. L’effetto è quello di avere uno sfondo che sembra in “3D” e stringendo la finestra del browser lo si nota.
E’ tutto basato su png, posizionamento e spostamento delle immagini.

La realizzazione è abbastanza semplice come dimostra questo esempio.

Enjoy!

Dopo la mia segnalazione,
sulla possibilità di usare le tabelle per creare dei form, sono stato giustamente “bacchettato” da Lauryn.
La segnalazione è utilissima. Si tratta di una gallery (compresa di template Css e markup) tutta dedicata appunto ai form.

Enjoy!

Ci sono in giro parecchi text generator. In pratica sono pagina che ci danno la possibilità di copiare ed incollare del testo finto nei nostri layout da sottoporre al cliente.
Tante volte il cliente non dispone subito dei testi (soprattutto nei siti che partono da zero), per cui nelle sezioni di presentazione o news/eventi ci invetiamo del testo, per vedere l’ingombro e il rendereing del font scelto.

Questa segnalazione riguarda un Text Generator, chiamato Dummy. La pagina è molto completa e permette di avere anche paragrafi di testo in inglese, per ovviare al classico Lorem ipsum.
Nelle opzioni avanzate abbiamo altre comode scelte per vedere “live” le scelte che vogliamo fare. I più comuni font di sistema, il size, il line-height e altre formattazioni tipiche dei nostri Css.

Chicca finale, il code Css da copiare e incollare nel nostro file “style.css”…
Enjoy!

Si avete capito bene…
Oramai con l’uso dei div la gente e gli sviluppatori comuni pensano che le tabelle siano un orco da evitare.
Secondo me in casi come form lunghi, e dati appunto tabellari, dobbiamo usarle per forza. La semantica lo esige.
Però questo non vuol dire creare tabelle spartane. Lo dimostra questo sito:
http://icant.co.uk/csstablegallery/index.php
Ad ogni click su Design Name la pagina si aggiorna con il nuovo Css applicato al markup. Avete la possibilità di ispirarvi o scaricarvi il css…

E allora, vai di tabella!!!

Per chi come me,
sta ultimamente progettanto layout esclusivamente in Em, suggerisco questa tabella .