Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13

Discussione: Da XHTML a HTML5

  1. #1

    Da XHTML a HTML5

    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..

    codice:
    <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




    Grazie

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    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?
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Proviamo nell'attesa di altri consigli

    codice:
    <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?

  4. #4
    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...
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  5. #5
    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..


  6. #6
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    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
    codice:
    <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.
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  7. #7
    Grazie ancora dei consigli.

    Evidentemente sono un pò duro di comprendonio...

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

    codice:
    <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???

    eliminereste ulteriormente i tag <h2> e

    dentro ai <dt> <dd> ??

  8. #8
    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..)
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  9. #9
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    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)
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  10. #10
    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?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.