Video Web Semántica

  • Por
Este vídeo es una exposición dedicada a las características y ventajas de la Web Semántica.

Esta es la segunda clase del Curso Gratuito 5 días de HTML5, impartida por Zuriñe Menendez @zmencay, en la que nos habló de la Web Semántica. Fue una exposición en la que pudimos apreciar la importancia de la Web Semántica y cómo HTML5 ha posibilitado su implantación.

Durante la clase se remarcaron diversos conceptos, comenzando por la propia semántica, y cómo aplicarla en un diseño, desde el punto de vista estético, pero también en términos de código HTML, por medio de la selección correcta de etiquetas según su significado. También repasamos otros asuntos importantes como los microformatos, que nos ayudan a aplicar semántica en piezas concretas de contenido. Vimos al final unos ejemplos en código para poder concretar todo el conocimiento en un documento HTML.

Por qué Web semántica

Semántico se refiere a cargado de significado. La Web semántica hace referencia a aquella que nos consigue comunicar un significado cuando la leemos las personas, pero además también cuando la interpretan las máquinas.

En este primer punto Zuriñe nos indicó los motivos por los que existe la Web semántica y los objetivos que persigue. Entender para qué sirve el sitio, saber cuál es nuestro objetivo, comprender lo que el diseñador desea transmitir y codificar correctamente.

Desde el punto de vista de las personas, cargar de significado a una web comienza por tener un diseño apropiado, aplicando colores, formas y estética que nos ayude a entender para qué están las cosas. Si algo es un enlace no debe verse como un botón. Si hay un disparador de una acción "cancelar" no debe verse igual que uno que sirve para "aceptar".

Pero no solo la web la leen las personas, también hay máquinas que consumen el contenido de las páginas. Por ejemplo, Google o cualquier robot que analice el contenido de la Web. Incluso hay personas que, por problemas de visión, no son capaces de asimilar el contenido de una web de manera visual. Para todos ellos la semántica se tiene que aportar en función a otros elementos y ahí es donde cobra valor cargar de significado al código HTML que escribimos.

Así pues, hay etiquetas en el HTML que aportan un significado a aquello que se está incluyendo en un documento, como HEADER, FOOTER, ARTICLE, etc. Esto es algo que se ha tomado con mucha importancia dentro de HTML5 y de hecho, la mayoría de las nuevas etiquetas disponibles en el lenguaje son etiquetas que aportan un significado a aquello que incluyen en un documento HTML.

Semántica y SEO

SEO significa Search Engine Optimization y son un conjunto de técnicas que sirven para hacer que una página aparezca mejor posicionada en buscadores. Pues bien, según nos explicó Zuriñe, la semántica nos ayuda a realizar un mejor SEO. Para ello tenemos que procurar escribir un código limpio y usar ciertas etiquetas o selectores CSS que nos ayuden a identificar el contenido por su función.

Los buscadores son como usuarios ciegos, porque no saben cómo se ve una web, solo saben leer su código. Existen etiquetas que directamente le hacen entender qué es lo que están incluyendo, como un encabezamiento, un navegador, un contenido accesorio en el lateral, etc. Cualquier ayuda que le ofrezcamos a un buscador para interpretar el contenido de nuestra página y saber qué función tiene cada parte y qué importancia dentro del conjunto del documento, es positiva.

Etiquetas semánticas

Sirven para identificar lo que va asociado a ellas. Es de lo que estamos hablando todo el rato. Son etiquetas como HEADER, SECTION, ARTICLE, FOOTER, NAV, etc. Estas etiquetas sirven para dar entender determinadas cosas.

Nota: Otro artículo donde se habla de semántica en el documento HTML es Etiquetas semánticas del HTML5.

Hay un montón de etiquetas que han surgido para dar cabida a la web semántica. También nos señalan en la charla las etiquetas para formularios para ayudar a la entrada de datos.

Microformatos

Este es otro de los asuntos que vimos en la clase y nos ayudó a entender cómo se pueden entregar informaciones adicionales a los navegadores, esta vez a través de clases CSS.

Existen microformatos para muchos asuntos interesantes, por ejemplo crear tarjetas de visita en una web. Por medio de una serie de clases CSS (class) podemos indicar qué es cada parte de la tarjeta de visita, como el nombre el email, la dirección web, teléfonos, etc. En la charla lo vimos con un ejemplo.

Ejemplo de página HTML5 semántica

En el último tercio de clase nos dedicamos a analizar un código HTML e identificar las partes semánticas. Veremos por médio de código diversos asuntos clave en esta charla, desde el uso de etiquetas nuevas del HTML5 que aportan un significado hasta el uso de los microformatos.

Además pudimos ver componentes típicos de una página en HTML5, desde el documento básico hasta la inclusión de scripts para compatibilidad.

Vídeo y materiales para descarga

Los materiales usados durante la presentación, diapositivas y el ejemplo se pueden descargar en un archivo comprimido.

Para encontrar todo el contenido de esta clase, lo mejor es que puedas ver el vídeo de la grabación.

Autor

Zuriñe Menendez

Desarrolladora Front-end freelance, diseñadora, maquetadora y sobre todo artista del código. Apasionada por el HTML5, microformatos y todas aquellas mejoras que caracterizan un trabajo web profesional.

Compartir

Comentarios

German

16/4/2014
link de descarga
Buen dia,
Es posible que me pases el link descarga?
Saludos.

Daniel

16/4/2014
Consulta
Me anote en el curso, pero me anote tarde, no me llego el mail del primer video del curso de HTML5, podrían adjuntar el link acá, muchas gracias.

Saludos cordiales

Victorln

16/4/2014
Presentación
Estará disponible la presentación para su descarga?

Gracias, saludos.

noelia

16/4/2014
link primer video
Aca esta el link del video del lunes es el primero
http://www.desarrolloweb.com/articulos/video-que-es-html5.html

david perez

16/4/2014
html5 base
Hola muy buenas.
Antes de nada daros las gracias por vuestras iniciativas, son francamente buenas. Os escribía para saber si pondréis el archivo html sobre el que se basó ayer la presentadora para comentar las etiquetas de html5.
Muchas gracias

juan perez

16/4/2014
HTML5 3ra clase
pueden subir el link de la 3ra clase

yerko

17/4/2014
Consulta!
Hoy seguirán con la próxima clase de HTML5?
no me ha llegado el link de registro. Por otro lado subirán la clase 3?
Saludos cordiales!

Juan

18/4/2014
Segundo Tema
Excelente, me queda claro que antes de realizar la página se tienen que tocar varios puntos, como es el análisis previo, después el diseño en papel y luego empezar a programar la página o la realización de la misma. Agradecería si me pudieran enviar las ligas de consulta que utilizaron para los micro formatos, como lo comente por cuestiones de trabajo solo estoy viendo los vídeos, saludos desde Naranjos, Veracruz - México.

karillo

28/1/2015
felicitar
muy buena informacion

Guillermo

16/4/2015
Gracias por la explicación!
Me has aclarado muchas dudas que remolcaba de proyectos anteriores, tengo ganas de poner en práctica lo aprendido próximamente...
Un saludo!