programacion web

HTML (acrónimo de HyperText Markup Language) es el pilar fundamental de una de las caras visibles de Internet para los usuarios, la WWW. Teniendo esto en cuenta es que consideramos interesante conocer algunas novedades de su próxima versión, conocida como HTML5.

La característica más destacada durante esta previa es la posibilidad de visualizar videos sin apelar a plug-ins de ningún tipo, un punto a favor tanto en términos de compatibilidad como de estabilidad y velocidad. Sin embargo, hay otras noticias igualmente agradables que quizá terminen siendo aún más determinantes para el día a día de los internautas.

HTML5 incorporará, entre otras cosas, Web Sockets. Esta función provee de una API ideada con el fin de mantener una conexión fluida y permanente entre página-servidor, de forma que ya no sería necesario realizar una petición por cada actualización. Gracias a Web Sockets, posiblemente podamos disfrutar de una cloud computing mucho más eficiente y segura de aquí en más.

Otra de las funciones nuevas es Web Storage, preparada para mejorar el funcionamiento en dispositivos sin conexión o con conexiones intermitentes (caso de los smartphones) almacenando mayores cantidades de información en el navegador y recuperándolos con más facilidad.

También se verán mejoras en la universalidad del renderizado de las páginas, algo que hasta ahora se ha logrado muy a medias pero resulta muy importante en vista de la durísima lucha “IE vs. Firefox” y el terreno ganado por opciones adicionales (caso de Opera y Chrome). Con el nuevo parser, HTML5 manejaría mejor los errores de código, neutralizando el manejo individual de los navegadores y reemplazándolo por una respuesta universal.

Dentro de la programación HTML, las etiquetas son el pilar sobre el cual se estructura la sintaxis del lenguaje. Existen miles de ellas, pero tres de ellas son las más conocidas, sobretodo por su aporte en términos de posicionamiento y usabilidad: “title”, “meta-keywords” y “meta-description”. De ellas hablaremos en este artículo.

La primera es la que brinda un título a la página, algo que normalmente resulta ser también lo primero que un usuario ve si aparecemos en los resultados de su búsqueda. Se utiliza de la manera tradicional, encerrando el contenido entre las marcas “<title>” y “</title>”. Un buen título es comprensible, conciso, coherente y atrayente, a la vez que contiene palabras clave o “keywords” relacionadas.

En cuanto a la etiqueta “meta-keywords”, podemos decir que se encuentra en el grupo de las “meta-tags”, desempeñando la función de brindar una lista de palabras clave relacionadas con el contenido de cada página. Normalmente no deberían ser más de seis diferentes, definiéndoselas mediante la siguiente expresión: “<meta name="keywords" content="keyword1, keyword2, keyword3" />”.

Finalmente, tenemos la etiqueta “meta-description”, integrante del mismo grupo que la “meta-keywords”. Su objetivo es alojar una descripción lo más breve y acertada posible sobre el contenido de una página, sirviendo esto para presentar debajo del link a nuestra web en los resultados de un buscador. Como el título, es bueno que contenga las palabras clave que hayamos definido, y además no debe sobrepasar los 150 caracteres. Se la utiliza con la expresión “<meta name="description" content="Texto que deseamos incluir como descripción." />”.

Sabemos que el SEO es una disciplina en permanente cambio, principalmente por el hecho de que Google, el buscador más importante de todos (acapara más del 70% de las búsquedas), muta constantemente en la conformación de sus algoritmos y redefine cada cierto tiempo muchas de sus reglas.

Esto obliga a mantenerse atento a las novedades oficiales, participando activamente en las comunidades de usuarios, donde otros colegas del rubro acercan información fresca, plantean interrogantes de relevancia y ofrecen sugerencias o soluciones de todo tipo.

Los foros más frecuentados, como era de esperarse, son los Google, donde durante la pasada primer quincena de Julio se abordó el tema de la relación entre las etiquetas meta-refresh y las redirecciones. Según los especialistas, es importante evitar este tipo de mecanismos, ya que lo ideal es que se ejecuten en el mismo server-side (servidor) y no en el client-side (ordenador cliente, a través del web-browser).

Estas son las propias palabras de JohnMu, un empleado de Google, que participó de la conversación:

I would strongly recommend not using meta refresh-type or JavaScript redirects like that if you have changed your URLs. Instead of using those kinds of redirects, try to have your server do a normal 301 redirect. Search engines might recognize the JavaScript or meta refresh-type redirects, but that's not something I would count on -- a clear 301 redirect is always much better.

Traducción:

No te recomendaría de ninguna manera el uso de una etiqueta meta-refresh o redirecciones JavaScript si has cambiado tus URLs. En lugar de utilizar ese tipo de redirecciones, intenta que tu servidor ejecute una redirección 301 normal. Los motores de búsqueda pueden llegar reconocer las redirecciones JavaScript o meta-refresh, pero no es algo con lo que contaría. Una transparente redirección 301 siempre es mucho mejor.

En el ámbito del diseño web existen muchísimas discusiones habituales, pero una de las más comunes es la disyuntiva entre incluir o no incluir la barra (“/”) al final de una URL. Como suele cuceder casi siempre, no había una postura oficial de Google al respecto. O al menos no la había hasta hace un par de días, cuando en este post, Maile Ohye se encargó de brindar algunas precisiones sobre este tema.

Según explica Ohye, generalmente el uso de la barra al final de una URL corresponde normalmente a las referencias a directorio, mientras que su ausencia corresponde las referencias a archivos/ficheros. Pero de todas maneras, hablamos de una convención que no es totalmente estricta, ya que ambas URL pueden incluir ambas clases de contenido.

