martes, febrero 07, 2012

Tutorial de desarrollo web, Parte XVIII: Metadatos. Comentarios.

Previously, on The CubeBlog...

Decimooctava semana del curso de desarrollo web y cada vez más acercándonos al final de esta primera parte del tutorial. Realmente a día de hoy cualquiera que haya seguido el curso no debería tener demasiado problema para hacer una página web visualmente bonita, aunque con poca interactividad. Desgraciadamente, la interactividad no la podremos añadir hasta no conocer lenguajes de programación, así que, ¡pongámonos las pilas para poder empezar con JavaScript! Pero antes que nada, la solución de la semana pasada.
Para ir viendo ya las últimas lecciones de HTML (luego nos pasaremos un poco al CSS) hoy vamos a centrarnos a hablar sobre todo sobre los "metadatos". "¿Qué es eso de metadatos?" os preguntaréis. Bueno, la definición más aceptada para la palabra "metadatos" es "datos sobre datos". El concepto parece muy extraño, pero simplemente se refiere a una información que se nos ofrece sobre otro elemento de información. En nuestro caso, nuestros "metadatos" servirán para dar información sobre la página web, que a su vez ofrece información sobre un tema en particular (dependiendo de la página web).
Recordaréis que en los primeros capítulos del curso dije que dentro de la etiqueta "head" encontraríamos una serie de elementos que no serían vistos directamente en la página. Hasta ahora hemos visto la etiqueta "title", cuyo contenido aparece en la barra de título (por lo tanto, fuera de la página) y las hojas de estilo, vistas en la página de manera indirecta (ya que ayudan a modificar los elementos de la página, pero las hojas de estilo en sí mismas no son vistas). Nuestra tercera etiqueta será la etiqueta <meta> la cual usaremos para introducir, como ya se imaginarán, metadatos.
La información ofrecida por una etiqueta de tipo "meta" puede ser muy amplia, y son completamente personalizables. Aunque no serán vistas por el usuario, al menos por aquellos usuarios que estén en la página, las etiquetas "meta" ofrecerán al navegador información sobre cómo ejecutar la página, ayuda a los motores de búsqueda a indexar mejor los contenidos (unas etiquetas "meta" bien definidas nos posicionarán mejor en los buscadores y, por tanto, aumentará nuestras visitas) y es usado también por servicios de otras páginas. Los atributos con los que contaremos serán los siguientes:
  • http-equiv="" indica al navegador qué hacer con los datos que le demos en la etiqueta "meta" que tengamos. Puede contener uno de estos tres valores:
    • http-equiv="content-type" especifica el conjunto de caracteres que será usado en la página, muy útil para asegurarnos que los caracteres especiales que usemos aparezcan. El más común es el UTF-8. Más abajo encontraréis un ejemplo de su utilización.
    • http-equiv="default-style" nos indicará, en caso de tener varias hojas de estilo enlazadas en nuestra web, cual es la que se usará por defecto (personalmente, no me parece una gran idea).
    • http-equiv="refresh" es otro ejemplo de atributo que desaconsejo enormemente. Sirve para indicar al navegador cada cuánto tiempo debe recargar la página.
  • content="" es la etiqueta que indicará el valor del dato que queremos incluirle. Dependiendo de los tres anteriores, puede contener los siguientes datos:
    • content="text/html; charset=utf-8" es la configuración más habitual para el "content-type" que vimos anteriormente. Existen otros charset como el "iso-8859-1" o el "latin" que pueden sustituir al "utf-8", pero el "utf-8" es, probablemente, el más extendido.
    • <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    • En el caso de haber incluido "default-style", el contenido de "content" debería ser el del contenido de un atributo "title" que deberá llevar el enlace a la hoja de estilo que queramos. Por ejemplo:
    • < meta http-equiv="default-style" content="estilo1" />
    • <link rel="stylesheet" type="text/css" href="estilo1.css" title="estilo1.css" />
    • En el caso del "refresh" es mucho más simple, ya que sólo tendremos que poner el número de segundos que queremos que tarde la página en recargar.
    • <meta http-equiv="refresh" content="30" />
    • Finalmente, tendremos etiquetas "meta" a la que no le daremos ningún "http-equiv". En ese caso, el contenido de este atributo será el que queramos, siempre teniendo en cuenta el atributo "name" que veremos a continuación.
  • name="", al igual que hasta ahora, será un atributo al que le podamos dar cualquier tipo de valor.  En teoría, el "name" debe indicar qué información vamos a compartir en el atributo "content". Es indispensable en caso de no haber atributo "http-equiv", aunque completamente prescindible en caso de haberlo. Elegir alguno de los valores ya predefinidos ayudará a que las distintas aplicaciones de internet encuentren y manejen mejor la información de estas etiquetas, que de otro modo podría quedarse perdida en el código sin que nadie acceda a ella nunca:
    • name="author" indica que en el content indicaremos el nombre del autor de la página.
    • < meta name="author" content="Roberto Mendoza Marrero" />
    • name="description indica una descripción de la página.
    • <meta name="description" content="Una web de cómics" />
    • name="keywords" indica una serie de palabras clave que tienen que ver con la página.
    • <meta name="keywords" content="comics, peliculas, videojuegos" />
    • name="generator" indica qué software ha sido usado para crear la página.
    • <meta name="generator" content="Microsos Expression Web 4.0" />
    • <meta name="application-data" indica algo que aún nos parecerá raro, ya que nos indicará el nombre de la aplicación web que hayamos hecho (si se trata de una aplicación web). Como a día de hoy no hemos aprendido a hacer aplicaciones web, no la usaremos de momento.
