Maquetar HTML5

hackjose · #1 (**permalink**) 16/10/2013, 18:32

Buenas noches amigos

Voy a hacer un tutorial de HTML5 y bueno quiero hacer la pagina lo mejor posible

El diseño sera como el siguiente
un indice del lado izquierdo y del lado derecho el contenido

el codigo es este

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>HTML5 para vencer</title>
    <meta charset="utf-8" />
    <meta name="author" content="Jose Vega" />
    <meta name="description" content="Curso de HTML5" />
    <style type="text/css">
    *
    {
        margin:0;
        padding:0;
    }
    body
    {
        min-width:960px;
    }
    #indice, #derecha
    {
        float: left;
    }
    #indice
    {
        background-color: blue;
        width: 20%;
    }
    #derecha
    {
        background-color: pink;
        width: 80%;
    }
    #titulo
    {
        margin-bottom:20px;
    }
    </style>
</head>
<body>
<section id="indice">
<img src="html51.png" width="128" height="128"/>
 
<h1>Indice del Elementos</h1>
 
<ol>
    <li>!Doctype</li>
    <li>&lt;a&gt;</li>
    <li>&lt;area&gt;</li>
    <li>&lt;aside&gt;</li>
</ol>
</section>
 
 
<div id="derecha">
<header id="titulo">
<h2>HTML5 PARA VENCER</h2>
<p>Escrito por: <a href="">Nombre completo</a></p>
</header>
 
 
<article id="contenido">
<h1>Elemento aside</h1>
 
<section>
    <h1>Descripcion</h1>
    <p>texto texto texto texto</p>
</section>
 
<section>
    <h1>Cuando/Como debo usarlo?</h1>
    <p>texto texto texto texto</p>
</section>
 
<section>
    <h1>Ejemplo(s)</h1>
    <p>texto texto texto texto</p>
</section>
 
<section>
    <h1>Lo que dice la W3C</h1>
    <p>texto texto texto texto</p>
</section>
</article>
</div>
 
 
</body>
</html>

Creen que este bien un section para el indice?

Que opinan del h2 que esta en el header#titulo?

Puse un h2 por que el h1 lo quiero reservar para lo que realmente importa

Como header no introduce una seccion entonces estamos en el primer nivel del outline y si pongo un h1 seria por asi decirlo el h1 del primer nivel y ese es el mas importante para SEO hasta donde se y no lo quiero desperdiciar para el nombre de la pagina.

Pienso que el article esta bien, que opinan?
En este caso article contendria el contenido importante, lo que nos interesa de la pagina, ese contenido que se puede reutilizar y redistribuir por ejemplo por rss

Espero me puedan ayudar
Saludos

Carlangueitor · #2 (**permalink**) 16/10/2013, 18:53

Si usas un section para la barra lateral, ¿por que no uno sustituyendo #derecha?

hackjose · #3 (**permalink**) 17/10/2013, 09:51

Cita:

Iniciado por Carlangueitor

Si usas un section para la barra lateral, ¿por que no uno sustituyendo #derecha?

La especificacion dice que el section es para una agrupacion tematica algo asi como que un contenedor para un solo tema y #derecha contiene digamos 2 temas

El nombre la pagina con un enlace
El elemento en cuestion

Por eso opte por un div porque no tiene significado asi que no afecta

Muchas gracias por contestar Carlangueitor

saludos

pzin · #4 (**permalink**) 17/10/2013, 11:50

Pero una agrupación de temas es un tema. section es realmente de los nuevos elementos el más prostituible.

hackjose · #5 (**permalink**) 17/10/2013, 14:33

Cita:

Iniciado por pzin

Pero una agrupación de temas es un tema. section es realmente de los nuevos elementos el más prostituible.

Si una agrupacion de temas es un tema, pero como que los temas deben estar muy relacionados para formar el tema.

Y en este caso pienso que no hay mucha relacion entre el nombre del documento con el contenido principal

Gracias por contestar, me gusta este tipo de charlas porque exponemos nuestros puntos de vista
saludos pzin

pzin · #6 (**permalink**) 17/10/2013, 14:46

Si tienes razón, no vi el header ahí.

Cita:

Iniciado por hackjose

Gracias por contestar, me gusta este tipo de charlas porque exponemos nuestros puntos de vista

A ver si Rafael saca el juguemos a diagramar 4.

hackjose · #7 (**permalink**) 17/10/2013, 17:29

Nuevamente gracias pzin
saludos

ryugen · #8 (**permalink**) 20/10/2013, 16:29

La jerarquía de títulos (etiquetas h1 y h2) no me queda del todo clara. Podrías explayarte mejor por qué esta elección?

Particularmente elijo utilizar un solo h1 en todo el documento y que identifique el título de todo el documento.

En segundo lugar, mi opinión personal, es que section id="indice" semánticamente está más cerca de un nav o un aside que de una section.

