\
**Category:** IT\
**Created:** [July 19, 2006, 12:45pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967 "2006-07-19T12:45:48Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@esox\_ch](https://www.ruby-forum.com/u/esox_ch)\
**Post date:** [July 19, 2006, 12:45pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967/1 "2006-07-19T12:45:48Z")
La logica di sviluppo dell’html negli ultimi anni è cambiata, e anche di
parecchio. Ha perfettamente ragione chiaro scuro, la direzione è quella
dell’XHTML costruito in maniera semantica, privo di elementi di
presentazione (dalle tabelle di layout ai semplici br utilizzati per
creare spazio) e CSS
Anche io perdo un po di tempo per il css, e devo dire che gran parte del
tempo lo perdo perche ho dei gusti orribili e il senso del design di chi
ha realizzato la fiat Duna. Però è una frazione del tempo che si perdeva a
fare html old fashioned, e dover integrare costantemente contenuti e
codice di presentazione.
A mio giudizio, la possibilità di utilizzare gli helper del framework, e
soprattutto la possibilità di farsene dei propri, è una svolta!
Bellissimo anche estendere gli helper del framework per i propri
progetti… Ovvero
Il design di una webapp dovrebbe partire dalla definizione degli
elementi di base, che non sono molti: ci sono elementi come la
combinazione input field + label, i bottoni, le liste, le tabelle, e
volendo elementi complessi come le form organizzate a tab
Una volta individuato il codice xhtml che vi piace di piu, è raro, ma
veramente raro ( e in genere se accade si sta sbagliando qualcosa) dover
rompere gli schemi e usarlo in modo diverso…
Ad esempio sulle form un codice tipico per un singolo campo è
Testo label
Come vedete, rispetto al codice dello scaffold ho tolto anche il BR dopo
la label, perche se volessi che il campo vada sulla riga successiva, mi
basterebbe definire sul css la label come un elemnto di tipo block,
mandando a capo gli elementi successivi. E’ essenziale fare un codice
assolutamente privo di elementi di presentazione, anche un semplice br
ci complica la vita
Dopodiche basta definire un helper, e il gioco è fatto… Non ci dovremo
piu preoccupare di questo tipo di campo.
Lavorando con la logica degli helper non solo ci mettete 2 minuti a fare
interfacce anche complesse, ma garantite anche una certa coerenza nella
presentazione.
L’importante è che l’attenzione nello sviluppo non venga assorbita
dall’xhtml, non se lo merita: è semplice, ed è semantico, non deve avere
elementi di presentazione, quindi va scritto con naturalezza, ogni
elemento con il tag appropriato nel posto appropriato… Helper dopo
helper 🙂
Per quello che riguarda il css, non serve quello coi razzetti, anzi
più è pulito e semplice e piu l’attenzione di chi segue il progetto viene
proiettata sulla meccanica dell’applicazione piuttosto che sulla
grafica. Io quando parto da zero copio sempre cose come flickr o
gmail… Ma ormai ho il mio kit css basic 🙂
Se poi vogliamo discutere di css e di quanto siano mal supportati e
quanto tempo si perda a fare cose stupidissime, potremmo anche andare
avanti con l’OT piu lungo della sotria 🙂
---
**Author:**  [@esox\_ch](https://www.ruby-forum.com/u/esox_ch)\
**Post date:** [July 19, 2006, 2:11pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967/2 "2006-07-19T14:11:28Z")
grazie per la spiegazione, mi da + sicurezza nel partire.
sarei curioso di sapere cosa deve stare nel css kit di base… forse hai
una
lista di siti anche che usi per ispirazione? il lato web non l’ho
toccato
per anni e sono veramente newbie, quindi mi è molto utile avere dei punti
di
partenza.
---
**Author:**  [@esox\_ch](https://www.ruby-forum.com/u/esox_ch)\
**Post date:** [July 19, 2006, 5:47pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967/3 "2006-07-19T17:47:18Z")
Stefano G. wrote:
> Testo label
D’accordissimo sul resto del messaggio, unica nota (o magari lo davi per
scontato): se setti l’id dell’input == al for della label, cliccando
sulla label il focus va sull’input field. Credo che la cosa sia ancora
piu’ utile per disabili vari, e in effetti e’ l’unico impiego
dell’attributo “for” (altrimenti tanto vale non metterlo, e usare solo
uno stile nel css associato alla label
(oggi sono proprio puntiglioso!)
😉
–
Q: “Lei e’ un nichilista?” A: “Io non sono niente” (E.M.Cioran,
nell’unica intervista da lui concessa)
---
**Author:**  [@esox\_ch](https://www.ruby-forum.com/u/esox_ch)\
**Post date:** [July 19, 2006, 6:12pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967/4 "2006-07-19T18:12:13Z")
gli elemeti essenziali sono
1 un buon layout
2 una definizione generica di css degli elementi di contenuto
3 una definzione generica del css per gli strumenti di navigazione
principale (menu superiore, menu laterale, breadcrumbs)
4 il codice css per i tuoi “widget” preferiti, e come widget intendo la
combinazione di piu elementi xhtml come nell’esempio di label + campo di
testo
la scelta del layout è la piu difficile, perché condiziona piu
fortemente di altre l’xhtml di base che andrai a inserire (un layout di
base puo avere un div per l’header, uno per il menu, uno per il
contenuto e uno per il footer, ma nella realtà ci sono sempre degli
hacks da fare) ma anche qua rails ci da un enorme aiuto con la sua
logica vincente di elaborazione dei layout, template di pagina e
partials.
per quanto riguarda la definizione generica degli elementi, come
consiglio personale ti dico di evitare assolutamente di definire
elementi fuori dal loro contesto, ovvero se nel css tu metti
h3 {…}
vai a influire su tutti gli h3 della tua applicazione, mentre
#header h3{…} oppure #content h3{}
contestualizzano la tua definizione, questo te lo dico perche se a ogni
widget dello stesso tipo dai una classe, e ogni elemento strutturale ha
un id diverso, puoi facilmente associare un tuo widget a un pezzo di css
specifico, e la tua libreria di css diventa ordinata e riusabile
ah mi dimenticavo di darti un po di dritte
la mia bibbia è [www.positioniseverything.net](http://www.positioniseverything.net)
dove sono anche illustrati dettagliatamente tutti i bug di
interpretazione dei css di IE (non a caso il sito è stato scelto come
riferimento dagli sviluppatori di IE7, e con ottimi risultati direi)
li trovi piu o meno tutti gli strumenti che ti servono per generare un
layout robusto e semp’lice al contempo
[Example - In search of the One True Layout - One True Layout™ - Interactive Example](http://www.fu2k.org/alex/css/onetruelayout/example/interactive) è lo
strumento che generea i layout migliori che conosca, addirittura
superando dei limiti intrinseci dei css (ad esempio la possibilità di
fare 2 colonne separate, che però hanno la stessa lunghezza, cosa banale
con le tabelle e impossibile con i css)
un altro strumento potentisismo è
> **[Position Is Everything - Coding and Computing Tips & Tutorials. Learn...](https://www.positioniseverything.net/)**
>
> Coding and Computing Tips & Tutorials. Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.
in generale per il layout ti consiglio di farti un css a parte, in modo
che poi riesci a sostituirlo velocemente in caso si riveli inadeguato.
la scelta del layout è la piu importante da fare, devi stare attento che
tutti i browser lo vedano correttamente e che degradi “gracefully” sui
vecchi browser. siccome è praticamente impossibile probvarli tutti,
consiglio vivamente a te e a tutti di scaricarne uno stracollaudato.
consiglio anche di usare layouts a bassso contenuto di hacks, perche i
css hacks si basano su bug di interpretazione dei browser, il che vuol
dire che man mano che escono browser nuovi (ie7 è alle porte) si rischia
di vedere i siti sminchiarsi progressivamente.
per fortuna rails rende la sostiutuzione del layout un gioco semplice
🙂
cazzarola divago sempre cerco di essree breve
LAYOUTS e TECNICHE CSS
[Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style](http://www.cssplay.co.uk/index.html) (ha una galleria enorme di ogni tipo
di elemento)
[http://www.positioniseverything.net/](http://www.positioniseverything.net/)
[http://www.glish.com/css/](http://www.glish.com/css/)
[css/edge](http://meyerweb.com/eric/css/edge/)
REFERENCE XHTML E CSS
[http://www.htmldog.com](http://www.htmldog.com)
STRUMENTI PER I CSS
se sei in crisi cromatica e come me non sai abbinare i calzini con la
cravatta
[http://www.wellstyled.com/tools/](http://www.wellstyled.com/tools/)
COME REAGISCONO I VARI BROWSER ALLA PERSONALIZZAZIONE DEGLI ELEMENTI DEI
FORM?
> **[Styling form controls | 456 Berea Street](https://www.456bereastreet.com/archive/200409/styling_form_controls/)**
>
> Styling form controls A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a c…
> **[Styling even more form controls | 456 Berea Street](https://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/)**
>
> Styling even more form controls This is a follow-up to my previous post about Styling form controls. For some background info and comments…
STILI PER LE TABELLE
[http://veerle.duoh.com/index.php/blog/comments/a\_css\_styled\_table/](http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/)
e in generale tutto il thread su
> **[Good Table Examples - HTML Dog Blog - HTML Dog](https://www.htmldog.com/ptg/archives/000091.php)**
>
> How to make web pages - A good practice guide to HTML and CSS.
STILI E TENNICHE PER I FORM
[http://htmldog.com/guides/htmladvanced/forms/](http://htmldog.com/guides/htmladvanced/forms/)
[http://www.adobe.com/devnet/dreamweaver/articles/css\_forms.html](http://www.adobe.com/devnet/dreamweaver/articles/css_forms.html)
> **[Stu Nicholls | CSS PLAY | CSS styling of forms](http://www.cssplay.co.uk/menu/form.html)**
>
> CSS play - Styling a form using just css
ne approfitto per dire che io e un mio collega (david) andiamo a OSCON a
portland, torneremo con un sacco di novità da condividere con tutti voi!
bella
jeko
* * *
Da: removed\_email\_address@domain.invalid per conto di chiaro scuro
Inviato: mer 19/07/2006 14.10
A: ruby-it
Oggetto: Re: [ruby-it] Agile HTML
grazie per la spiegazione, mi da + sicurezza nel partire.
sarei curioso di sapere cosa deve stare nel css kit di base… forse hai
una
lista di siti anche che usi per ispirazione? il lato web non l’ho
toccato
per anni e sono veramente newbie, quindi mi è molto utile avere dei
punti di
partenza.
---
**Author:**  [@esox\_ch](https://www.ruby-forum.com/u/esox_ch)\
**Post date:** [July 19, 2006, 6:31pm UTC](https://www.ruby-forum.com/t/re-agile-html/98967/5 "2006-07-19T18:31:31Z")
bravo! qualcuno che sta attento 🙂
me l’ero scordato 😃
jeko
* * *
Da: removed\_email\_address@domain.invalid per conto di Luca S.G. de Marinis
Inviato: mer 19/07/2006 17.45
A: ruby-it
Oggetto: Re: [ruby-it] Agile HTML
Stefano G. wrote:
> Testo label
D’accordissimo sul resto del messaggio, unica nota (o magari lo davi per
scontato): se setti l’id dell’input == al for della label, cliccando
sulla label il focus va sull’input field. Credo che la cosa sia ancora
piu’ utile per disabili vari, e in effetti e’ l’unico impiego
dell’attributo “for” (altrimenti tanto vale non metterlo, e usare solo
uno stile nel css associato alla label
(oggi sono proprio puntiglioso!)
😉
–
Q: “Lei e’ un nichilista?” A: “Io non sono niente” (E.M.Cioran,
nell’unica intervista da lui concessa)