Etiquetas HTML5 que no pueden pasar desapercibidas

Para comenzar, no sé si ya tienes instalado en tu navegador Chrome la extensión "HeadingsMap", si no es así, te recomiendo que lo instales porque así podrás ver el índice o mapa de la estructura de tu sitio Web.

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en

Por ejemplo, en la siguiente imagen se muestra el índice de la página de la empresa "Casteret Grupo Explora" en la web de Turispain.com

Para que tu página Web tenga éste índice hay etiquetas de HTML5 que no pueden faltar en tu código:

<header>

La etiqueta <header> se utiliza para agregar los elementos de la cabecera de nuestra página (los h1-h6), así como los enlaces de navegación por nuestros sitio. Aunque puede ser cabecera de cualquier otro contenedor.

http://www.w3.org/TR/html-markup/header.html

<nav>

Permite incluir entre las etiquetas <nav></nav> nuestros enlaces de navegación, listas, etc. Ejemplo:

<nav>
  <a href="#">Enlace 1</a> |
  <a href="#">Enlace 2</a> |
</nav>

http://www.w3.org/TR/html-markup/nav.html

<main>

Nuestro código debe estar contenido entre las etiquetas <main></main> pero sólo se debe usar una vez por página.

Esta etiqueta hace referencia al contenido principal del body de nuestra página web y tienes que tener en cuenta que no puede ser hija de las etiquetas: header, nav, article, aside y footer.

http://www.w3schools.com/tags/tag_main.asp

<article>

Se puede utilizar cuando su contenido sea independiente del resto de contenido, es decir, que tenga significado propio, pudiendo ser reutilizable luego en otras páginas. Por ejemplo, un artículo de un periódico, el post en un foro, una entrada de un blog,etc.

Podemos incluir varios <article> en una página ya sea dentro de una <section> o fuera de ella.

http://www.w3.org/TR/html5/sections.html#the-article-element

<section>

Puede ser una temática dentro de un contenido, que guarda relación con este. Generalmente se incluye entre las etiquetas <section></section> el encabezado de una página (los h1-h6).

Una página web, por ejemplo, puede estar estructurada por las secciones: Introducción, Noticias e Información de Contacto.

http://www.w3.org/TR/html5/sections.html#the-section-element

<aside>

Esta etiqueta la utilizaremos para incluir el contenido secundario de nuestra página, es decir, las redes sociales, la publicidad, enlaces externos, etc. Siempre y cuando no utilicemos otra etiqueta adecuada a la situación, por ejemplo, si las redes sociales las incluyes en el pie de tu página entonces es mejor que utilices la etiqueta <footer>

http://www.w3.org/TR/html-markup/aside.html

<footer>

Como su nombre lo indica, se utiliza para el pie de página, donde incluiremos: el típico ¿Quiénes somos?, Contacta con nosotros, el Aviso legal y de privacidad de la empresa, el mapa de nuestra web...Ejemplo:

<footer>
    <ul>
        <li><a href="#">¿Quiénes somos?</a></li>
        <li><a href="#">Contacta con nosotros</a></li>
        <li><a href="#">Aviso Legal</a></li>
    </ul>   
</footer>   

http://www.w3.org/TR/html5/sections.html#the-footer-element

Anotaciones sobre SEO y diseño Web

En mi trabajo diario como informática, he hecho algunas anotaciones que el equipo de trabajo hemos ido aprendiendo sobre SEO y diseño Web, espero les sea de utilidad:

¿Es necesario desindexar el aviso legal, el quiénes somos, contáctanos …?

R/ No es necesario, para Google estas páginas no son importantes.

¿Es necesario limitar los enlaces del Menú y del Footer, para que Google no los tenga en cuenta a la hora de rastrear?

R/ No es necesario, El Menú al estar bajo la etiqueta <nav> (que permite identificar los elementos de navegación que tiene una página web) y la etiqueta <footer> (en el caso del Footer) Google ya sabe que es una sección común a todas las webs y solo rastreará una vez esas secciones.

¿Qué enlaces tenemos que redireccionar en una web?

R/ Es uno de los problemas más críticos de una web, tenemos que redirigir todas las urls que han dejado de existir.

Si tenemos en nuestra web redirecciones a otros hosts, ¿podremos hacer precargas DNS?

R/ Claro que sí, incluso nos ayudará a optimizar nuestro sitio web, lo haremos con la etiqueta: "dns-prefetch"  dentro del “head”, al principio de la página: por ejemplo,

