En la sección anterior hemos analizado el HTML semántico. Sin embargo, la semántica va mucho más allá del HTML. Por ejemplo, si utilizamos el elemento font en la cabecera para definir la tipografía de un texto, aparecerá otro problema: no hay una diferenciación clara entre la estructura y la plantilla. Aquí el problema no radica exclusivamente en que el elemento font carezca de una semántica adecuada, sino que se ha usado el HTML con el propósito de crear la plantilla. Debe quedar claro que el HTML se usa para realizar la estructura mientras que el diseño de la plantilla se define mediante el uso de CSS.

¿Qué es CSS y por qué usarlo?

CSS son las iniciales de Cascading Style Sheets (en español, hojas de estilo en cascada) y se refiere a una técnica utilizada para determinar la apariencia de una página web. El HTML son las paredes de la casa y el código CSS sería la pintura y las cortinas que hacen que el HTML adquiera una apariencia atractiva. La plantilla lo incluye todo, desde el color de los encabezados o los enlaces, hasta la posición de los elementos dentro de la página web.

¿Por qué usar CSS? Si has leído con atención la sección anterior, la respuesta es obvia: se comienza construyendo la estructura (HTML), pero la plantilla aún debe terminarse y para lograrlo se utiliza la hoja de estilo. Entonces, para separar la estructura de la plantilla, a partir de este punto no se usarán más las tablas ni las etiquetas font, solo CSS.

El ejemplo que se muestra a continuación permite comprender con mayor profundidad el significado del término CSS. Retomando el código HTML del menú que usamos anteriormente, el código HTML

es: <ul>

<li> <a                 href=»http://www.onetomarket.es/sem-campanas-ppc/»

title=»SEM, campañas PPC»>SEM, campañas PPC</a></li>

<li><a                                  href= «http: / / www. onetomarket. es/estrategia-de- redessociales/» title=»Estrategia de Redes sociales»>Estrategia de Redes sociales</ a></li>

<li> <a                        href=»http://www.onetomarket.es/email-marketing/»

title=»Email marketing»>Email marketing</a></li>

</ul>

Sin CSS su aspecto visual será el siguiente:

• SEM_; campanas PPC
• Estrategia de Redes sociales
• Email marketing

Con CSS el menú adquiere un aspecto más elegante. El código CSS que se muestra a continuación ayuda a crear un fondo naranja para el menú, el texto es en color negro, se utiliza otro tipo de letra, se han eliminado los puntos que fungían como viñetas y se ha creado un efecto mouse over (cambio de color al pasar el cursor por el menú). A continuación se puede ver una imagen del resultado final.

Menú con hoja de estilo

El poder del CSS radica en que permite cambiar la plantilla del sitio web sin tener que variar el código HTML. Esto se ilustra en el ejemplo que aparece a continuación: con el mismo código HTML que se había utilizado para crear el menú, ahora hemos realizado un menú horizontal, ajustando solamente el código CSS.

CSS y navegadores

Años atrás, el uso de CSS tenía un gran inconveniente: no todos los navegadores lo soportaban correctamente y en ocasiones algunos lo interpretaban erróneamente. Por ejemplo, Internet Explorer era uno de los navegadores que presentaba dificultades con el CSS. Esto hacía que fueran necesarios una gran cantidad de cambios para que la apariencia del sitio webfuese atractiva en todos los navegadores. No obstante, esta situación ha mejorado, pese a que todavía hay muchas diferencias en la visualización en pantalla entre los navegadores más utilizados.

Para desarrollar sitios web se recomienda visualizar con varios navegadores el resultado obtenido ya que la interpretación del CSS difiere entre navegadores como Firefox¹³, Opera¹⁴, Safari¹⁵ y Chrome⁸. Nuestra experiencia demuestra que, cuando se trata de crear una página web que funcione bien en todos los navegadores, seguir este consejo puede ahorrar mucho tiempo. Mediante un el uso avanzado de CSS, en la actualidad es posible crear menús desplegables y otras funcionalidades que hasta el momento estaban reservadas exclusivamente a JavaScript, en un futuro con CSS3 se ampliarán mucho más las posibilidades de diseño e interacción por lo que a nivel SEO será interesante poder potenciar interactividad y optimización para buscadores.

Después de haber creado la estructura y la plantilla, el sitio webya está básicamente operativo. Para continuar con la analogía que venimos utilizando: la casa ya está lista para entrar a vivir. No obstante, al sitio web aún pueden añadírsele otras funcionalidades que faciliten su uso. Para lograrlo se utiliza JavaScript (se podrán reemplazar imágenes dinámicas, validar formularios o hacer cálculos) y funcionalidades que hacen que la págna sea más interactiva como el uso de ajax mediante librerias como jquery, Dojo, Mootools, …

JavaScript: Cómo usarlo

