Optativa III

Asignacin V

Maestro: Lic. Alonso Gmez Avila.

Francisco Javier Prez Senz

ID 00000091370

Guaymas, Sonora a 26 de Agosto del 2014

HTML5 y el algoritmo de esquema del documento

Una parte importante de HTML5 que no se entiende aun es la de seccionar contenido:
<section>, <article>, <aside> y <nav>. Para entender el contenido de seccionamiento,
necesitamos comprender el algoritmo de esquema del documento.
Qu es el algoritmo de esquema del documento?
El algoritmo es un mecanismo para producir resmenes de pginas web basadas en cmo
estn marcadas.
Imagina un sitio web para un criador para caballos, y l quiere anunciar caballos
que l est vendiendo.
1. Horses for sale
1. Mares
1. Pink Diva
2. Ring a Rosies
3. Chelseas Fancy
2. Stallions
1. Korahs Fury
2. Sea Pioneer
3. Brown Biscuit
Figura 1.
Para hacer las cosas an ms simples, solo dos cosas en su marcado afectan el esquema
de una web:

Contenido de encabezamiento: (h1 a h6 y hgroup).

Contenido de seccionamiento: (section, article, aside, y nav).

Creando esquemas con contenido de encabezamiento

Para crear una estructura para la pgina de caballos se podra hacer lo siguiente:
<div>
<h1>Horses for sale</h1>
<h2>Mares</h2>
<h3>Pink Diva</h3>
<p>Pink Diva has given birth to three Grand National winners.</p>

<h3>Ring a Rosies</h3>
<p>Ring a Rosies has won the Derby three times.</p>
<h3>Chelseas Fancy</h3>
<p>Chelseas Fancy has given birth to three Gold Cup winners.</p>
<h2>Stallions</h2>
<h3>Korahs Fury</h3>
<p>Korahs Fury has fathered three champion race horses.</p>
<h3>Sea Pioneer</h3>
<p>Sea Pioneer has won The Oaks three times.</p>
<h3>Brown Biscuit</h3>
<p>Brown Biscuit has fathered nothing of any note.</p>
<p>All our horses come with full paperwork and a family tree.</p>
</div>
Figura 2: Nuestros Caballos en Venta
encabezamientos.

de la pgina, marcado utilizando

Una seccin es finalizada por un encabezamiento del mismo nivel o superior. En nuestro
ejemplo, la seccin de Mares es finalizada por el comienzo de la seccin Stallions, y
cada seccin que contiene los detalles de un caballo individual es finalizada por el
comienzo de la siguiente.
La Figura 3: Muestra un ejemplo de seccin implcita que termina con un ttulo del mimo
nivel y la Figura 4: Muestra una seccin implcita que termina con un ttulo de nivel ms
alto.
<h3>Sea Pioneer</h3><!Inicio de la seccin implcita -->
<p>Sea Pioneer has won The Oaks three times.</p>
<h3>Brown Biscuit</h3><!Este encabezado inicia una nueva seccin implcita, por lo
que la antigua seccin Sea Pioneer anterior est cerrada-->
Figura 3.
<h3>Chelseas Fancy</h3><!Inicio de la seccin implcita -->
<p>Chelseas Fancy has given birth to 3 Gold Cup winners.</p>
<h2>Stallions</h2><!Este encabezado inica una nueva seccin usando un nivel superior
de encabezado, por lo que Chealses Fancy ahora esta cerrad-->
Figura 4.

Creando esquemas con seccionamiento de contenido

Ahora vamos a marcar nuestra pgina de caballos utilizando nuevos elementos
estructurales:
<div>
<h6>Horses for sale</h6>
<section>
<h1>Mares</h1>
<article>
<h1>Pink Diva</h1>
<p>Pink Diva has given birth to three Grand National winners.</p>
</article>
<article>
<h5>Ring a Rosies</h5>
<p>Ring a Rosies has won the Derby three times.</p>
</article>
<article>
<h2>Chelseas Fancy</h2>
<p>Chelseas Fancy has given birth to three Gold Cup winners.</p>
</article>
</section>
<section>
<h6>Stallions</h6>
<article>
<h3>Korahs Fury</h3>
<p>Korahs Fury has fathered three champion race horses.</p>
</article>
<article>
<h3>Sea Pioneer</h3>
<p>Sea Pioneer has won The Oaks three times.</p>
</article>