<!DOCTYPE html><html lang="es">

<head>

<meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>

<link rel="dns-prefetch" href="//ajax.googleapis.com">

<link rel="dns-prefetch" href="//www.google-analytics.com">

</head>

¿Podemos forzar el cacheo del navegador?

R/ Sí, en nuestro .htaccess, incorporando el siguiente código:

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

</IfModule>

¿Cerramos o no el tag “?>” en un archivo .php?

R/ En un archivo solamente de PHP el cierre del tag al final del archivo es opcional y se puede omitir. Sería recomendable no poner el tag. Muchos frameworks de PHP como Zend - CodeIgniter y muchos gestores de contenidos como Drupal obligan a omitir el tag del final.

Php dice que omitirlo evita algunos errores cuando haces includes o requires y también evita errores con los espacios al final del archivo.

http://stackoverflow.com/questions/3219383/why-do-some-scripts-omit-the-closing-php-tag

http://es1.php.net/basic-syntax.instruction-separation

http://php.net/manual/en/language.basic-syntax.phptags.php

¿Utilizamos la sintaxis corta de php: <? y ?>?

R/ No uséis la sintaxis corta de php, hay que configurar el servidor para que la interprete así que os aconsejaría usar la sintaxis tradicional para evitar errores y problemas al subirlo al servidor de producción.

“Cuando PHP interpreta un fichero, busca las etiquetas de apertura y cierre, que son <?php y ?>, y que indican a PHP dónde empezar y finalizar la interpretación del código. Este mecanismo permite a PHP ser incrustado en todo tipo de documentos, ya que todo lo que esté fuera de las etiquetas de PHP será ignorado por el intérprete.