Por otra parte article id="contenido" semánticamicamente podría ser un elemento main y si no queremos aventurarnos a utilizar este elemento aún, minimamente deberíamos utilizar el atributo role="main" en el elemento article.

Para finalizar, haciendo la salvedad de que todo esto es tema debatible, ni el div id="derecha" ni header son elementos seccionantes (si me conceden esta palabra) por lo que el h2 "HTML5 PARA VENCER" vendría ser el título (ya que no es hijo de ningún elemento seccionante) para la sección principal que genera el elemento body por lo que sería el título principal del documento, porque es el de mayor jerarquía y debería marcarse con h1.

Concuerdo con que también disfruto de los post en donde se debate sobre semántica de HTML5

hackjose · #9 (**permalink**) 21/10/2013, 11:52

Cita:

Iniciado por ryugen

La jerarquía de títulos (etiquetas h1 y h2)

En segundo lugar, mi opinión personal, es que section id="indice" semánticamente está más cerca de un nav o un aside que de una section.

Por otra parte article id="contenido" semánticamicamente podría ser un elemento main y si no queremos aventurarnos a utilizar este elemento aún, minimamente deberíamos utilizar el atributo role="main" en el elemento article.

Para finalizar, haciendo la salvedad de que todo esto es tema debatible, ni el div id="derecha" ni header son elementos seccionantes (si me conceden esta palabra) por lo que el h2 "HTML5 PARA VENCER" vendría ser el título (ya que no es hijo de ningún elemento seccionante) para la sección principal que genera el elemento body por lo que sería el título principal del documento, porque es el de mayor jerarquía y debería marcarse con h1.

Concuerdo con que también disfruto de los post en donde se debate sobre semántica de HTML5

Si concuerdo contigo creo que vendria mejor un nav ya que son los links para navegar por el sitio

Sip seria un elemento main pero exactamente no quiero aventurarme a usarlo pondre el atributo role, no sabia de el gracias

En cuanto a lo ultimo tienes toda la razon HTML5 PARA VENCER seria el titulo y por eso lo puse en un h2 por que no se me hace muy importante el nombre mas que nada se me hace importante el nombre del elemento "elemento article HTML5"
Pondre el H1 del article en el header para que sea el "titulo" del documento

pero por diseño debe quedar
HTML5 PARA VENCER
escrito por
Elemento aside

asi que en codigo seria

Código HTML:

Ver original<header>
<h2>HTML5 PARA VENCER</h2>
<p>Escrito por:</p>
<h1>ELEMENTO ASIDE</h1>
</header>

El elemento header en cuanto al contenido estaria bien por que es la introduccion de la pagina
Pero no se si este bien que primero venga un h2 y despues un h1

En lo personal pienso que no esta bien y pienso que en el codigo primero debe estar el H1 y despues el H2 y ya con CSS hacer que el H1 este abajo y el H2 arriba

Que opinas?

Gracias ryugen

saludos a todos

ryugen · #10 (**permalink**) 22/10/2013, 16:20

No hay nada normativo que taxativamente lo prohiba.

El outline actual, usando el algoritmo de seccionamiento, es el siguiente:

Código HTML:

Ver original1. HTML5 PARA VENCER
  1.Indice del Elementos
  2.Elemento aside
            1.Descripcion
            2.Cuando/Como debo usarlo?
            3.Ejemplo(s)
            4.Lo que dice la W3C

Lo cual no está mal. El único error es como te comenté es que "HTML5 PARA VENCER" debería ser h1 y "elemento aside" h2.

Si "Elemento aside" el título principal del documento, entonces el indice debería maquetarse con precisamente el elemento aside porque vendría a ser contenido complementario o tangencial del contenido principal. Y también en este caso "HTML5 PARA VENCER" no debería ser hx porque rompería con la lógica del documento.

Se entiende?

Aproximadamente el outline en ese caso quedaría así, sin mucho sentido

Código HTML:

Ver original1. Elemento aside
  1.Indice del Elementos
  2. HTML5 PARA VENCER
  3. (si título)
            1.Descripcion
            2.Cuando/Como debo usarlo?
            3.Ejemplo(s)
            4.Lo que dice la W3C

Otra alternativa, sería plantear cual es el outline más logico de generar y luego crear el marcado a partir de eso

Referencia:
http://www.w3.org/html/wg/drafts/htm...nd-h6-elements
http://www.w3.org/html/wg/drafts/htm...s-and-sections
http://reference.sitepoint.com/html/h1
https://developer.mozilla.org/en-US/...ading_Elements

hackjose · #11 (**permalink**) 22/10/2013, 18:15

Ok muchas gracias ryugen Creo que pondre en el h1 HTML5 PARA VENCER y en el H2 "elemento aside" "elemento img" "elemento xyz"

Saludos a todos y gracias