<article>
<h1>Brown Biscuit</h1>
<p>Brown Biscuit has fathered nothing of any note.</p>
</article>
</section>
<p>All our horses come with full paperwork and a family tree.</p>
</div>
Figura 5:
La etiqueta <section>, <article>, <aside>, y <nav> son los que crean el esquema y estas se
llaman secciones explcitas.
HTML5 permite mltiples etiquetas <h1>, es un reconocimiento de donde es usado el
contenido de seccionamiento, que crea el esquema, y que cada seccin explcita tiene su
estructura de encabezado.
El uso de mltiples elementos H1 es menos seguro que una estructura de ttulo que refleja
el nivel de cada encabezado en el documento, como se muestra en la figura 6 a
continuacin.
Esto significa que los agentes de usuario que no hayan implementado el algoritmo de
esquema, puede utilizar seccionamiento implcito, y los que lo han implementado pueden
ignorar efectivamente los niveles de ttulo y utilizar el contenido de seccionamiento para
crear el esquema.
Al el momento de escribir estas lneas, no hay navegadores o lectores de pantalla que
implementan el algoritmo de esquema, es por eso que necesitamos herramientas de
prueba de terceros como el esquematizado. Las ltimas versiones de Chrome y Firefox de
estilos para elementos <h1> en secciones anidadas son diferentes, por eso es muy
diferente de donde actualmente est implementndose el algoritmo.
Cuando la mayora de los agentes de finalmente hagan el soporte usando un <h1> en cada
seccin explcita ser la opcin preferida.
Permitir herramientas de sindicacin para manipular artculos sin necesidad de cambiar
el formato de cualquier nivel de encabezado en el contenido original.
<div>
<h1>Horses for sale</h1>

<section>
<h2>Mares</h2>
<article>
<h3>Pink Diva</h3>
<p>Pink Diva has given birth to three Grand National winners.</p>
</article>
<article>
<h3>Ring a Rosies</h3>
<p>Ring a Rosies has won the Derby three times.</p>
</article>
<article>
<h3>Chelseas Fancy</h3>
<p>Chelseas Fancy has given birth to three Gold Cup winners.</p>
</article>
</section>
<section>
<h2>Stallions</h2>
<article>
<h3>Korahs Fury</h3>
<p>Korahs Fury has fathered three champion race horses.</p>
</article>
<article>
<h3>Sea Pioneer</h3>
<p>Sea Pioneer has won The Oaks three times.</p>
</article>
<article>
<h3>Brown Biscuit</h3>
<p>Brown Biscuit has fathered nothing of any note.</p>
</article>
</section>
<p>All our horses come with full paperwork and a family tree.</p>
</div>
Figura 6.

En otro punto a destacar es la posicin del prrafo Todos nuestros caballos vienen con
nuestra documentacin completa y un rbol de la familia.
En el ejemplo que utiliza los encabezados para crear el esquema (figura 2), este prrafo es
parte de la seccin implcita creada por el encabezado "Brown Biscuit". Los lectores vern
claramente que este texto se aplica a todo el documento, no slo de Brown Biscuit.
Seccionando contenido se resuelve este problema con bastante facilidad, movindose de
nuevo hasta el nivel superior, encabezada por "Caballos para la venta."
Mezclado Superior
Qu sucede cuando se mezclan secciones implcitas y explicitas? Siempre que se
recuerde que las implcitas pueden ir dentro de explcitas y no al revs, estar bien. El
siguiente ejemplo es vlido:
<h1>Horses for sale</h1>
<section>
<h2>Mares</h2>
<h3>Pink Diva</h3>
<p>Pink Diva has given birth to three Grand National winners.</p>
<h3>Ring a Rosies</h3>
<p>Ring a Rosies has won the Derby three times.</p>
<h3>Chelseas Fancy</h3>
<p>Chelseas Fancy has given birth to three Gold Cup winners.</p>
</section>
Y crea esquema jerrquico y sensato:
Horses for sale
Mares
Pink Diva
Ring a Rosies
Chelseas Fancy
Figura 7: Seccin implcita creada por encabezados dentro de una seccin explcita.
Sin embargo, si la esperanza de lograr el mismo esquema anidando una seccin explcita
dentro de una seccin implcita, no funcionar. El elemento de seccionamiento

simplemente se cerrar en la seccin implcita creada por el ttulo y creando un muy