PHP también permite las etiquetas abreviadas <? y ?> (las cuales están desaconsejadas debido a que sólo están disponibles si se habilitan con la directiva short_open_tag del fichero de configuración php.ini, o si PHP se configuró con la opción --enable-short-tags .”

Fuente: http://www.php.net/manual/es/language.basic-syntax.phptags.php

*****Algunos consejos para aprovechar las semánticas de HTML5

• El contenido principal de nuestras páginas web deberían ir dentro de las etiquetas <main></main>
• Las imágenes <img> deben llevar atributo alt, utilizando textos descriptivos.
• La etiqueta <strike> que se usaba para representar un texto con un estilo de fuente tachado, ya no se utiliza en HTML5, para conseguir el mismo efecto hay que usar CSS.
• No debemos utilizar la etiqueta <div> para conseguir efectos de estilo que deberíamos aplicar sobre los <p>, <ul>, <li>, <a>
• Utilicemos la etiqueta <aside> use para todo aquel contenido tangencial al contenido principal de la página web, contenido que no es directamente contenido principal del que estamos tratando en la página.
• La Navegación principal de nuestra web debería ir dentro de la etiqueta <nav> ayudando a los buscadores a detectar la estructura de la web.
•  El pie debe estar fuera de <main> y dentro de <footer>

Microformatos en la Web

Desde hace algunos años atrás ya que está escuchando el concepto de Web Semántica, sin embargo es un tema que no acaba de arrancar, aunque pequeños pasos sí que se están dando al respecto, uno de ellos es la utilización de microformatos en nuestra web.

Los microformatos son entidades que se utilizan para describir una determinada información, por ejemplo:

·         Persona (http://schema.org/Person)

·         Lugar (http://schema.org/Place)

·         Organización/Empresa (http://schema.org/Organization)

·         Evento (http://schema.org/Event)

·         Oferta (http://schema.org/Offer)

·         Comentario/Opinión (http://schema.org/Review )

Cada una de éstas entidades tienen propiedades, por ejemplo ésta última entidad (Comentario) tiene las siguientes propiedades: título o nombre del comentario, autor, día de la publicación, valoración del objeto (establecimiento, producto, ect.) al que se le está haciendo el comentario, descripción, entre otros.

Los microformatos se utilizan dentro de etiquetas html como <span>, <div>, <meta> y dentro de ellos se especifica la propiedad del elemento, utilizando el itemprop=" " y antes de  utilizarlos se debe especificar en un <div> principal (por ejemplo) el tipo de entidad a la que se está haciendo referencia. Siguiendo el ejemplo de la  entidad Comentario, veamos cómo quedarían sus propiedades:

1.     Especificar la entidad, utilizando el div principal:
<div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review">

2.     Título o tema del que se está hablando:
<span itemprop="itemreviewed">Comentario acerca de...</span>

3.     Autor del comentario:
Comentario de <span itemprop="reviewer">Irina Argota</span>

4.     Fecha del comentario:
<time itemprop="dtreviewed" datetime="2012-11-28">28/12/2012</time>

5.     Descripción del comentario:
<span itemprop="description">Este es mi comentario...</span>

6.     Valoración/Puntuación del comentario:   

Valoración: <span itemprop="rating">90</span>

7.     Mayor Valoración/Puntuación del comentario:
<span itemprop="best">100</span>
  </div>

Para nuestro  ejemplo, hemos utilizado un determinado microformato, sin embargo otros también pueden ser utilizados:

<div> itemprop="review" itemscope itemtype="http://schema.org/Review"><meta itemprop="name" content="Comentario de Irina"/><div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content = "1"/><span itemprop="ratingValue">5</span>/<span itemprop="bestRating">5</span>sonrisas</div><p><time itemprop="datePublished"  datetime="2012-11-28">28/11/2012</time><br/><span itemprop="author" class="usuario">Irina</span></p><p itemprop="description" class="comentario">Este es mi Comentario...</p></div>

Para comprobar si estamos utilizando los microformatos correctamente se recomienda utilizar la herramienta de Google para Webmasters “Rich Snippets Testing Tools” donde se puede incluir un código o directamente una página web. Si comprobamos mi primer código, veremos que cómo resultados obtendremos lo que se muestra en la imagen siguiente:

Por el contrario, si probamos con una página web que tenga comentarios: http://www.turispain.com/casas-rurales/huesca/lacasadelarcoverde podremos observar los resultados. En este caso, la web escogida (Turispain.com) tiene una serie de microformatos incorporados que proporcionan significado semántico a su contenido, lo que ayuda a que los buscadores o cualquier herramienta ratreadora de código sepa distinguir la naturaleza de un contenido.

Google mostrará los resultados de los microformatos en sus resultados de búsqueda de la siguiente forma:

A continuación veremos otro ejemplo de uso de microformatos, que podemos probar utilizando la herramienta de Google para webmasters.

<article itemscope itemtype="http://schema.org/LodgingBusiness">           

<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">           

          <meta itemprop="latitude" content=" 41.6568307" />
           <meta itemprop="longitude" content=" -0.8799101" />

</div>
<figure itemscope itemtype="http://schema.org/ImageObject">           

         <img itemprop="image" src="http://" width="280px" height="229px" alt="Foto"  title="Foto"/>       

</figure>

       <h2 itemprop="name">Mi Empresa</h2>        
       <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">            
             <span itemprop="addressLocality" >Zaragoza</span>, 
             <span itemprop="addressRegion">Zaragoza</span><br/>            
             <span itemprop="streetAddress" >C/Sin Nombre </span>
             <span itemprop="postalCode" >50015</span>        
       </address>        
       <li itemprop="aggregateRating" itemscope itemtype="http://schema.org      /AggregateRating">                        
               <span>Comentarios (<small itemprop="reviewCount">10</small>)</span>            
               <meta itemprop="ratingValue" content="4">
        </li>        
        <div>Precio<br/>                       
              <span itemprop="priceRange">17</span>&euro;</span>        
        </div>
 </article> 

Finalmente, quisiera hacer un breve comentario sobre éste tema, el hecho que utilicemos muchos microformatos no significa que posicionaremos nuestra web en los primeros resultados de Google, ya que ésto llega un mayor trabajo de SEO y SEM, pero sí garantizará que al realizar búsquedas tu web aparezca como resultado relevante diferenciándose de otras web que no le dan un significado semántico a su contenido. Los microformatos se deben utilizar coherentemente, no se trata de poner por poner, si no que hay que saber cuándo y cómo ponerlos, de ahí la necesidad de su comprensión, sugiero que revicen éstas páginas antes de lanzarse a ponerlos: http://schema.org y http://support.google.com/webmasters/bin/answer.py?hl=es&answer=146897&topic=1088472&ctx=topic y esté siempre pendiente de los cambios que puedan surgir sobre éste tema.

Firebug en Firefox

Firebug una extensión del navegador Firefox que nos permite editar webs y hojas de estilo, monitorizar tiempos de carga, depurar javascript y ver los errores en la página además de explorar el DOM.

DOM es el acrónimo de “Modelo en Objetos para la representación de Documentos”, aunque ésta es una mala traducción. El DOM es el árbol jerárquico para la página web y su representación gráfica se asemeja a un organigrama. Con el DOM los programadores pueden trabajar de manera dinámica con la página (a esta tecnología la llamamos DHTML).

Actualmente existen algunas extensiones para Firefox que trabajan conjuntamente con Firebug como es el caso de FireUnit un plugin que nos da la posibilidad de realizar pruebas unitarias de Javascript y mostrará los logs en una pestaña de Firebug.

Instalación

• Lo primero que tenemos que hacer si no lo tenemos instalado es descargar e instalar el navegador
• Mozilla Firefox desde su página oficial. http://www.mozilla-europe.org/es/firefox/
• Y luego añadir los complementos necesarios Firebug, lo puedes encontrar aquí: https://addons.mozilla.org/es-ES/firefox/addon/firebug/
• Y el FireUnit http://fireunit.org/

Cómo trabajar con Firebug
 
Una vez lo tengamos instalado sólo tenemos que pulsar sobre el icono de Firebug que aparece desactivado en la parte inferior derecha del navegador. El icono es una imagen de una especie de escarabajo. Si tenemos algún problema para encontrarlo también podemos dar con el botón secundario del ratón sobre cualquier parte de la página web y al hacer click con botón derecho, elegir la opción “Inspeccionar elemento”. En la parte inferior de la pantalla aparecerá una ventana (el Firebug), dándonos información sobre el elemento de la página web que elijamos o en el que estemos posicionados. En concreto nos aparecerá el código del elemento inspeccionado: las instrucciones que recibe el ordenador para que algo se muestre de una determinada manera.

Pulsando sobre el icono de inspeccionar (icono con una flecha azul) podemos ir recorriendo las distintas partes que forman la página y viendo el código asociado: a través del código podemos identificar colores, tamaños de letra, jerarquías de un elemento dentro de la página, descripción y ruta de una imagen, etc. Por ejemplo si pinchamos sobre una imagen podemos ver como código:

<img alt="imagen.jpg" height="180" src="/images/imagen.jpg" width="225" />

lo cual nos está informando del tamaño en pixeles, la descripción de la imagen, el nombre del fichero, etc. Una vez desplegado el Firebug vemos que posee una barra de herramientas principal donde algunos elementos aparecerán desactivados. Para activarlos sólo tenemos que pulsarlos y darles a activar (habilitar o deshabilitar).

Algunas Pestañas Interesantes:

La pestaña HTML
 
En la sección HTML se muestra, de manera cómoda, el código HTML de la página que en este momento se está viendo en Firefox. Los signos + y - ayudan a revisar cada una de las secciones del código.
Con el botón Inspect podemos seleccionar una parte de la página, la que se seleccionará a su vez en el código HTML.

Utilizando el botón Edit podemos modificar la parte de la página actualmente seleccionada para ver cómo ser vería si modificamos el código. Esto es muy utilizado por los diseñadores web para probar otras imágenes o palabras.

La pestaña Net
 
En la pestaña Net se muestra cada solicitud y respuesta que se produjeron para cargar la página que actualmente está mostrando Firefox. Para hacer análisis de tráfico, esto es una ayuda con respecto a Wireshark, pues en este caso estamos filtrando sólo lo que nos interesa. Para poder realizar el análisis de tráfico es necesario presionar el botón de activación que se muestra en esta pestaña. En la primera columna se indica el método o verbo que se utilizó (GET o POST, usualmente) y parte de la URL que corresponde a esa solicitud. En la segunda columna aparece el código correspondiente a la respuesta de esa solicitud. Luego, en la tercera columna, aparece el dominio que respondió a la solicitud. En la cuarta columna aparece el tamaño de la respuesta (medido en bytes, kilobytes o megabytes, según sea conveniente). Finalmente, en la quinta columna aparecen los tiempos de respuesta de cada solicitud. Al abrir, con el signo +, una de las solicitudes, se pueden ver los detalles de los encabezados (headers, en inglés) de la solicitud (request) y la respuesta (response). Además, aparece el contenido de la respuesta, con código o imágenes, según corresponda.

Uso de FireUnit
 
Algunas de las pruebas que se pueden realizar con este plugin son:

• Simular eventos del navegador
• var input = document.getElementsByTagName(”input”)[0];
• fireunit.mouseDown( input );
• fireunit.click( input );
• fireunit.focus( input );
• fireunit.key( input, “a” );