TALLER |
|
 PIXABAY <body> El cuerpo, ¿cómo lo estructuramos? ¿Qué es el cuerpo? y ¿cómo lo estructuramos? Estas son las dos primeras preguntas que debemos hacernos, el cuerpo es la parte del código que se encuentra entre las dos etiquetas <body> y </body>, si body=cuerpo en ingles, fácil. ¿Qué metemos dentro del cuerpo? Lo que meteremos dentro del cuerpo es el código que generará la parte visible, todo lo que vemos. ¿Cómo lo estructuramos? En HTML siempre ha habido y habrá distintas maneras de estructurar la información dentro de nuestra página entre estas dos etiquetas, si bien existen unas etiquetas básicas que definen las distintas maneras básicas de organizar el código. Como por ejemplo la etiqueta <table> que fue una de las primeras creadas para esta función de estructurar nuestra página, el programador podía coger los textos, imágenes y herramientas y colocarlas en posiciones dentro de filas o columnas, era una evolución muy grande dada la simplicidad de las primeras páginas, las tablas mejoraron la experiencia y con el paso del tiempo otros elementos fueron poco a poco reemplazando su función logrando lo mismo con menos código, lo cual conseguía facilitar desde la creación al mantenimiento de nuestra página web. La web fue evolucionando volviéndose cada vez más interactiva y con la integración de HTML, CSS y Javascript la etiqueta <div> se convirtió en indispensable. Esta etiqueta, al igual que <table> no nos da mucha información más allá de especificar una división dentro del cuerpo, de un elemento que esté encerrado entre las etiquetas <div> de apertura y </div> de cierre. ¿Y qué elementos pueden encerrarse dentro de estas etiquetas?, pues cualquier elemento, imagen, texto, menús … cualquier elemento que queramos marcar. En HTML5 la estructura principal ya no depende de estos elementos como veremos a continuación, se han incorporado nuevos que nos ayudarán a identificar y estructurar cada sección de nuestro documento haciéndonos más fácil organizar el cuerpo. Organización A pesar de que cada diseñador crea diseños propios, la estructura básica podíamos decir que sería esta:  Imagen 1 Cabecera En la parte superior es donde normalmente se ubica el nombre de la página con su logo y una corta descripción de la página. Barra de Navegación Inmediatamente después o arriba de la cabecera los desarrolladores suelen colocar el Menú, una lista de enlaces a las secciones de la página para facilitar la navegación y que el usuario encuentre lo que necesite. El centro, Contenido y Barra lateral Lo normal a la hora de diseñar un página web es que la información más importante esté situada en el centro, en esta sección es donde irán los artículos y los enlaces más valiosos, en el ejemplo anterior podemos observar uno de los diseños más utilizados y vemos como el centro de la página está dividido en dos columnas la de Contenido y Barra Lateral, esta sección es muy flexible y los diseñadores la suelen adaptar a las necesidades de la página ya sea poniendo una columna, dos o tres o subdividiendo estas. Pie de página Es la que suele mostrar toda la información acerca del sitio, como autores o empresa, información de contacto, términos y condiciones, tipo de licencia que se usa o copyright y toda la información que el webmaster quiera poner porque lo considere importante.  Imagen 2 Cabecera <header> Una de las etiquetas nuevas en HTML5 sería <header> y cuidado con confundirla con <head> usado antes para la cabecera del documento. Aunque las funciones de <head> y <header> son dar información como el título, subtítulos o el logo, una se diferencia de la otra en que <head> afectaría a todo el documento mientras que <header> se usaría para el cuerpo o secciones especificas dentro de este.  Imagen 3 En el código de la imagen 3 le pusimos título a nuestra página web con la etiqueta <header>, no debemos olvidarnos que esta no es la misma que usamos antes para poner el título al documento. Etiqueta <hn> Las etiquetas son:<h1>, <h2>, <h3>, <h4>, <h5>, <h6> con sus correspondientes etiquetas de cierre. La etiqueta “h” viene de “heading” que sería el “encabezado” o “título” y que junto con el número que va del 1 al 6 indicamos qué importancia tiene este, el más importante sería el 1 y el menos importante sería el 6. De <h1> a <h4> se suelen usar para títulos, mientras que <h5> y <h6> la letra aún es mostrada más pequeña que el texto y se suelen usar para pies de foto o aclaraciones.  Imagen 4 Barra de Navegación <nav> Lo siguiente sería la barra de navegación, esta barra en HTML5 se marca con la etiqueta <nav>, esta etiqueta como podemos observar en la imagen 4 se encuentra dentro de las etiquetas <body> y debajo de la etiqueta <header>. Si bien como hemos dicho anteriormente HTML5 consta de elementos los cuales podemos usarlos como se nos ocurra, debemos tener en cuenta que estas etiquetas nacen para dar información a los navegadores y que cada nuevo dispositivo o programa identifique las secciones más importantes de un documento. <ul> Esta etiqueta la utilizaremos para crear una lista dentro de la etiqueta <nav> entre <ul> y </ul>, como ya es costumbre, donde generaremos el listado de lo que serán las secciones de nuestra página. <li> Con esta otra etiqueta introduciremos los elementos de nuestra lista dentro de <li> y </li> como hemos visto en la foto de arriba. <section> El centro, Contenido y Barra lateral Siguiendo con la estructura ahora toca el paso al Contenido y la Barra lateral, En el Contenido es donde va la información más importante y puede ir a su vez dividida en bloques o columnas, por estas razones se puede decir que el propósito de esta zona es más amplio y la etiqueta que especificaría estas secciones será <section>.  Imagen 5 La etiqueta <section> irá después de la etiqueta de cierre </nav> porque hace referencia a una nueva sección de contenido dentro del documento, hay que decir y es importante que no es un contenedor genérico, a diferencia como puede ser <div>. Veamos como se ve esto en el navegador:  Imagen 6 Como se puede ver en la imagen 6, al observar con un navegador los elementos no han quedado como se suponía, donde debería estar la barra de navegación hay una lista en vertical en vez de en horizontal, no preocuparse, la razón de esto es que en HTML5, la representación de los elementos se representa con las funciones de CSS asignando estilos a cada elemento de HTML, por esta razón es importante estructurarlo todo bien. Pero lo de CSS es para más adelante, sigamos. <aside> Como en el diseño web que hemos visto, apreciamos que la columna lateral se ubica al lado de la información principal. En esta columna los datos suelen estar relacionados con la zona principal aunque no sean tan relevantes o sean ayudas a la navegación. Cuando nuestra página es tipo blog la barra lateral contendrá una lista de enlaces con información del autor, secciones y demás información que estando relacionada con los artículos no es relevante por si misma sino que serían ayudas y pequeñas reseñas de artículos que hacen la navegación por la página más fácil y rápida. Para ello usaremos como vemos en la imagen 7, la etiqueta <aside> que bien podría estar en el lado derecho o izquierdo de la página pues la etiqueta no tiene un sitio definido, porque la etiqueta solo describe la información que contiene, no su lugar. Como con otras etiquetas, ésta la podremos anidar dentro de otras pero este siempre será el contenido secundario.  Imagen 7 <footer> Y ya para terminar la estructura de nuestro documento, colocaremos el último elemento básico: el pie de página, como vemos en la imagen 8, el cual nos cerrará nuestro documento. En él pondremos información general del autor o de la organización, las formas de contacto licencias con la que se trabaja etc. No olvidemos que como las demás etiquetas se le pueden dar más usos en distintas secciones pero esto ya es otra historia que veremos más adelante en siguientes capítulos.  Imagen 8
<p> Y ya que estamos sigamos con la etiqueta <p>, habéis visto que la hemos usado dentro de <footer> en la imagen 8, pero se puede usar donde queramos, esta etiqueta es para indicar un párrafo, un bloque de texto separado entre dos espacios en blanco el cual quedará encerrado entre <p> y </p>. Esta estructura que hemos visto es muy versátil, se podría usar en una página, e-comerce, blog… la diferencia será la personalización que le demos hasta que consigamos lo que queremos. Bueno hasta aquí hemos llegado, volveremos la próxima semana con más. Y ahora hasta la siguiente lección: ¡A practicar! ¿Te gusta escribir? Raul Mora M - Madrid Temas relacionados: Programación, Redacción independiente, ¿Te gusta escribir? Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |
Ciencia y Tecnología
Investigación Médica y Salud
Eres Periodista Científico?
Educación y Formación
Sociedad, Igualdad y Sostenibilidad
Cultura y Ocio
¿Tienes una cita?
Aventura y Supervivencia
|