diferente esquema, como se muestra abajo:
<h1>Horses for sale</h1>
<h2>Mares</h2>
<article>
<h3>Pink Diva</h3>
<p>Pink Diva has given birth to three Grand National winners.</p>
</article>
<article>
<h3>Ring a Rosies</h3>
<p>Ring a Rosies has won the Derby three times.</p>
</article>
<article>
<h3>Chelseas Fancy</h3>
<p>Chelseas Fancy has given birth to three Gold Cup winners.</p>
</article>
Esto producira el siguiente esquema:
Horses for sale
Mares
Pink Diva
Ring a Rosies
Chelseas Fancy
Figure 8: Secciones explicitas no pueden ir dentro de secciones imolicitas.
No hay manera de hacer las secciones explicitas creadas por los elementos de <article> se
conviertan en subsecciones de la seccin implcita Mares.
Puedes usar encabezados para dividir el contenido de los elementos de seccionamiento,
pero no al revs.
Cosas A Tener En Cuenta
Secciones sin Ttulo
Hasta ahora no hemos visto <nav> y <aside>, pero funcionan exactamente igual que
<section> y <article>. Si tiene contenido secu ndario que generalmente se relaciona con

un sitio web, es decir horse-training tips e industry news-que se marcar como un <aside>,
lo que crea una seccin explcita en el esquema del documento. Similarmente, la
navegacin principal estara marcada por <nav>, creando de nuevo una seccin explcita.
No hay requerimientos para usar encabezados con <aside> y <nav>, por lo que pueden
aparecer en el esquema como secciones sin ttulo. Sigue adelante:
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/about.html">about us</a></li>
<li><a href="/horses.html">horses for sale</a></li>
</ul>
</nav>
<h1>Horses for sale</h1>
<section>
<h2>Mares</h2>
</section>
<section>
<h2>Stallions</h2>
</section>
Figara 9: Una <nav> sin ttulo.
Nav aparece como una seccin sin ttulo. Ahora bien, esto por lo general no sera un
problema y no se considera mal cdigo HTML5. Se recomienda el uso de encabezados con
el fin de aumentar la accesibilidad.
Las secciones sin ttulo y el elemento article, por otro lado, generalmente se evitan. De
hecho, si no est seguro si va a utilizar una seccin o un artculo, una buena regla de oro
es ver si el contenido tiene un natural encabezado lgico. Si no lo hace, entonces sera
ms sabio utilizar un viejo <div>. Ahora la especificacin en realidad no requiere ttulos en
los elementos de seccin. Dice:
El elemento <section> representa una seccin genrica en la aplicacin del documento. La
interpretacin de esto probablemente depende de la comprensin de la palabra
tpicamente. Lo tomo en el sentido de que se necesita una muy buena razn para no
utilizar encabezados con elementos de la seccin. Yo no lo tomo en el sentido de que se
puede pasar por alto cada vez que sienta la necesidad de utilizar un nuevo elemento
HTML5.

Cuando el elemento <article> es especificado, esta especulacin va an ms all al

mostrar un ejemplo como los comentarios de un blog marcados como unos artculos sin
ttulo. Sin embargo, si usted ve una seccin sin ttulo o artculo en el esquema, asegrese
de que tiene una buena razn para no darle un ttulo.
Raz de Seccionamiento
El Eagle-eyed entre nosotros habr notado que cuando dije que seccionar contenido no
puede crear una subseccin de una seccin implcita, hubo un <h1> (Horses for Sale) no
en seccionar contenido seguido inmediatamente por una seccin (Mares), y que el
contenido de seccionamiento crea realmente una subseccin de <h1>.
Como la especificacin dice, elementos de seccionamiento crean subsecciones de su
ancestro ms cercano al seccionamiento de la raz o de seccionamiento de contenido.
Seccionando elementos de contenido usualmente se consideran subsecciones de su
ancestro raz ms cercana de los contenidos de seccionamiento, la que sea ms cercana,
independientemente de lo que implicaba secciones donde otros encabezados podra
haber creado.
El elemento de <body> es seccionando su raz. As que la <h1> sera el ttulo de la raz de
seccionamiento, y el elemento de <section> sera una subseccin de la raz del cuerpo
seccionado.
El elemento de <body> no es el nico que acta como el corte de la raz. Hay otros cinco:
<blockquote>
<details>
<fieldset>
<figure>
<td>
El estado de estos elementos como el corte de la raz tiene dos implicaciones. Primero
cada uno puede tener su propio esquema. Segundo, el esquema de raz de
seccionamiento anidada no aparecer en, ni tiene un efecto sobre el esquema de la raz
de seccionamiento padre.
En la prctica, esto significa que los encabezados dentro de cualquiera de los cinco
elementos riz de seccionamiento enumerados anteriormente no afectan el esquema del
documento que son una parte de.