Lamentablemente, JavaScript se utiliza a menudo de forma incorrecta. Por ejemplo, con JavaScript se puede crear un menú desplegable (un menú con múltiples niveles que se muestran cuando se hace clic o mediante un efecto mouse over), pero como los buscadores no comprenden este lenguaje, no podrán seguir los enlaces que se encuentran en el menú. Esto significa que para los buscadores será difícil, o incluso prácticamente imposible, rastrear el sitio web. Lo mismo ocurre con los enlaces dentro del contenido o en cualquier otro lugar del sitio web. Cuando un enlace tiene el atributo onclick pero no incluye el elemento a junto al atributo href, los buscadores no lo seguirán.

La única forma correcta de enlazar una página web es usando el elemento a con el atributo href.

Además, los buscadores no leerán el contenido cargado a través de JavaScript por lo que es importante incluir todo el contenido que se desea indexar en el código HTML. Un ejemplo muy usual es la navegación por pestañas, donde cada pestaña posee su propio contenido. Sí que se puede usar JavaScript con este fin si primero se incluye todo el texto en el código HTML y a continuación coloca la pestaña de navegación usando JavaScript.

Una vez más, al igual que con el CSS, la inserción de esta capa no debe ser un requisito para utilizar el sitio web, solo debe ser una herramienta para mejorar la usabilidad y apariencia del mismo.

¿Quieres hacer tu página más interactiva y aplicar JavaScript de forma que no afecte al SEO? Prueba jQuery⁹. Esta es una biblioteca donde se encuentra un gran número de aplicaciones JavaScript que han sido creadas de manera adecuada (como menús desplegables, funcionalidades arrastrar y soltar, etc).

En ocasiones puede ser interesante utilizar JavaScript para determinados enlaces, para no comprometer el uso de enlaces con anchor text específico, en ese caso puede ser interesante utilizar javascript como método para construir el enlace, pero esto ocurre en casos muy reducidos. Esta técnica puede resultar igual de peligrosa como avanzada si no se supervisa correctamente a nivel de SEO técnico.

AJAX

AJAX es una técnica que permite ejecutar secuencias de comandos del servidor usando JavaScript. Normalmente, es necesario recargar la página web pero AJAX hace esto de forma automática por lo que es muy útil, después de todo, ¿no es extremadamente positivo que el usuario pueda navegar por el sitio web sin tener que esperar continuamente que carguen las páginas?

Sin embargo, de su principal beneficio surge su debilidad: como las páginas web no se recargan, la URL no cambia por lo que se puede acceder a todas las páginas desde una misma URL. Esto hace que una página específica no se pueda incluir dentro de favoritos o enviar a un amigo, tampoco funciona el botón atrás del navegador, de manera que la usabilidad de la página se limita.

El principal problema de AJAX es de cara a los buscadores, los buscadores no leen JavaScript ni navegan utilizándolo, los buscadores no verán más allá de la primera página web desde la que entraron. En síntesis, los buscadores y AJAX no se llevan muy bien por lo que regresamos al punto anterior: una capa extra no puede ser un requisito para que una webfuncione adecuadamente o se indexe por completo.

¿Significa esto que no se debe usar AJAX? Por supuesto que no, AJAX es una opción excelente para mejorar la usabilidad de un sitio web en otros supuestos. Por ejemplo, la posibilidad de arrastrar y soltar elementos en el carro de la compra, o en formularios que se agrupan a partir de decisiones anteriores. De hecho, son muchos los ejemplos que podrían citarse en los que AJAX mejora la usabilidad, pero siempre se debe tener en cuenta que el sitio webtambién debe funcionar sin AJAX.

Los buscadores han hecho grandes esfuerzos por mejorar su lectura de JavaScript, pero aún queda mucho camino por andar. La razón principal por la que se ejecuta JavaScript es para detectar el cloaking (véase el capítulo 1) y el spam.

Flash

Todas las reglas de JavaScript se aplican a Flash. Flash puede ser una gran herramienta que mejore la usabilidad y cree efectos visuales sorprendentes, pero debemos asegurarnos de que no se convierta en un requisito imprescindible para que el sitio web funcione adecuadamente. Si se utiliza la navegación Flash (como por ejemplo, en un mapa del mundo), también debe existir un HTML alternativo a disposición del usuario.

De la misma forma, el contenido mencionado en Flash no será indexado. En los últimos años los buscadores han perfeccionado la indexación del Flash, pero aún existen algunos problemas que dificultan una integración total. Hay que tener en cuenta que esta indexación que se ha producido durante los últimos años de archivos flash no se ha traducido en posicionamiento, que son dos términos diferentes.

Menú desplegable con CSS

Como decíamos, los buscadores no leen ni ejecutan JavaScript por lo que es importante que todos los elementos del menú estén incluidos en el HTML. No obstante, esto puede ser un problema en el caso del menú desplegable, ya que todos sus elementos son visibles de forma

instantánea en el sitio web. Suckerfish-menu¹⁶ es la solución ideal para este problema: el menú tiene tanto HTML, como CSS e incluso un poco de JavaScript. En este ejemplo, se incluye JavaScript para asegurar la compatibilidad con navegadores más antiguos como Internet Explorer 6 o sus versiones anteriores. Los nuevos navegadores como Firefox, Internet Explorer 7, Opera y Safari solamente necesitarán HTML y CSS.