Como digo, visualmente no nos mostrará nada (bueno, tal vez el "charset" que elijamos, pero por lo general no), pero será bastante útil para procesos internos del navegador.
Para terminar hoy vamos a hablar de algo que debí haber hablado en las primeras entregas del tutorial, pero igual que me pasó con el formato en HTML, esto también se me pasó. Se trata de los "comentarios". La gran mayoría (si no todos) de los lenguajes informáticos tienen reservados unos símbolos que ayudan a incluir "comentarios" en sus documentos. En el caso del HTML los comentarios se introducirán de la siguiente manera:

<!-- Esto es un comentario -->

Los comentarios no tienen ningún efecto en ejecución y serán completamente ignorados por los navegadores, pero son bastante útiles para que el usuario incluya anotaciones en su código para, en caso de querer revisarlo o modificarlo, poder encontrar de manera fácil cada parte del documento. Tal vez en las páginas que hemos hecho hasta ahora no parezcan muy útiles, pero hay documentos muy enormes que necesitan ir, poco a poco, comentándose, para asegurarnos de luego no perdernos. Los comentarios pueden ser incluidos en cualquier punto del documento sin problema ninguno. Supongo que a muchos les habrá sonado de algo la sintaxis del "comentario", y es que la etiqueta "Doctype" que llevamos introduciendo desde el comienzo del curso es muy parecida a un comentario (sólo le faltan los guiones). Sin embargo, eso, y que es la única etiqueta que no necesita cerrado, son los únicos parecidos que hay entre los comentarios y la etiqueta Doctype, ya que esta última, aunque no lo parezca, tiene un sentido, sobre todo para indicar qué versión de HTML estamos usando (lo cual es importante para que algunos navegadores reconoczan algunas etiquetas o sepan cuales de los distintos usos que ha tenido debe de darle).
Por supuesto, el CSS también tiene sus comentarios, que se escribirían con la siguiente sintaxis:

/* Esto es un comentario */

Recordemos siempre abrir los comentarios (<!-- en HTML y /* en CSS) y cerrarlos (--> y */) correctamente, ya que dejar un comentario abierto puede llevar a desbarajustes muy grandes en nuestro documento.

EJERCICIO


Esta semana simplemente cogeremos nuestro documento "hola_mundo.html" y le daremos metaetiquetas, incluyendo comentarios para explicar qué hemos introducido en cada una de dichas metaetiquetas.

Y otra semana más, terminamos la entrega del tutorial, con algo sencillo de hacer pero tal vez un poco complejo de entender. Espero que se haya entendido bien y si hay alguna duda, díganlo e intentaré resolverla en próximas entregas.

No hay comentarios: