Comunidad de diseño web y desarrollo en internet online

mi primera estructura html

Citar            
MensajeEscrito el 16 Abr 2012 10:14 pm
Hola...

Si tenéis un minutito me gustaría conocer vuestra opinión sobre mi primera estructura para diseñar una web.

La he hecho en HTML5, y la he pasado por validator w3 y me ha dado OK. Pero tengo alguna duda.
1. ¿Es correcto crear un div contenedor para que aparezca todo centrado?
2. He leído que se puede meter un artículo dentro de una sección, pero ¿es correcto meter una sección dentro de otra?
3. Para convertir la web a HTML4, ¿valdría con cambiar el DOCTYPE y las etiquetas nuevas (header, section, aside…) por div? ¿O habría que hacer algo más?

Muchas gracias por vuestra ayuda. :oops:

Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
<title>Somos lo que comemos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="3";>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />

<style type="text/css">
</style>

</head>

<body>
<div id="contenedor">
   <div id="banner">banner publicitario</div>

   <header id="cabecera">Cabecera de la web</header>
   <nav>
      <ul class="ulline"><li class="listline">menu a</li><li class="listline">menu b</li><li class="listline">menu c</li><li class="listline">menu d</li></ul>
   </nav>
   <section id="sectiona">
      <h1>titular</h1>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
      <section>
         <article>foto</article>
         <footer>pie de foto</footer>
      </section>
   </section>

   <aside>
      <div id="banner">banner publicitario</div>
      <ul><li>aside</li><li>+ vistos</li><li>temas</li><li>facebook</li><li>twenti</li></ul>
   </aside>

   <address>
      dirección
   </address>
   
   <footer id="footerfin">
      footer fecha, enlaces relacionados, nube de tags
   </footer>
</div>

</body>
</html>



Código HTML :

body{
    font-family:helvetica, arial, sans-serif
}
#contenedor{
    width:900px;
    margin:0 auto 0 auto;
    background-color:#FFE6AF;
}
#banner{
    height:70px;
    padding:5px;
    background-color:#E0E0E0;
}
#cabecera{
    width:890px;
    height:70px;
    margin:0;
    padding:5px;
    background-color:#C1C1C1;
}
nav{
    width:890px;
    margin:0;
    padding:5px;
    background-color:#E0E0E0;
}
.ulline{
    margin:0px;
    padding:0px;
}
.listline{
    margin:0;
    padding-left:5px;
    padding-right:20px;
    display:inline;
}
#sectiona{
    width:701px;
    height:630px;
    margin:0;
    padding:5px;
    background-color:#C1C1C1;
    float:left;
}
section{
    width:228px;
    height:276px;
    margin:5px 5px 0 0;
    background-color:#A3A3A3;
    float:left;
}
article{
    width:218px;
    height:226px;
    margin:0px;
    padding:5px;
    background-color:#E0E0E0;
}
footer{
    padding:5px;    
}
aside{
    width:170px;
    height:630px;
    margin:0;
    padding:5px;
    background-color:#C1C1C1;
    float:right;
}
address{
    width:890px;
    height:70px;
    margin:0;
    padding:5px;
    background-color:#E0E0E0;
    clear:both;
}
#footerfin{
    width:890px;
    height:70px;
    margin:0;
    background-color:#C1C1C1;
    clear:both;
}

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 17 Abr 2012 12:32 pm

walden escribió:

1. ¿Es correcto crear un div contenedor para que aparezca todo centrado?

No veo por qué no ;)

walden escribió:

2. He leído que se puede meter un artículo dentro de una sección, pero ¿es correcto meter una sección dentro de otra?

Semánticamente eso no tiene mucho sentido...

walden escribió:

3. Para convertir la web a HTML4, ¿valdría con cambiar el DOCTYPE y las etiquetas nuevas (header, section, aside…) por div? ¿O habría que hacer algo más?

Sí pero cualquier navegador moderno mostrará la página de todos modos.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Abr 2012 03:43 pm

escribió:

1. ¿Es correcto crear un div contenedor para que aparezca todo centrado?


Claro que sí, de hecho se recomienda ampliamente para tener control del posicionado de toda la página (cuando se requiera). Consultando el código fuente de HTML5 Boilerplate, ellos lo manejan del siguiente modo:

Código HTML :

<div role="main">

</div>


Aunque yo prefiero darle un atributo id con el nombre que yo quiera para después darle estilo.

Código HTML :

<div id="main_container" role="main">

...aqui las demás etiquetas

</div>


Es gusto de cada uno, pero así yo he tenido bueno resultados.

escribió:

2. He leído que se puede meter un artículo dentro de una sección, pero ¿es correcto meter una sección dentro de otra?


Así es, es muy correcto. Es a lo que aquí llamamos "INSECTION" *inserte éste sonido*

Código HTML :

<section>
   <section></section>
   <section></section>
</section>


escribió:

3. Para convertir la web a HTML4, ¿valdría con cambiar el DOCTYPE y las etiquetas nuevas (header, section, aside…) por div? ¿O habría que hacer algo más?


Considero que sólo basta con el doctype y emplear etiquetas div para la semántica del contenido. Aunque te recomiendo que uses ya mismo de aquí en adelante las etiquetas propuestas por la especificación HTML5 y emplear Modernizr.

Sobre la estructura:

Código HTML :

<meta http-equiv="content-type" content="text/html; charset=utf-8" />


Considero que sólo basta con que especifiques el charset. Y me parece que ya no tienes que agregar el slash '/' a final de cada etiqueta void, como se hacía con XHTML. Así es que es suficiente con eso.

