PDA

Visualizza la versione completa : Da XHTML a HTML5


Airude
20-05-2010, 12:52
Mi sto affacciando all' HTML 5 e vorrei cimentarmi nel tradurre il mio vecchio sito fatto in XHTML in codice HTML 5 per predere un pò dimestichezza.

il mio codice prevedeva per ragioni grafiche molti div annidati come sotto..



<body>
<div id="container">
<div id="inner">
<div id="header">
<div class="hd">
<div class="titolo"><h1>Mio Nome</h1><h2>Payoff</h2></div>
<div class="sezione">
<div class="contact-info"><h3>Download PDF (#)</h3><h3>mionome@miosito.com</h3><h3>(XXX) - XXX-XXX</h3></div>
</div>
</div>
</div>
<div id="bd">
<div id="web">
<div class="exp">
<div class="std">
<div class="sezione first"><h2>Profilo</h2></div>
<div class="sezione"><p class="enlarge">Descrizione del mio profilo di 3 o 4 righe.</p></div>
</div>
<div class="std">
<div class="sezione first"><h2>Skills</h2></div>
<div class="sezione">
<div class="internet"><h2>Prima Skill</h2>

descrizione prima skill</p></div>
<div class="internet"><h2>Seconda Skill</h2>

descrizione seconda skill.</p></div>
<div class="internet"><h2>Terza Skill</h2>

descrizione terza skill.</p></div>
</div>
</div>
</div>
</div>
<div id="footer">


mio footer &mdash; mionome@miosito.com</p>
</div>
</div>
</div>
</div>
</body>


qualcuno può aiutarmi a rendere la stessa struttura in HTML 5

:messner:
:messner:

Grazie

fcaldera
20-05-2010, 13:18
un suggerimento: prima di usare i nuovi tags html5 ti suggerisco di provare a ridurre i div che già hai.

Per esempio, i div inner, hd e web a cosa servono? si potrebbero già eliminare?

Airude
20-05-2010, 16:37
Proviamo nell'attesa di altri consigli



<body>
<div id="container">
<header>
<div class="titolo"><h1>Mio Nome</h1><h2>Payoff</h2></div>
<div class="sezione">
<div class="contact-info"><h3>Download PDF (#)</h3><h3>mionome@miosito.com</h3><h3>(XXX) - XXX-XXX</h3></div>
</div>
</header>
<div id="bd">
<div class="exp">
<div class="std">
<div class="sezione first"><h2>Profilo</h2></div>
<div class="sezione"><p class="enlarge">Descrizione del mio profilo di 3 o 4 righe.</p></div>
</div>
<div class="std">
<div class="sezione first"><h2>Skills</h2></div>
<div class="sezione">
<div class="internet"><h2>Prima Skill</h2>

descrizione prima skill</p></div>
<div class="internet"><h2>Seconda Skill</h2>

descrizione seconda skill.</p></div>
<div class="internet"><h2>Terza Skill</h2>

descrizione terza skill.</p></div>
</div>
</div>
</div>
</div>
<footer>


mio footer — mionome@miosito.com</p>
</footer>

</div>
</body>



cosa ne pensate?
tutta la parte centrale come la dividereste?

ricman
21-05-2010, 09:57
:) non hai fatto niente... :)
hai solo buttato lì un header e un footer...
E io buoo lì una risposta... visto che non lo uso perchè ancora non mi pare essere uno standard, smentitemi magari... così poi inizio ad usarlo :)
L'html5 vuole il sito diviso in "sezioni" in base al contenuto, giusto? Quindi dovresti essere tu a sapere che contenuti hai e scegliere il tag più appropriato...

Airude
21-05-2010, 11:09
Buona osservazione, però, se avessi pensato di poter essere in grado di farlo da solo senza chiedere un parere, non avrei postato...
Non ho mancora ben chiara quale sia la gerarchia esatta dei tag HTML5.
Se fossi stato in grado di arrangiarmi probabilmente lo avrei fatto..

:bhò: :bhò: :bhò:

fcaldera
21-05-2010, 11:27
mi ripeto: è necessario che togli il surplus tralasciando per ora il discorso html5
altrimenti è come se volessi rifare la facciata ad una casa che invece ha problemi di fondamenta

