[kml_flashembed movie=\u00bbhttp:\/\/www.youtube.com\/v\/vRqQRrULSxI\u00bb width=\u00bb560″ height=\u00bb315″ wmode=\u00bbtransparent\u00bb \/]<\/p>\n
Transcripci\u00f3n:<\/p>\n
Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo emplear los nuevos elementos sem\u00e1nticos de HTML5 para transformar la estructura de una p\u00e1gina web de las versiones antiguas de HTML a la \u00faltima versi\u00f3n.<\/p>\n
En las versiones anteriores de HTML exist\u00edan dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, as\u00ed que presta mucha atenci\u00f3n a este v\u00eddeo, ya que te voy a explicar c\u00f3mo las puedes evitar.<\/p>\n
En la Web se pueden encontrar varios art\u00edculos que explican los s\u00edntomas de estas dos enfermedades y sus posibles curas.<\/p>\n
Incluso en la Wikipedia se puede encontrar un art\u00edculo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.<\/p>\n
Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy com\u00fan encontrar situaciones como esta.<\/p>\n
O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una p\u00e1gina web.<\/p>\n
Estos dos errores se arreglan f\u00e1cilmente, ya que se pueden emplear las etiquetas que ya existen en el c\u00f3digo y en muchas casos no hace falta a\u00f1adir la etiqueta span.<\/p>\n
Respecto a la etiqueta div, la divitis, es muy com\u00fan encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y as\u00ed varias veces.<\/p>\n
Hay p\u00e1ginas web en las que se pueden encontrar verdaderas barbaridades, como la p\u00e1gina principal de un famoso diario deportivo que tiene m\u00e1s de mil etiquetas div.<\/p>\n
En HTML5 se han a\u00f1adido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.<\/p>\n
Vamos a ver a continuaci\u00f3n c\u00f3mo se tienen que usar estas etiquetas para estructurar correctamente una p\u00e1gina web con HTML5.<\/p>\n
Esta imagen muestra la estructura t\u00edpica de una p\u00e1gina web escrita con las versiones anteriores de HTML. Esta p\u00e1gina contiene:<\/p>\n
Una cabecera.
\nUna barra o men\u00fa de navegaci\u00f3n.
\nUn panel con informaci\u00f3n adicional, como por ejemplo noticias.
\nLa zona de contenido principal formada por
\ndos entradas o art\u00edculos.
\nUna imagen en una de las entradas.
\nY un pie de p\u00e1gina.<\/p>\n
Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas espec\u00edficas para definir regiones especiales que tienen las p\u00e1ginas web.<\/p>\n
La cabecera se etiqueta con header.
\nLa barra o men\u00fa de navegaci\u00f3n con nav.
\nUn panel con informaci\u00f3n adicional con aside.
\nLa zona de contenido principal con main.
\nLas entradas o art\u00edculos con article.
\nUna imagen con figure.
\nY el pie de p\u00e1gina con footer.<\/p>\n
En alg\u00fan caso puede ser dif\u00edcil decidir cu\u00e1l es la etiqueta m\u00e1s adecuada para una regi\u00f3n de una p\u00e1gina web.<\/p>\n
Esta imagen extra\u00edda de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cu\u00e1l es la etiqueta m\u00e1s adecuada seg\u00fan la funci\u00f3n que realiza la regi\u00f3n que se quiere etiquetar dentro de la p\u00e1gina web.<\/p>\n
A continuaci\u00f3n vamos a ver parte por parte c\u00f3mo se transforma una p\u00e1gina web de una versi\u00f3n antigua de HTML a HTML5.<\/p>\n
En primer lugar vamos a ver el c\u00f3digo HTML de la cabecera.<\/p>\n
Este es el t\u00edpico c\u00f3digo de una cabecera de una p\u00e1gina web: un div y un h1.<\/p>\n
En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna raz\u00f3n, es necesario utilizar un div para definir algunas caracter\u00edsticas de la presentaci\u00f3n del encabezado, es mejor utilizar la nueva etiqueta header.<\/p>\n
Ahora la barra o men\u00fa de navegaci\u00f3n del sitio web.<\/p>\n
Una barra o men\u00fa de navegaci\u00f3n es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.<\/p>\n
Un panel con informaci\u00f3n adicional, contiene informaci\u00f3n que complementa a la informaci\u00f3n principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una regi\u00f3n con noticias o anuncios.<\/p>\n
Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.<\/p>\n
Vamos a ver a continuaci\u00f3n c\u00f3mo etiquetar la zona de contenido principal que est\u00e1 formada por una serie de entradas o art\u00edculos.<\/p>\n
La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o art\u00edculos con la etiqueta article.<\/p>\n
Respecto a las im\u00e1genes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relaci\u00f3n entre una imagen y su t\u00edtulo. Sin embargo, en HTML5 esto est\u00e1 resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el t\u00edtulo de una figura.<\/p>\n
Muy importante, la etiqueta figure no s\u00f3lo se emplea para etiquetar una imagen. Tambi\u00e9n puede etiquetar otras cosas, como un fragmento de c\u00f3digo, o una cita.<\/p>\n
Por \u00faltimo, el pie de p\u00e1gina.<\/p>\n
En el pie de una p\u00e1gina web suele aparecer el correo de contacto, el aviso legal, la informaci\u00f3n de copyright o informaci\u00f3n similar.<\/p>\n
En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.<\/p>\n
Como ves, transformar una p\u00e1gina web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada regi\u00f3n de una p\u00e1gina web.<\/p>\n
Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n
Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n
Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
[kml_flashembed movie=\u00bbhttp:\/\/www.youtube.com\/v\/vRqQRrULSxI\u00bb width=\u00bb560″ height=\u00bb315″ wmode=\u00bbtransparent\u00bb \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de …<\/p>\n