Sobre posicionamiento se han vertido ríos de tinta, pero poca información es realmente útil y veraz como para ayudarnos a mejorar el posicionamiento de nuestra Web.
En esta conferencia ofrecida en las 1ª Jornada de Negocios en Madrid, Javier Casares hace un repaso a las mejores técnicas empleadas en posicionamiento, se derriban mitos, se repasan tendencias, penalizaciones, algoritmos de búsqueda, buscadores no tan conocidos y sobre el futuro cercano del posicionamiento. Una visión muy enriquecedora ofrecida por uno de los mejores expertos en SEO en España.
La conferencia consta de una hora de duración y está dividida en diez partes. En este post veremos la primera parte, muy pronto colgaremos el resto de la conferencia:
La Web tiene características propias que determinan como se estructura cualquier texto y el modo en que el usuario accede a la información. No hay duda alguna que el modo en que está escrito un texto afecta de manera dramática la experiencia de los usuarios. Hace tiempo hablamos precisamente de esto cuando analizando el patrón de lectura de los usuarios de la web. La conclusión fue que es un error escribir en la web de la misma manera que para un soporte impreso, puesto que los usuarios se comportaban de manera diferente.
La intención de este artículo es introducir varias técnicas y metodología que optimizarón la calidad y legibilidad los textos de nuestras webs.
En primer lugar vamos a explicar la diferencia entre un lector de material impreso y un usuario web. Hay que tener en cuenta varias consideraciones:
La lectura en un monitor es más incómoda que en un texto impreso.
El usuario es impaciente y voraz , porque tiene a su disposición millones de alternativas a la tuya.
¿Por qué debo adaptar la redacción de mis textos para la web?
En la web el contenido es lo más importante: recuerda que lo usuarios se mueven buscando información. Si no presentas tu contenido de forma legible y agradable no será leída por mucha gente, por muy buena y útil que esta información sea.
Atraerás visitas: si tienes buenos contenidos, bien estructurados y fáciles de leer, será más probable que otros usuarios quieran compartirlos mediante enlaces a tu web o en redes sociales.
Ayudará a mejorar tu posicionamiento: será más fácil para los robots de búsqueda rastrear tu contenido mejorando tu posicionamiento.
Tu página será más accesible: esta manera de jerarquizar y escribir contenidos, hará que tu página sea más accesible para personas con discapacidad, aumentando tu número potencial de usuarios.
Técnicas y estrategias
Debemos entender que la forma de estructurar los textos en Internet está determinada más por razones funcionales que por simples razones estéticas, literarias o artísticas. Teniendo en cuenta esto, vamos a ver varias técnicas que pueden ayudar a los usuarios a retener mejor nuestros textos
Estilo de escritura en pirámide invertida : una manera de organizar nuestro contenido es jerarquizándolo de mayor a menor interés, esto es comenzar con las conclusiones. Este estilo es muy eficaz porque nos asegurará que el usuario lea la información más importante cuando abandone nuestro sitio.
Mensajes clave: siguiendo la filosofía del punto anterior, el mensaje principal que quieras dar debe ser evidente desde el primer párrafo. La claridad y la concisión son fundamentales para redactar nuestros contenidos.
Separación en trozos: los textos muy largos se deben dividir y agrupar el contenido en partes significativas, con su respectivos títulos descriptivos para mostrarlo en distintas páginas. Cada página se enlazará con el índice principal del artículo.
Como mejorar la legibilidad
En cuanto a la redacción:
Utiliza frases cortas que expresen una sola idea.
Lenguaje simple e informal: es más adecuado que el elegante o formal, ya que la lectura es más rápida en el primero.
Contenidos escaneables: para que puedan ser mejor visualizados, es necesario maquetar nuestros textos con distintos niveles de encabezados que describan el contenido de cada página, usa listas siempre que puedas.
Jerga: Lo más probable es que el usuario no sepa nada del tema del que habla su web por ello elimine la jerga específica de su contenido, recuerde segundo primer punto de esta lista.
Texto Abreviado: omite palabras y frases que no aporten contenido relevante.
Propaganda: los usurarios detestan la publicidad y aprenden pronto a ignorar los mensajes publicitarios, incluso cuando intentan aparecer como información objetiva camuflada en el texto. Además, esta forma de redacción impone a los lectores una carga mental extra, que les obliga a filtrar las exageraciones para llegar a las cuestiones concretas. Esto hace lenta su lectura y finalmente los hace huir del Sitio. El usuario viene a tu sitio en busca de información útil, no de publicidad.
Verbos expresivos: El uso de un verbo preciso comunica con mayor fuerza lo que usted desea expresar. También elimina redundancias y reduce la longitud del texto. Por ejemplo:
Tomar una decisión / decidir
Proporcionar apoyo / apoyar
Hacer uso de / usar
Sirve para explicar / explica
Efectuar un examen / examinar
Juegos de palabras y localismos: no aludas a referencias culturales o bromas de ámbito geográfico limitado. Lo que tu entiendes que puede ser gracioso para alguien de tu región, puede que no sea entendido por los usuarios de otra región distinta o en el peor de los casos, puede que sea ofensivo para ellos.
Eufemismos: huye de ellos, muchas veces lo políticamente correcto no es más que una forma de esconder la verdad.
En cuanto al diseño:
Deja espacio alrededor de sus textos.
Minimiza la anchura de sus párrafos
Usa colores de alto contraste que diferencien bien el texto del fondo.
Usa fuentes grandes (preferiblemente 12 puntos) y si es posible sans-serif . Las fuentes pequeñas se deben dejar para el texto que poca gente lee. Por ejemplo, descargo de responsabilidad.
Utiliza negritas para resaltar las partes más importantes de sus textos. Además será un buen recurso de color para romper la uniformidad del texto. Utilizar la negrita en exceso puede ser contraproducente.
Es mejor evitar marcar párrafos enteros con cursivas o mayúsculas. No estamos acostumbrados a leer la letra impresa de esa manera.
Internet Explorer 6 sigue siendo uno de los navegadores con más cuota de mercado, pero es también el más odiado por los desarrolladores. De hecho, es considerado por algunas publicaciones como el peor programa de la historia, es el navegador más inseguro y demasiado viejo e ineficaz para aguantar casi una década de innovaciones en los estándares web. Incluso a Microsoft le encantaría deshacerse de él. Sin embargo, a pesar de las campañas en su contra, lo más probable que no vaya a desaparecer tan rápido como quisiéramos. ¿Como puede ocurrir esto?, en este artículo intentaremos dar algunas respuestas.
Internet Explorer 6 sigue siendo uno de los navegadores más populares de la red con alrededor de un 20% de cuota de mercado y sólo por detrás de Internet Explorer 8 y Firefox. Realmente muchos usuarios no ven que esta versión de Explorer sea un verdadero problema y no quieren actualizarse a versiones más modernas porque no lo ven una necesidad, por vagancia o simplemente por ignorancia. Pero la cuota de mercado nunca ha sido un impedimento para que Microsoft actualizase su software con regularidad, ¿en que se diferencia este caso de el resto?. Ahora veremos varias razones:
Las empresas y su dependecia y Internet Explorer
Un poderoso argumento para seguir dando apoyo a IE6 es que una importante proporción de usuarios de Internet Explorer 6 son grandes empresas. En dichas empresas el software está bloqueado y desactualizado, ante el temor de perder funcionalidad frente a aplicaciones específicas o páginas internas. Si una gran empresa ejecuta miles de ordenadores, cualquier cambio tiene que ser probado con cientos de aplicaciones para asegurarse de que todo va a seguir funcionando correctamente, por esa razón son tan poco partidarios de actualizar sus navegadores. Además, la actualización de software a gran escala es cara y percibida como un gasto inútil, ¿para que cambiarlo si ya nos funciona bien?.
Además una gran parte de las grandes empresas siguen utilizando Windows XP, muchos de ellos utilizan el navegador que viene con él. Desde su punto de vista, es la opción más simple y barata.Otro freno para el progreso es una mala programación. Algunas empresas desarrollaron intranets y sitios web para IE6, en lugar de los estándares web. Si sus aplicaciones internas están optimizadas para IE6, evidentemente no se podrán actualizar a IE8 o Firefox sin cambiar sustancialmente sus aplicaciones. Se trata pues de otro gasto evitable.
Los gobiernos están en el misma situación que las grandes corporaciones, por ejemplo,el gobierno británico es un gran usuario de IE6. Algunos Ministerios se están actualizando a Internet Explorer 7, pero el Ministerio de Defensa, que tiene 300.000 ordenadores de todo el mundo se mantiene con IE6, a pesar de la gran contradicción que supone utilizar el navegador más inseguro de todos en las instalaciones que necesitan más seguridad.
El apoyo de Microsoft
El 14 de abril de 2009, Microsoft se retiró de soporte técnico principal para Windows XP, y por lo tanto para Internet Explorer 6. Sin embargo, en el Ieblog Microsoft informaba que no tiene la intención de retirar el soporte extendido para este sistema operativo hasta el 8 de abril 2014 ,(cuando Internet Explorer 6 tenga 13 años de existencia). Esta decisión fue tomada en gran medida por la gran cantidad de entornos laborales que necesitan de Internet Explorer 6, como hemos mencionado anteriormente.
En ese mismo artículo, el director de proyecto de Internet Explorer 8, Dean Hachamovitch escribió:
El punto de vista técnico de IE6 comienza con su sistema operativo. Dejar de brindar soporte a IE6 no es una opción porque estamos comprometidos a apoyar la versión de IE que viene incorporada a cada sistema operativo durante el ciclo de vida de ese producto.
Nosotros cumplimos nuestras promesas. Mucha gente espera que las aplicaciones incluidas originalmente con su sistema sigan trabajando sin importar la obsolescencia que cada producto pueda tener. Como ingenieros, queremos que la gente actualice a las últimas versiones y tratamos de facilitárselo al máximo, sin embargo, la opción de actualizar pertenece finalmente a la persona responsable de cada PC”.
A pesar de estas declaraciones, Microsoft también está invirtiendo tiempo y recursos de trabajo con las grandes empresas para romper su dependencia de IE6. Estamos dispuestos a hacer entender a nuestros clientes que respecto a la seguridad IE8 es el mejor navegador. Le protegerá contra el phishing y ataques de ingeniería social de malware, y además es gratuito.
La respuesta de Google y los desarrolladores
En google no ven este asunto de la misma manera que Microsoft y sobretodo tras los ciber-ataques a varias cuentas de Gmail, producidas por un agujero de seguridad en Explorer 6. Por ello desde google se confirmó que dejará de soportar IE6, por lo que aplicaciones como Google Docs y Sites podrían dejar de funcionar en el futuro.
Además se reconoció que a finales de 2010 eliminará el acceso a Gmail y Calendar a los internautas que utilicen esta versión de Explorer y que a partir del 13 de marzo las nuevas funciones de Youtube no se diseñarán pensando en al compatibilidad con IE6. Los vídeos podrán seguir viéndose, pero no se garantiza que con el tiempo los usuarios puedan usar correctamente la página. Esto puede ser la puntilla al veterano navegador.
Por parte de los desarrolladores que llevan años boicoteando y pidiendo la muerte de Explorer 6 esta es la mejor noticia en años. De hecho en una iniciativa con un apoyo sin precedentes, se ha montado un funeral por el navegador que se celebrará el próximo cuatro de marzo.
Proseguimos nuestro pequeño estudio de navegadores poco conocidos. En esta ocasión vamos a ver dos navegadores exclusivos para Windows y otros tantos desarrollados en exclusiva para MAC.
¿Te suenan todos estos logotipos?
Lunascape
Lunascape es el primer y único navegador con triple motor de renderizado. Se trata de un navegador híbrido que funciona tanto con Gecko, como Trident, y WebKit. También es compatible con todos los plugins y complementos de Firefox e Internet Explorer. Por ahora no hay soporte para las extensiones de Chrome, pero todo apunta a que en próximas versiones esta opción estará también disponible.
Para desarrolladores que deben comprobar si sus webs se muestran correctamente en todos los navegadores puede ser una solución perfecta. De hecho, se han incluido la muy útil opción “split tab display”, con la que puedes ver la misma página renderizada con cada uno de los motores simultáneamente.
K-Meleon es un navegador para Windows muy rápido y ligero. Utiliza el motor de renderizado Gecko de Mozilla. Visualmente se asemeja a Internet Explorer, con la diferencia de que tiene menos características y funciones, para optimizar el uso de memoria y cargar las páginas más rápidamente.
Como utiliza la interfaz nativa de Windows en lugar de XUL del Firefox, en K-Meleon no se pueden instalar complementos de Firefox. Como hemos dicho antes, la principal ventaja de este navegador, es su uso muy reducido de memoria, lo que le convierte una buena opción para Netbooks y portátiles.
Shiira es un navegador Web basado en Web Kit y escrito en Cocoa. Los desarrolladores han intentado aparejarlo en estabilidad y velocidad a Safari, por lo que puede ser uno de los navegadores más rápidos y funcionales para los usuarios de Mac. Una de sus ventajas principales es su diseño elegante y su espectacular interfaz de usuario.
Shiira introduce en el uso de pestañas la función Exposé, lo que nos permitirá visualizar una imagen de todas las pestañas y seleccionar la que nos interese. También podemos implementar una visualización basada en un efecto de pase de página utilizando Core Image, pero para ello necesitaremos un Mac bastante potente.
A pesar de que Mozilla tiene una versión para Mac de Firefox, viene desarrollando otro navegador para conseguir la mayor integración posible con este sistema operativo. El resultado ha sido Camino. Para conseguir esta mayor integración con Mac, se ha abandonado la interfaz de usuario basada en XUL utilizada por la mayoría de las aplicaciones de Mozilla, a favor de Cocoa. Utiliza el motor de renderizado Gecko, lo que no es muy común en las aplicaciones de Mac.
Camino cuenta con funciones muy parecidas a Firefox: navegación con pestañas, protección antiphising y antimalware, bloqueo de ventanas y gestor de contraseñas. Una función muy interesante es la vista de pestañas, que permite ver todas las pestañas abiertas en una sola página para seleccionar fácilmente la que deseamos.
Lightbox es una aplicación desarrollada en JavaScript. Este script ha ganado popularidad y distribución gracias a su simplicidad y elegante estilo, además de su fácil implementación. Permite al usuario ver una versión original y ampliada de imágenes sin necesidad de ir a otra página, además de ofrecer una herramienta simple y profesional para el mostrado de imágenes en un sitio web.
Existen una gran variedad de clones de Lightbox que podemos ver de la mano de anieto2k.
Sin embargo aquí vamos a mostraros un ejemplo de un lightbox accesible, es decir una galería de imágenes usando JavaScript no intrusivo y un correcto marcado semántico.
Antes que anda debemos de disponer de 3 archivos para que nos funcione la galería de imágenes con LightBox; jquery.lightbox-0.5.css, jquery.js y jquery.lightbox-0.5.js. Estos 3 archivos, lógicamente debemos ponerlo en nuestro código HTML para poder hacer uso de ellos. Así cuando se llame a dicha función no falte nada. Además de los archivos os dejo las imágenes que se usan como elementos de navegación en lightbox. Para no descargar todos los archivos por separado. Os dejo un archivo zip con todos los ficheros que se usan en el ejemplo: Descargar ejemplo. A continuación explicamos detalladamente como implementar nuestra galería de imágenes:
HTML
Como podemos ver en el código HTML del ejemplo. Tenemos el enlace que apunta a la imagen con el atributo href. Si el JavaScript está activado, funcionará con el efecto de Lightbox, y en el caso de que no lo esté funcionara como un enlace a una imagen.
Para que el Lightbox funcione, debemos poner esta línea de JavaScript donde especificamos los enlaces. De esta manera llamará a la función y usará las imagenes que se encuentra dentro de los elementos de enlace:
JavaScript
Con lo explicado, tendríamos lo suficiente para tener nuestra propia galería de imágenes. Ya tenemos un HTML correcto, un Javascript no intrusivo y una alternativa a dicho JavaScript. El resultado final podemos apreciarlo en el siguiente enlace:
¿Nunca te has preguntado porque los diferentes navegadores visualizan las mismas páginas de diferente manera?, esto es debido a los motores de renderizado.
¿Entoces que es un motor de renderizado?, pues es la parte de un navegador que toma el contenido marcado, (como XML o HTML), lo interpreta de manera visual y lo presenta visualmente a los usuarios. Todos los navegadores web incluyen algún motor de renderizado.
El termino motor de renderizado, (layout engine o rendering engine en ingles), se hizo popular cuanto Mozilla, desarrolló el suyo de manera libre y diferenciado del propio navegador, siendo posible de esta manera reutilizarlo para otros navegadores. Ahora veremos algunos de los motores más importantes.
Gecko
Gecko es un motor multiplataforma y libre originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla.
Solía ser criticado por su enorme complejidad y uso de memoria. La mayor parte de estas debilidades se subsanaron en Firefox 3 con el nuevo motor Gecko 1.9 Con este motor se logró disminuir drásticamente el uso de memoria, incluso superando a Safari y Opera. Estos cambios permitieron a Gecko pasar el test Acid2 y soportar algunos elementos de CSS 3 (ya implementados en WebKit). Con la llegada de Firefox 3.1, se implementó Gecko 1.9.1 que incluía TraceMonkey, el nuevo intérprete JavaScript. Las futuras mejoras, harán que Gecko sigua siendo una opción muy sólida frente a WebKit.
Aquí podemos ver los pasos que realiza el motor de renderizado Gecko hasta mostrar la página web
KHTML/WebCore:
KHTML es el motor de renderizado HTML de código libre desarrollado para el navegador web de KDE: Konqueror. En el 2003 fue adoptado por Apple para su navegador Safari. KHTML se encuentra liberado bajo la licencia LGPL.
WebKit
WebKit es un motor de render HTML de código abierto, desarrollado por Apple sobre la base del código KHTML, para Konqueror. Se trata de un motor sumamente liviano, reconocido por tener un código compacto, simple, claro y riguroso por su respeto a los estándares HTML, además usar poca memoria para su funcionamiento.
Desde Google Chrome también lo adaptó, WebKit está ganando popularidad a pasos agigantados. Y es justamente esta creciente popularidad que, para algunos, comienza a poner en duda la relevancia de Mozilla Gecko como motor HTML.
Trident (también conocido como MSHTML)
El Motor de renderizado Trident de Microsoft es considerado por la mayoría de desarrolladores como el cáncer de Internet. Es el motor menos compatible con los estándares, lo que durante mucho tiempo ha supuesto que un gran número de páginas web no estén diseñadas para ser compatibles con los estándares, sino para ser compatibles con Explorer.
La versión 4.0 de Trident, que acompaña Internet Explorer 8, fue la primera versión en pasar el test Acid2 ,(casi 5 años después que safari), cuando todos los demás motores pasan sin problemas el test Acid3 .
Entonces la pregunta del millón es , si es tan malo, ¿porque se empecina Microsoft en seguir desarrollándolo? . Lo más lógico es que no hayan querido romper con todas las webs diseñadas para su navegador, por aquello de no dejar en la estacada a sus clientes más fieles.
Presto
Es el motor de código cerrado desarrollado por Opera Software para el navegador Opera. Fue introducido en la versión 7.0 de este navegador reemplazando al motor Elektra que se usó para las versiones 4, 5 y 6 de este navegador.
La versión 2.2 de Presto fue el primer motor en lograr pasar las pruebas Acid3Test al 100%. Esto hace que Opera 10 sea probablemente en el navegador con mejor soporte para los estándares web.
Comparativa
Por último enlazo una comparativa de velocidad entre navegadores realizada por SixRevisions.
Las etiquetas de cabecera (no confundirse con la etiqueta HTML <head>) se utilizan para jerarquizar, estructurar y dar coherencia al contenido de una página. Hay seis tamaños de etiquetas de cabecera, empezando con <h1>, la más importante, y terminando con <h6>, de menor importancia.
Las etiquetas <strong> y <em> sirven resaltar las palabras importantes dentro de nuestra web. Esto visualmente contribuye a mejorar la legibilidad de la misma y semánticamente sirve para señalar contenido con un peso específico mayor dentro de nuestros textos.
Si son utilizadas correctamente, estas etiquetas ayudarán a que nuestras palabras clave, adquieran un peso mayor desde el punto de vista del buscador. Se trata pues de encontrar una buena estrategia para garantizar la eficacia de estas etiquetas. En este artículo veremos algunas de estas estrategias y hablaremos sobre el correcto uso de estas etiquetas.
Recuerda que el posicionamiento trata de dar la mayor visibilidad posible al contenido de nuestros sitios web. Todos estos consejos no son inútiles si tus contenidos no son atractivos ni interesantes para los usuarios. Antes de aplicar estas recomendaciones asegúrate de tener unos textos bien redactados y un nicho palabras clave competitivo. Sea cual sea la temática de tu página, intenta ofrecer siempre contenidos frescos y novedosos.
Consejos de posicionamiento
Utilizar correctamente la estructura encabezados: define previamente cuáles son los puntos más importantes y los puntos secundarios del contenido de tu web. Seguidamente englóbalos en la etiqueta de cabecera que resulte más adecuada, tanto semánticamente con desde el punto de vista del posicionamiento. No utilices las etiquetas de cabecera cuando etiquetas como <em> y <strong> puedan ser más recomendables.
Marca el contenido como cabecera cuando realmente tenga sentido hacerlo: crea una estructura de encabezados que jerarquice la página correctamente y de esta menara ayude a los buscadores a rastrear el contenido de tu web. No utilices las cabeceras para dar formato visual al texto, para eso ya tenemos CSS
Usa los encabezados con moderación: demasiadas encabezados pueden hacer que los usuarios encuentren difícil de entender el contenido. El uso excesivo de las etiquetas de cabecera puede ser contraproducente, porque se puede dispersar el peso de las palabras clave que realmente quieras posicionar.
Ten en cuenta que: aunque las palabra marcadas con <strong> y con <em> adquieran un peso específico, este será probablemente mucho menor que si estuvieran marcadas como encabezados.
Intenta no marcar demasiadas palabras con la etiqueta <h1>: de este modo no se debilitará el peso de las palabras clave. Introduce en esta etiqueta un contenido similar a la etiqueta <title> y asegúrate de que en ambas etiquetas estén presentes las keywrods que desees posicionar.
La etiqueta <h2> se puede utilizar varias veces en una misma página: puesto que cumple la función de subtítulo. Por lo tanto podremos introducir en ella aquellas palabras clave secundarias que no hemos podido insertar en la <h1>.
Utiliza CSS de manera adecuada: utilizar una hoja de estilo externa, tiene innumerables ventajas. Se puede reducir considerablemente el peso de nuestras páginas, aumentar la productividad al facilitar posteriores cambios de diseño y separar contenido de diseño, con lo que cumpliremos con los Web Standard. Pero utilizar CSS incorrectamente, puede provocar que se deteriore el posicionamiento de nuestro site. Si definimos por hoja de estilo los encabezados, las negritas o las cursivas y estas etiquetas no están en código, perdemos estas herramientas que nos ayudarán a posicionar mejor nuestro site.
Desde Maestros del Web, nos hacen saber de una herramienta innovadora para generar bocetos para tus diseños Web. La aplicación es muy sencilla e intuitiva, de una manera rápida podemos crear un boceto de la Web que vamos a diseñar.
La aplicación se llama Balsami Mockups. Con esta herramienta podemos enseñarle a un diseñador como queremos que sea la estructura de nuestra Web, ya el diseñador se encargará de todo lo demás. Podemos también compartir nuestros bocetos con otros que usen la misma aplicación, y así poder modificarlo dependiendo de nuestras expectativas en el diseño.
Os dejo un video demostrativo de la aplicación, así en unos minutos os podéis hacer una idea de como funciona y lo rápido y sencillo que resulta:
No sólo esta orientado al diseño Web, también a aplicaciones de escritorio, aplicaciones para Iphone, etc. La aplicación no es gratuita, pero podéis descargaros la versión de prueba que funciona al 100%. Con esta herramienta nos evitaremos gastar tinta y papel. Es muy práctico en este aspecto, ya que podemos mostrarlo al Diseñador o viceversa y compartir ideas. Finalmente os dejo el enlace de descarga de la aplicación Balsami Mockups:
Posicionamiento Web 
Jorge López 
2 Comentario 