Reemplazo de las imágenes

Por razones técnicas, en el diseño del sitio webexiste un límite máximo de tipos de letras que se pueden utilizar. Esta restricción se debe a que los tipos de letra instalados en un ordenador personal pueden no estar disponibles en otros. Como regla general, existe aproximadamente solo una docena de tipos de letras que siempre están instaladas en la mayoría de los sistemas operativos. Aun así, si se quiere llamar la atención del usuario utilizando un tipo de letra diferente, se pueden crear imágenes para la cabecera o los encabezados. No obstante, este cambio puede hacer que los buscadores necesiten más tiempo para comprender el contenido o incluso, podrían ser incapaces de leerlo. La solución a este problema está en lo que se conoce como “reemplazo de imágenes”. Existen dos formas de hacerlo:

Un reemplazo de imagen con CSS funciona de la siguiente manera: el contenido HTML incluye un elemento h1 que los buscadores leerán e indexarán normalmente. Entonces se usa el CSS para reemplazar el texto con una imagen; el texto desaparecerá de la pantalla y se coloca la imagen en su lugar. Código con el encabezado h1.

El código HTML

<hi>Este es el encabezado</hi>

El código CSS

hi {

text-indent: -999em;

overflow: hidden;

height: 25px;

background: url(«achtergrond.png») no-repeat;

}

Siempre debemos asegurarnos de que el texto en la imagen sea el mismo que el texto en HTML. Antiguamente esta técnica se utilizaba indiscriminadamente para incluir textos ocultos por lo que en la actualidad los buscadores son muy cautos en su análisis. No obstante, siempre que el texto de la imagen y el código HTML coincidan, no habrá problemas.

El método que se ha descrito con anterioridad funciona perfectamente pero su desventaja es que habrá que crear una imagen para cada encabezado, opción no muy operativa si existen 10 páginas web por la cantidad de trabajo que implicaría. Otra opción sería generar automáticamente estas imágenes basándose en el contenido, pero es una tarea laboriosa que ralentiza el sitio web.

Una buena alternativa es un reemplazo de imagen con Flash. El reemplazo de imágenes con Flash sIFR¹⁷ es una de las herramientas que está ganando cada vez más popularidad. Al usar IFR se puede convertir el texto HTML a flash on-the-fly (en español, flash al vuelo) mediante JavaScript. Esto proporciona un método de trabajo rápido y funcional con el que se puede utilizar cualquier tipo de letra.

CorelDraw

El inconveniente principal de utilizar estas técnicas es a nivel visual ya que muchos usuarios verán la versión html y como en esta se transforma la tipografía. Puede llegar a ser molesto o ralentizar la carga de la página.

Hay infinidad de programas que permiten crear de manera sencilla y rápida un sitio web, con solo arrastrar y soltar se pueden crear páginas web aparentes. Sin embargo, suele ocurrir que estos programas no son tan perfectos como parecen a primera vista, ya que hacen caso omiso de casi todos los aspectos que se han analizado en este capítulo. Muchos de ellos utilizan tablas para crear la plantilla y esto genera una cantidad de código innecesario considerable; además, la construcción por capas no es precisamente su punto fuerte. Por eso, para crear un sitio weblo mejor es utilizar un editor de texto simple (después de todo, no se aprende matemáticas usando la calculadora). Dedicar tiempo y esfuerzo a escribir el código nospermitirá aprender cómo funciona el HTML y el CSS y conocer qué beneficios aportan al sitio web.

En este capítulo hemos abordado la importancia de crear un sitio weben capas. Se comienza con la estructura y se van añadiendo capas encima de esta. Es importante asegurarse de que cada capa se haya añadido separadamente de manera que no se mezcle con el resto de las capas.

Sobre todo, es importante usar el sentido común. Cuando se escribe el HTML se deben considerar las funciones que cumplen cada una de las partes del sitio web, ya que así será relativamente fácil hallar el código que necesitamos. De esta forma se puede crear un sitio web optimizado, tanto para los buscadores como para los navegadores.

En los últimos meses, los navegadores empiezan a interpretar HTML5 y CSS3, que es la norma del W3C por la que se se regirán las webs en un futuro, de hecho, hay ya muchas webs desrrolladas con esta tecnología y a nivel SEO la experiencia es bastante satisfactoria.

HTML5 va a suponer un cambio en la concepción de las estrategias SEO ya que su código fuente facilita la comprensión del contenido a los buscadores, y mediante el uso de microdatos, se abre una nueva dimensión SEO.

Html semántico

• Uso de divs vs tablas
• Utilizar listas para maquetar menús
• Utilizar H1 en todas las páginas y H2, H3 correctamente anidado
• Utilizar correctamente las metaetiquetas
• Verificar el diseño en varios navegadores
• Revisar funcionalidades respecto a la indexación (uso de flash, javascript, ajax, …)