La ltima cosa (se le alegra or) que voy a decir sobre el corte de la raz es que el primer
captulo del documento que no est dentro del seccionamiento de contenidos se
considera que es el ttulo del documento.
<section>
<h1>this is an h1</h1>
</section>
<h6>this h6 comes first in the source</h6>
<h1>this h1 comes last in the source</h1>
Figura 10: Cmo los niveles de encabezado en el nivel raz afectan el esquema.
No voy a tratar de explicar esto a usted, ya que probablemente slo va a confundir los
dos, as que voy a dejar de jugar con l en el estructurador. Sugerencia: trate de usar
diferentes niveles de ttulo de las secciones implcitas para ver cmo se ve afectado el
esuqma; por ejemplo, h3 y h4, o dos H5S.
Documentos sin ttulo
Si no hay ningn ttulo est en el nivel raz del documento (es decir, no dentro de
seccionamiento de contenido), a continuacin, el propio documento ser sin ttulo. Este es
un problema bastante serio, y puede ocurrir ya sea por descuido o, paradjicamente, por
pensar cuidadosamente acerca de cmo se debe utilizar el contenido de la seccin.
Roger Johansson aborda esta cuestin en su excelente artculo sobre los esquemas de
documentos y HTML5 y el artculo de seguimiento.
Johansson se pregunta cmo se supone que un documento de esquema adecuado para
ser creado para un blog u otro elemento de tipo de noticias usando HTML5. Si se suscribe
a la creencia de que su logotipo o nombre del sitio web no deben estar en un elemento
h1, podra marcar la entrada del blog en la lnea lo siguiente:
<body>
<article>
<h1> Blog ttulo de post </ h1>
<p> contenido del post del blog </ p>
</ article>
</ body>

El documento no tiene ttulo. Un poco a regaadientes, Johansson se asienta sobre el

marcado hasta el ttulo de la pgina web en h1 y utilizando otro h1 para marcar el ttulo
del artculo. Esta es una solucin sensata y est respaldada por los resultados de la
encuesta a los usuarios lectores de pantalla WebAIM, en la que la mayora de los
encuestados manifest una preferencia por los dos ttulos de nivel superior exactamente
en este formato.
Este mismo enfoque tambin se usa ampliamente en las pginas estticas que se
construyen con elementos estructurales de HTML5, y que podra ser muy til en efecto
para los usuarios de lectores de pantalla. Imagnese que usted est usando un lector de
pantalla para encontrar una receta decente para pastel de pollo, y usted tiene un puado
de sitios web de recetas abierto para la comparacin. Ser capaz de encontrar rpidamente
lo que el sitio web est en el uso de la tecla de acceso directo para los encabezados que
sera mucho ms til que ver slo "pastel de pollo" en cada una de ellas.
No muy lejos detrs de dos ttulos de nivel superior en la encuesta a los usuarios del lector
de pantalla fue un encabezado de alto nivel para el documento. Este es probablemente mi
opcin preferida en la mayora de los casos; pero como ya hemos visto, se crea un cuerpo
sin ttulo, que no es deseable.
Recuerde, usted todava puede utilizar div!
<HGroup>
Este es el ltimo punto en la lista de cosas a tener en cuenta, y es muy fcil de entender.
El elemento <hgroup> slo puede contener encabezados (h1 a h6), y su objetivo es
eliminar todos menos el ttulo que contiene a partir del esquema de ms alto nivel.
Ha sido y sigue siendo objeto de controversia, y su inclusin en la especificacin es de
ninguna manera un hecho. Sin embargo, por ahora, que hace exactamente lo que dice en
la lata: agrupa los encabezados en uno sola, por lo que se refiere al algoritmo de esquema.
En Conclusin
Para esquematizar documentos web semnticos y bien esbozados es necesario conocer
tanto los nuevos elementos como: <section> <article> <aside>, <nav> y la forma de
usarlos al momento de utilizarlos, conociendo bien el algoritmo de esquema del
documento que toma en cuenta en cmo se marcan estos elementos en ellos as como
ciertas consideraciones el el uso de encabezados <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Se deber tomar en cuenta la forma en que se esquematizan generando una raz
estructural creando elementos padre.