Para evitar problemas de usabilidad, una buena solución es hacer uso de las dos URL, pero mostrar siempre el mismo contenido. Así se eliminan las confusiones que podría generar el que “www.sitioweb.com/links” y “www.sitioweb.com/links/” muestren contenidos diferentes.

Entendido esto, es importante atender algunos detalles. Todos sabemos que el contenido duplicado no del gusto de Google, por lo que deberíamos contar con una sola versión original de la página asignada a una de las dos URL, utilizando en la otra una redirección. Para comprobar si contamos con dos duplicaciones podemos revisar el código de estado que devuelve cada URL. Si ambas devuelven un código 200, estaremos ante contenido duplicado.

Pueden implementarse redirecciones de tipo 301 o 302, o directamente dejar ambas versiones en actividad, incluso cuando se trata de la URL principal. Más información en el post original del Blog para Webmasters de Google.

Dentro del SEO, uno de los temas más recurrentes es el uso de meta-tags. Si bien ya se ha confirmado con seguridad que ninguna meta-tag podrá brindar una influencia notable sobre el posicionamiento, no puede dejarse de tener en cuenta que son una fuente de información sobre la página web, utilizada por los buscadores para indagar las características de la misma.

Una meta-tag se construye con la siguiente estructura:

<meta name="nombreMetaTag" content="Contenido de la Meta-tag"/>

Explicando un poco como funciona esto a nivel HTML, diremos que con la construcción "<meta" abrimos la etiqueta. Acto seguido, con el parámetro "name=" definimos el tipo de meta-tag que utilizaremos. Ya elegido el tipo de etiqueta, con el parámetro "content=" le daremos un valor a la etiqueta, siempre en función de su utilidad. Cerramos la etiqueta con la expresión "/>".

Utilizando estas líneas de código, podremos insertar con total facilidad una meta-tag, definiendo rápidamente su tipología y valor. Utilizando estas líneas de código podemos indicar a un buscador el tipo de contenido de un website, una descripción breve de cada página, una descripción del sitio en general, palabras clave sobre el sitio, datos de validación HTML e inclusive, indicar el comportamiento que debe tomar un buscador al llegar a esa página.

Es importante resaltar que las meta-tags deben estar definidas entre las etiquetas "<head>" y "</head>", justo al comienzo del código fuente de cada página.

Internet ha ido cambiando con el paso de los años su propósito principal. En un principio se la concibió como una forma de mantener comunicadas bases militares del ejército, para luego pasar a ser la principal vía con que sostener el contacto entre centros universitarios y educativos. Con el paso del tiempo el usuario promedio ganó protagonismo construyendo un fértil campo para el desarrollo empresarial desde su papel de consumidor.

Actualmente, una gran parte de los cientos de millones de webs que Internet alberga, pertenece a negocios online que pretenden encontrar un lugar en el comercio electrónico. Sin embargo, en la mayoría de los casos se cometen errores de marketing, muy sencillos de subsanar. Esto resulta fatal para un website cualquiera si tomamos en cuenta que un visitante no demora más de 5 segundos en decidir si quedarse en una página o probar suerte en otra.

En primer lugar, es imprescindible evitar la música de fondo. Además de que nuestro acierto estará condicionado por el gusto particular de cada usuario, corremos el riesgo de interrumpir la propia música que el usuario esté reproduciendo, transformando nuestro sitio en una web “molesta”. Nadie se quedará en una página por su música de fondo, pero muchos saldrán de ella si les incomoda.

Otras dos cosas a evitar son las páginas en construcción y la información inútil. Nada es más frustrante que acceder a una sección de un sitio y encontrarse con que no está disponible. Tampoco es mucho más agradable tener que hacer unos cuantos clics para enterarnos concretamente qué ofrece una empresa y, lo fundamental, a qué precio.

Finalmente, diremos que utilizar una introducción/presentación en Flash es el más común de los errores, y quizá el más perjudicial. Además de no aportar nada en cuanto a SEO, su única función consiste en retrasar el acceso a la información. Recordemos que un sitio web no es una película, es una fuente de información, por lo que mientras más fácil, rápido y eficiente sea el acceso a la misma, mejores resultados se obtendrán. Si se quiere utilizar una introducción Flash de todas formas, nunca dejar de implementar la opción “Saltar” (el famoso “Skip intro”).

“robots.txt” es el nombre de un archivo de texto ubicado en la carpeta raíz de un website, utilizable para intentar el control de los “crawlers” que implementa cada buscador al momento de indexar las páginas y luego posicionarlas. Su uso entraña varias opciones a la vez que muchos beneficios. Iremos revisándolos poco a poco en esta serie de artículos.

En primer lugar, es importante repasar que los “crawlers” son aquellos sistemas automatizados mediante los cuales un buscador puede ingresar a una página web y recopilar información importante para el posicionamiento siguiendo la telaraña de links de la misma. Son también conocidos como “arañas”, “spiders” y “robots”.

Un beneficio palpable en este asunto es el control que se establece sobre la actividad de los robots. En ocasiones, estos pueden saturar de peticiones a un servidor, ocupando un excesivo ancho de banda en el mismo y complicando el trabajo del webmaster. Incluso puede irse más lejos, directamente “prohibiendo” la entrada de “crawlers” que nos resulten pesados y no reporten un gran beneficio.

Otra ventaja de manipular el archivo “robots.txt” es la indexación selectiva que podemos practicar. En ocasiones podemos necesitar que una serie de archivos y secciones estén en nuestro website pero pueden complicar el posicionamiento del sitio sobre ciertas “keywords”, en cuyo caso es mejor mantener estos archivos fuera de la vista para el buscador.

Sigue en la parte número dos.