HTML5: Anatomia di un sito.

Nonostante il linguaggio HTML5 non sia ancora riconosciuto dal consorzio W3C i maggiori browser continuano nei loro aggiornamenti di supporto per tale linguaggio, questo permette ai web designer di continuare a progettare siti usando questo linguaggio.

HTML5 Gallery ne mostra una ampia galleria e in questo articolo ne ho preso da esempio uno per scomporlo e capirne meglio l’anatomia.

Il sito scelto si chiama Webinperu, è un sito/portfolio di un web designer di nome Christian Montenegro che gentilmente mi ha dato la possibilità di “sezionare” il suo sito, allora cominciamo:

1. Definizione del codice e della lingua.

La prima cosa che si deve decidere quando si apre una pagina HTML vuota è la definizione del linguaggio !DOCTYPE in HTML5 Questo passaggio è stato semplificato.

1
2
3

< !DOCTYPE html> //* Definisce il linguaggio che sarà presente all' interno della pagina web, in questo caso html.
<html lang="es"> //* Definisce la lingua principale del sito in questo caso spagnolo.
</html>

2. L’ header del sito.

La parte superiore del sito in questo come spesso accade contiene a sinistra il logo e a destra un menu con 4 voci.

la particolarità del logo è che non è una immagine, come potrebbe sembrare ma semplicemente un testo modificato con gli stili CSS.

28
29
30
31
32
33
34
35
36
37
38
39
40

<header id="top"> //* Dentro il tag header vengono racchiusi il logo a sinistra e il menu a destra.
    <div>
    <h1><a href="http://webinperu.com"><span>WEBINPERU</span></a></h1> //* Dentro al tag H1 compare il titolo del sito
      <nav> //* Dentro il tag nav vengono contenute le voci del menu 
        <ul> 
          <li><a href="/">Home</a></li> //* Ogni voce del menu è racchiusa nei tag <li></li>
          <li>Portafolio</li>
          <li>Contactar</li>
          <li><a href="/category/diseno-web/">Artículos</a></li>
        </ul>
      </nav>
    </div>
  </header>

3. La sezione presentazione.

In questa sezione L’ autore del sito si presenta spiegando brevemente chi è e quali sono le sue competenze.

43
44
45
46
47
48

 <section id="presentation"> //* Dentro il tag Section id viene rinchiusa la presentazione dell'autore.
    <h2>Elegante y Efectivo Diseño Web</h2>
    <p>
      Mi nombre es <strong>Christian Montenegro</strong> y me dedico a crear sitios web exitosos. Diseño Interfaces para Web, elaboro Frontend y doy Consultorias sobre temas relacionados ...
  </p>
</section>

4. Le sezione servizi

la sezione servizi è organizzata in tre colonne disposte orizzontalmente tramite l’ utilizzo del tag ul (unordered list) e l’ uso dei CSS e della proprietà float:left che dispone i tre blocchi di servizi affiancati orizzontalmente.

50
51
52
53
54
55
56
57

<section id="services">
    <h2>Servicios</h2>
    <ul>
      <li><img src="http://webinperu.com/wp-content/themes/grisado/img/services/web_design.png" title="Diseño Web"/><p>Diseño WebDiseño de Interfaces limpias y fácil de usar.</p></li>
      <li>...</li>
      <li>...</li>
    </ul>
  </section>

5. La sezione articoli.

In questa sezione venono mostrati gli ultimi tre articoli inseriti nella sezione blog del sito, la disposizione rimane uguale a quella dei servizi, quindi tre colonne di contenuti disposte orizzontalmente, la differenza sta nell’ utilizzo del tag article al posto del tag ul

61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<section id="last_articles"> //* Come sempre apiramo il con il tag section 
    <h2>Artículos Destacados</h2> 
    	      <article> //* In questo caso chi ha progettato il sito ha usato il tag article per rinchiudere il contenuto dell'articolo.
 
        <h2><a href="http://webinperu.com/2008/06/14/diseno-web-en-ubuntu-con-software-libre/" rel="bookmark" title="Diseño web en ubuntu con software libre">Diseño web en ubuntu con software libre</a></h2>
 
        <p class="author">Publicado por Christian Montenegro <span class="comments"><a href="http://webinperu.com/2008/06/14/diseno-web-en-ubuntu-con-software-libre/#comments" title="Comment on Diseño web en ubuntu con software libre">con 25 Comentarios &#187;</a></span></p>
 
        <p>Revisando las estadísticas noto que algunas personas están interesadas en este tema, voy a dar unos pequeños tips para empezar en el diseño web y frontend sobre ubuntu utilizado software libre. <a href="http://webinperu.com/2008/06/14/diseno-web-en-ubuntu-con-software-libre/#more-203" class="more-link">
<p class="more">Leer el resto del artículo &raquo;</p>
<p></p></a></p>
    </article>
	      <article>...</article>
	      <article>...</article>
</section>

6. Il Footer.

in questo caso nel footer è stato scelto di inserire una lista di bottoni che fanno da link per i vari profili social network del sito, oltre a un copyright e due link, vediamo come fare…

91
92
93
94
95
96
97
98
99
100

  <footer id="bottom"> //* il tag footer è stato associato una id, ma si potrebbe utilizzare semplicemente </footer><footer></footer>
    <ul id="social-network">
      <li class="t"><a href="http://twitter.com/webinperu"><span>Twitter</span></a></li>
      <li class="f"><a href="http://facebook.com/webinperu"><span>Facebook</span></a></li>
      <li class="ln"><a href="http://pe.linkedin.com/in/christianmontenegroo"><span>Linkedin</span></a></li>
      <li class="rss"><span>RSS</span></li>
    </ul>
    <p>
      ©2010 webinperu / <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwebinperu.com%2F">validar html</a> / Directorio del Perú
    </p>
Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

Ancora nessuna risposta per HTML5: Anatomia di un sito.

Lascia un commento

Trackbacks