Código HTML :

<meta charset="utf-8">


Sobre ésto:

Código HTML :

<meta http-equiv="refresh" content="3";>


No me queda claro para que quieres refrescar el contenido. Quiero entender que ésto lo pusiste cuando estabas maquetando y no tener que refrescar el navegador cada vez que hicieras un cambio. Sí ese fue el caso, no olvides remover esa línea.

En general la semántica está ok.

Ahora con los estilos. Te recomiendo que tu contenedor total sea de 940px, ya que como se ha visto en páginas que usan un sistema de réticulas (como 960.gs) emplean esa medida para una óptima visualización para la resolución que predomina por ahora (1024x768 px).

Y otra observación, aunque es sólo a mi parecer. A no ser que la hoja de estilos sea esclusivamente para esa página en específico, no recomiendo que indiques medidas a todos los elementos de manera general. Me refiero a que no es bueno que desde ya determines que todos los article, section, aside tengan las medidas que indicas. Más bien que seas puntual y específico al momento de aplicar los estilos y uses atributos id para cada cosa.

Código HTML :

<section id="post">
<section id="comentario">
<aside id="social">
<aside id="publicidad">


Espero que mis observaciones te ayuden de algo, y que claro, es sólo mi punto de vista. Ojalá algunos otros usuarios del foro enriquescan esto para que tengas mejores referenicas.

Saludos cordiales.

Por gabovanlugo

651 de clabLevel



Genero:Masculino  

Code Designer

chrome
Citar            
MensajeEscrito el 17 Abr 2012 04:35 pm
No creo que sea lo más correcto estar poniéndole IDs a todos los divs, es mejor utilizar clases para no tener que declarar estilos a cada div por separado, sino que los estilos de una clase los aplicas a múltiples divs, resultando un codigo css mucho mas compacto y sencillo de editar.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 17 Abr 2012 04:58 pm
desde mi ignorancia en el HTML5 me parece que <footer> </footer> se refiere al la página entera, por decirlo de alguna manera no a los "pies de foto".

¿me equivoco?

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 17 Abr 2012 05:00 pm

HtrMancera escribió:

No creo que sea lo más correcto estar poniéndole IDs a todos los divs, es mejor utilizar clases para no tener que declarar estilos a cada div por separado, sino que los estilos de una clase los aplicas a múltiples divs, resultando un codigo css mucho mas compacto y sencillo de editar.


Ah cierto, muy importante también.

En síntesis nos referimos a la cuestión de que uses clases en tus estilos para aquellos elementos que comparten las mismas características. Ésto para evitar redundancias resultando en como te mencionan: un css más compacto y limpio.

Por gabovanlugo

651 de clabLevel



Genero:Masculino  

Code Designer

chrome
Citar            
MensajeEscrito el 17 Abr 2012 05:05 pm

Silvestre_ escribió:

desde mi ignorancia en el HTML5 me parece que <footer> </footer> se refiere al la página entera, por decirlo de alguna manera no a los "pies de foto".

¿me equivoco?


No, de hecho si se refiere específicamente a los "pies" pero de cualquier cosa. No específicamente toda la página completa. Por decir, sí tenemos una sección de comentarios, se puede emplear una etiqueta footer para indicar semánticamente el autor del post, la fecha, hora o alguna otra referencia.

Código HTML :

<section id="comentarios">
    <article class="post">Mi post</article>
    <footer>Fecha de pulicación</footer>
</section>

Por gabovanlugo

651 de clabLevel



Genero:Masculino  

Code Designer

chrome
Citar            
MensajeEscrito el 17 Abr 2012 05:39 pm
ok gracias!!

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 17 Abr 2012 06:07 pm
Muchas gracias a todos, de veras...

DriverOp escribió:

walden escribió:

1. ¿Es correcto crear un div contenedor para que aparezca todo centrado?
No veo por qué no ;)
Mi duda era por si había alguna etiqueta nueva concreta, como hay para section o article.

DriverOp escribió:

walden escribió:

2. He leído que se puede meter un artículo dentro de una sección, pero ¿es correcto meter una sección dentro de otra?

Semánticamente eso no tiene mucho sentido...
Aquí he utilizado una section como título y otra como subtítulo...

DriverOp escribió:

walden escribió:

3. Para convertir la web a HTML4, ¿valdría con cambiar el DOCTYPE y las etiquetas nuevas (header, section, aside…) por div? ¿O habría que hacer algo más?

Sí pero cualquier navegador moderno mostrará la página de todos modos.
Esto es lo que más me está costando, el tema de la compatibilidad con navegadores y los hacks y filtros.

glsmaster escribió:

Código HTML :

<div id="main_container" role="main">
...aqui las demás etiquetas
</div>
Es la primera vez que lo veo, empezaré a usarlo.

glsmaster escribió:

Considero que sólo basta con que especifiques el charset. Y me parece que ya no tienes que agregar el slash '/' a final de cada etiqueta void, como se hacía con XHTML. Así es que es suficiente con eso.
Me lo apunto.

Lo de <meta http-equiv="refresh" content="3";> lo hago para eso, se me olvidó quitarlo. Y glsmaster, muchas gracias por los consejos sobre css, esta web la he hecho sobre todo para practicar la estructura html, sin fijarme demasiado en css. :oops:

Los footer los he puesto porque había leído el uso que dice glsmaster, que no tiene porqué ser solo de la página.

Por walden

Claber

120 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.