- hai molte classi che potrebbero essere superflue (i cui elementi sono desumibili dall'annidamento di altri elementi) e quindi che dovresti poter eliminare

- questo pezzo


<div class="sezione">
<div class="internet"><h2>Prima Skill</h2>

descrizione prima skill</p></div>
...
</div>


potrebbe diventare tranquillamente una description list <dl>...</dl> (a patto di non usare elementi h<n>)

- il div exp non si capisce a cosa serve (forse per scopi grafici) bisognerebbe vedere la pagina
- i div attorno ai titoli potrebbero non servire (forse anch'essi per motivi di stile?)

intanto prova a rifare il codice con i suggerimenti qua sopra e solo dopo semmai si può fare una valutazione sul linguaggio da usare.

Non è che HTML5 rende necessariamente il codice più pulito (al massimo più semantico/descrittivo): tutto dipende da come lo usi, ma questo vale anche per XHTML.

Airude
21-05-2010, 11:49
Grazie ancora dei consigli.

Evidentemente sono un pò duro di comprendonio...

mi son documentato un pò di più ed ho provato così..



<body>
<section>
<header>
<h1>Mio Nome</h1><h2>Payoff</h2>
<section>
<h3>Download PDF (#)</h3>
<h3>mionome@miosito.com</h3>
<h3>(XXX) - XXX-XXX</h3>
</section>
</header>
<section>
<article>
<header>
<h2>Profilo</h2>
<p class="enlarge">Descrizione del mio profilo di 3 o 4 righe.</p>
</header>
<section>
<h2>Skills</h2>
<dl>
<dt><h2>Prima Skill</h2></dt>
<dd>

descrizione prima skill</p></dd>
<dt><h2>Seconda Skill</h2></dt>
<dd>

descrizione seconda skill.</p></dd>
<dt><h2>Terza Skill</h2></dt>
<dd>

descrizione terza skill.</p></dd>
</dl>
</section>
</article>
</section>
<footer>


mio footer — mionome@miosito.com</p>
</footer>
</section>
</body>


cosa ne pensate???
:messner: :messner: :messner:
eliminereste ulteriormente i tag <h2> e

dentro ai <dt> <dd> ??

ricman
21-05-2010, 12:08
Originariamente inviato da Airude
Non ho mancora ben chiara quale sia la gerarchia esatta dei tag HTML5.
Se fossi stato in grado di arrangiarmi probabilmente lo avrei fatto..
Si... avevo precisato che non lo uso... quindi che non lo conosco bene.
Il consiglio era scrivere in html4 Strict e attendere... Se non è ancora standard dopo come fanno i browser a leggerlo bene? (potresti fare 2 versioni..)

fcaldera
21-05-2010, 12:12
Originariamente inviato da ricman
Se non è ancora standard dopo come fanno i browser a leggerlo bene? (potresti fare 2 versioni..)

teoricamente i tag non sono un problema

se tu vuoi creare un tuo tag (es. <ricman></ricman>) puoi farlo tecnicamente e dargli anche uno stile (certo, alla validazione non passi con i vari doctype)

Solo explorer non li riconosce (fino alla versione 8 inclusa), ma per questo motivo basta caricare uno script (si chiama html5shiv) che ne rende possibile l'uso anche lì.

edit: airude, come detto prima, se usi un <dl></dl> non puoi mettervi degli headings annidati (o non passi una eventuale validazione)

Airude
21-05-2010, 12:17
Originariamente inviato da ricman
Il consiglio era scrivere in html4 Strict e attendere... Se non è ancora standard dopo come fanno i browser a leggerlo bene? (potresti fare 2 versioni..)

il codice è attualmente XHTML 1.0 Strict, volevo tradurlo come esperienza personale, magari aspettando a pubblicarlo ma vedere se ero in grado di farlo per questo ed altri siti, in modo da poter mettere questa mia conoscenza a curriculum..
La lotta ai browser obsoleti è ormai cominciata, il web si evolve e io vorrei rimanere al passo ed essere già in grado di produrre codice decente quando sarà uno standard.

Del codice che ho scritto sopra cosa ne pensate? qualche altro accorgimento?

Loading