Hello Google, su primera posición en Internet » Desarrollo web

Google Heat Maps: Añada color en sus mapas de Google

Ignacio G. — Sun, 12 Aug 2007 16:44:06 +0000

Hacía tiempo que venía observando webs 2.0 ( pejm: http://www.trulia.com/home_prices/ ) que utilizaban Heat Maps para mostrar de una manera muy sencilla y clara información geográfica. Cuando revisé el Api de Google para ver cómo se podía conseguir este efecto, me llamó la atención que no estaba soportado de manera nativa y que era necesario realizarlo de una manera más o menos artesanal.

El código

En la siguiente página he preparado un ejemplo donde he destacado algunos países europeos con colores elegidos al azar.

Cómo se crea una silueta

Para mostrar líneas y polígonos en los mapas se utiliza VML (Vector Markup Language), recuerde incluir el VML namespace al comienzo de su documento:

xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

La clase GPolygon del API de Google Maps ofrece funciones para dibujar polígonos en el mapa.

Para nuestro ejemplo he creado la función createPolygon que permite dibujar una silueta vectorial en el mapa pasando tres parámetos:

pts_map: Codificación de las coordenadas de los puntos que conforman el polígono.
lvls_map: Codificación de los niveles que conforman el polígono.
num: Valor entre 1 y 6, cada valor tiene un color para la silueta.

Cómo obtener los valores de la silueta

A fecha de hoy no conozco ninguna herramienta que permita obtener de manera automática estos valores por lo que es necesario recurrir a un método un tanto artesanal:

Acceda a la sección Mis Mapas en http://maps.google.es/ y haga click en la opción Crear un mapa nuevo.
Ahora viene el trabajo más tedioso, en la zona superior del mapa encontrará un icono para dibujar formas, selecciónelo y comience a pintar los puntos que delimitan la región sobre la que quiere trabajar. Recuerde que cuanto mayor sea el zoom, mejor será la calidad del Heat Map.
Cuando haya terminado haga doble click y elija un nombre para guardar el polígono.
En la esquina superior derecha encontrará la opción Enlazar a esta página, copie esta url en su navegador.
En la nueva página, busque dentro del código HTML el nombre que le dio a su polígono hasta encontrar una cadena similar a esta:

name:"Forma 1",description:"",polylines:[{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@",levels:"BBBBB"
Por tanto la codificación de las coordenadas de nuestro polígono sería: [{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@ y la codificación de los niveles: BBBBB
El código javascript correspondiente sería:
createPolygon("ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@","BBBBB",5)

Algunas observaciones

Debe tener en cuenta que los Heat Maps consumen bastante resursos de su sistema, un mapa con muchos polígonos o con formas muy complejas pueden sobrecargar el navagador y hacer la página inmanejable.

Puede personalizar el estilo de sus Heats Maps con algunos parámetros como el color, la opacidad, el borde, el relleno, etc. Para ello utilice la función fromEncoded(color?, weight?, opacity?, points, zoomFactor, levels, numLevels)

Puede descargarse el código de ejemplo y utilizarlo líbremente en sus aplicaciones.

Por último recuerde que para poder utilizar el API de Google Maps en sus aplicaciones es necesario que solicite su Key en la sección sign up for an API key.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

Ajax Lightbox: Una ventana emergente 2.0 en su página web

Ignacio G. — Mon, 14 May 2007 21:35:22 +0000

Durante el desarrollo de mi último proyecto he tenido la suerte de conocer un fantástico efecto 2.0 desarrollado por Lokesh Dhakar. Se trata de un efecto Lightbox que permite mostrar espectaculares pop-ups con imágenes y grupos de imágenes. Las características del código original no eran suficientes para el proyecto en el que trabajaba, así que tuve que ampliarlo para que fuera capaz de mostrar pop-ups que cargaran dinámicamente de un fichero. De este modo nació el que he bautizado como Ajax LightBox, espero que les sea de tanta utilidad como a mi.

Qué es Ajax Lightbox

Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente “Contenido, Presentación y Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A):

"Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page."

Como puede observar en el siguiente ejemplo, usted puede visualizar tres tipos diferentes de ventanas:

Contenido dinámico extraido vía Ajax de un fichero.
Imágenes individuales.
Grupos de imágenes.

Si conoce algo de javascript y css puede personalizar el efecto para ajustarlo a sus necesidades:

Ha sido testeado en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.

Cómo utilizarlo

1. Configuración

Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. Por tanto debe incluirlas en la cabecera de su página:

Puede modificar la librería lightbox.js para configurar algunos parámetros del efecto:

fileLoadingImage: Imagen de carga
overlayOpacity: Nivel de transparencia de la capa
overlayvar animate: Activa/Desactiva rescalable animations
resizeSpeed: Controla la velocidad de rescalado de la imagen (1 = muy lento y 10 = muy rápido)
borderSize: Grosor del borde
Incluya también la hoja de estilos lightbox.css añada los estilos a la hoja de estilos actual de su Site. Puede modificar los estilos para cambiar las características del efecto (Colores, tamaños, etc).

Es importante que compruebe dentro de la hoja de estilos que las imágenes están siendo referenciadas a las ubicaciones correctas.

2. Activación

Añada un atributo rel="lightbox_text" a cualquier enlace que apunte a una página web para activar el efecto:

Ver nota
Añada un atributo rel="lightbox" a cualquier enlace a una imagen en el que quiera activar el efecto. Puede incluir un atributo title si quiere visualizar un caption en la ventana:

imagen #1
Si quiere agrupar un conjunta de imágenes, incluya un nombre de grupo dentro de unos corchetes en el atributo rel:

imagen #1 imagen #2 imagen #3

Descárgueselo

El código se ofrece bajo la licencia Creative Commons, esto significa que puede utilizarlo y modificarlo libremente en sus aplicaciones. Solamente debe mantener los créditos tal y como están, para reconocer la labor de sus autores.

Espero que este efecto le sea de tanta utilidad como a mi, y que a partir de ahora pueda sorprender a sus visitantes con este Ajax Lightbox 2.0.

Ajax Lightbox v1.0

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

Selector combo dinámico en Ajax: localidades y provincias de España

Ignacio G. — Tue, 13 Feb 2007 22:00:12 +0000

En diversos proyectos he tenido la necesidad de trabajar con un formulario en el que uno de los campos es un selector de provincias y localidades de España. Tal vez usted también haya tenido esta misma necesidad durante el desarrollo de un proyecto.

En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web de páginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.

Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de funcionalidades de una manera mucho más elegante y eficiente.

Ejemplo de combo dinámico en Ajax

En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite trabajar con un documento XML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.

En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:

Esta funcionalidad consta de los siguientes archivos:

default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
AjaxCode.js: funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.

Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.

El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.

El código.

En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad o encontró cualquier problema le agradecería mucho conocer su feedback.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

Cómo elegir un dominio: 25 claves

Ignacio G. — Sun, 04 Feb 2007 15:38:55 +0000

Registre el nombre de su dominio antes de comenzar el desarrollo de su Site. En el caso de dudar entre varios dominios, si puede permitírselo, regístrelos todos.
En la página http://www.whois.org/ puede comprobar si el dominio en el que había pensado está libre y en caso de estar ocupado quién lo ha reservado.
Si está realmente interesado en un dominio ocupado puede contactar con el propietario para comprobar la viabilidad de la compra, aunque el precio puede ser considerablemente alto.
El dominio realstate.net fue recientemente vendido por 300.000$.
El dominio music.com se encuentra a la venta por 10.000.000$
Como primera opción, opte por utilizar el nombre de su marca en el dominio. Ej.: www.bmw.com
El nombre de su dominio debe corresponder con el nombre de su Site, servicio, producto o empresa, de otra forma sus visitantes se encontrarían desorientados.
Huya de los nombres de domininos genéricos.
Si su empresa vende coches podría verse tentado a elegir un dominio como http://www.coches.com/ o http://www.vendocoches.com/.
La percepción de la comunidad web de los dominios genéricos es poco positiva y la imagen de su empresa se vería perjudicada.
El nombre de su dominio no debe ser un eslógan.
Dominios como "Lamejorwebdelmundo.com" se perciben por la comunidad web como poco transparentes o fraudulentos.
Un dominio fácil de recordar es un buen dominio. Google es fácil de recordar.
Un dominio verbalizable es un buen dominio. Google se puede pronunciar de forma sencilla.
Un domino con contenido semántico es un buen dominio. ¿Sabía que Google es una unidad de medida?
Decántese por un nombre de dominio corto frente a uno más largo.
Aunque es posible contratar un nombre de dominio de hasta 64 caracteres, un domino demasiado largo es inmanejable.
Los dominios cortos son más fáciles de recordar y más rápidos de teclear.
Un dato objetivo: No existen dominios .com libres de 1, 2, ó 3 letras.
Sólo quedan disponibles 2.428 dominios .com de 4 letras, es decir, menos de un 10% del total.
Tenga presente que Google asocia el Page Rank al dominio de una página. Cambiar de dominio supone la perdida del PR que tenía.
Si el dominio contiene de forma natural keywords relevantes en el nombre es una ventaja de cara a la indexación en los motores de búsqueda.
No debe enfocar la elección de su dominio únicamente por los keywords que contiene.
Evite la repetición de keywords en el nombre de dominios si no es absolutamente necesario.
Evite los caracteres de separación "-","_" en el nombre de su dominio.Ej: venta-de-coches-ocasion.com
Conduce a errores cuando se transmite verbalmente.
Son incómodos de escribir.Los buscadores desconfían de este tipo de dominos, no los indexarán antes ni mejor.
Utilice sólo artículos y determinantes si el nombre de su Site o Empresa también los contienen.
Si el nombre de dominio que buscaba está ocupado, utilice su imaginación.
Sea distinto a su competencia, atrévase con nombres de dominio diferentes.
Utilice la ingeniería de nombres: Saque provecho de la fonética de las palábras, los doble sentidos, etc.
Qué le parece welcome.to/sweden? o del.icio.us ?
Aprenda de las webs más relevantes: Google, Yahoo, Overture, Blogger, Ebay, etc
Elija el dominio ".com" como primera elección.
edu: Se asocian a organizaciones educacionales.
gov: Organizaciones gubernamentales.
mil: Organizaciones militares.
net: Organizaciones que proveen infraestructura de red. A partir de 1996 net y com han sido abiertas a cualquier organización comercial.
org: Suelen atribuirse a organizaciones sin ánimo de lucro.
int: Organizaciones internacionales.
Los dominios propios de un país (.es .uk) son sólo aconsejables para empresas que desempeñan su función únicamente en ese país.
A los navegadores les gustan los dominios ".com": Pruebe a escribir "hellogoogle" en su navegador.
Los motores de búsqueda prefieren los dominios ".com"
A los usuarios les gustan los dominios .com: Si alguien le pidiera que visitara la página de Hellogoogle su primera elección sería visitar "hellogoogle.com".
Saque provecho a los subdominios.
El dominio por defecto es el www, pero puede configurar gratuitamente todos los subdmoinios que necesite: Ej: foro.hellogoogle.com, noticias.hellogoogle.com, etc.
Google también indexa los subdominios, pero no intente engañar a los buscadores utilizando los subdmoinios para crear múltiples páginas de entrada. Esta práctica está considerada como fraudulenta y puede ser severamente penalizado.
Registre todas las variantes que le sean posible .es, .net, .org, .biz, .net… para evitar futuros conflictos con otros Sites.
Utilice herramientas especializadas para el análisis de dominios.
Domain Typo Generator: nos permite conocer los errores más habituales en la escritura de un dominio.
Domain Name Generator: sugerencias sobre nombres de dominio.
http://www.domainsbot.com/: Una aplicación similar pero de otra compañía.
Internet Archive: Puede ser una herramienta interesante si acaba de adquirir un dominio expirado y le gustaría saber qué web había anteriormente
Al contratar un dominio asegúrese siempre que el registro se realizará a su nombre. Hay empresas que le ofrecen mejores precios pero a costa de registrar el dominio a otro nombre. Esto puede generarle serios problemas legales en el futuro.
Desconfíe. En el mercado de dominios todo vale.
Al consultar sobre la disponibilidad de un dominio puede estar enseñando sus cartas a una empresa caza dominios.
Actué siempre rápido y no de pie a que alguien se le adelante.
Tenga siempre presente la fecha de expiración de su dominio.
Existen muchas empresas especializadas en la compra y venta de nombres de dominio que están al acecho de dominios a punto de caducar.
Un descuido en la renovación de dominio, puede tener consecuencias catastróficas para su empresa, haga la reserva por periodos largos.
Pida la opinión de otras personas antes de tomar una decisión.Contar con varios puntos de vista le ayudará a elegir el dominio.
Otorgue la importancia que se merece a la elección del dominio. Un nombre de dominio atractivo y elegante reforzará la imagen de su empresa en Internet, por el contrario un dominio poco acertado ofrecera una visión negativa a sus visitantes. Por lo tanto no escatime esfuerzos ni dinero, su empresa se lo agradecerá.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

Los META tags: códigos de barra para los buscadores

Ignacio G. — Sun, 28 Jan 2007 17:55:15 +0000

Qué son los metas.

Tal como indica la W3C World Wide Web Consortium, los Meta Data sirven para describir de manera inequívoca una página web, pondríamos decir que se su cometido es similar al de un código de barras. Los META ofrecen por tanto información relevante sobre una página web: Quién es el autor, con qué frecuencia se actualiza, sobre qué trata la página, etc.

Cómo utilizo los META.

Los META son tags HTML que se deben situar siempre en la cabecera de la página, dentro de HEAD del documento. Es un tag que no requiere cierre, por lo que no es necesario incluir la cadena para finalizar. El atributo name especifica qué información ofrece el META tag y en el atributo content se incluye la información. Por ejemplo:

El atributo lang se utiliza para indicar en que idioma está escrito el contenido del atributo content. Esto permite que los sintetizadores de voz apliquen al texto la entonación correspondiente al idioma.

El atributo Scheme permite ofrecer un contexto para interpretar correctamente la información de un meta, que de otra manera podría ser ambigua. En el siguiente ejemplo el atributo schema especificaría el formato de una fecha. Sin él podríamos dudar entre el 10 de Septiembre o el 9 de Octubre:

El atributo http-equiv sirve para que los servidores HTTP preparen una cabecera de respuesta determinada. Se utiliza por ejemplo para indicar a los servidores cache cada cuanto tiempo debe actualizarse con una versión nueva del documento.

También se utiliza para indicar el charset de un documento. El "charset" identifica una codificación de caracteres, que es el mecanismo que se utiliza en Internet para convertir una secuencia de bytes en una secuencia de caracteres. Los servidores envían los documentos HTML a los navegadores como un flujo de bytes y estos los deben interpretan como un flujo de caracteres. El charset depende de cada idioma, país o región.

Mi intención no es hablarle de todos los META que existen, sino profundizar en aquellos que tienen una relación más directa con el rendimiento de su web corporativa en Internet. Si lo desea, puede encontrar toda la información que necesite sobre los META en la siguiente dirección http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv

Los META KEYWORD y DESCRIPTION: Mitos y leyendas.

El meta KEYWORD permite asociar a la página web una serie de términos de búsqueda separados por comas. Tenga en cuenta que los buscadores no son sensibles a las mayúsculas y minúsculas.

Cuando los webmasters y las empresas SEO comenzaron a utilizar indiscriminadamente las virtudes del META KEYWORD acabaron por matar a la gallina de los huevos de oro. Era muy habitual encontrar mastodónticas cabeceras de METAs con el objetivo de alcanzar las primeras posiciones de manera rápida:

Debemos ofrecer una información que describa el contenido de la página de manera precisa. Podemos incluir slogans pero debemos huir de las frases demasiado agresivas que puedan generar desconfianza a los usuarios.

Los buscadores extraen de este META la información que muestra en los resultados de las búsquedas. Sólo se indexan los 150 primeros caracteres que introduzcamos, por lo que es importante evitar las repeticiones y ser conciso.

Se debe utilizar el lenguaje apropiado para el público al que nos estamos dirigiendo. Debemos tutear a particulares y utilizar el usted para pymes y empresas.

Hay que tener claro que los META no posicionarán mi página más rápido ni mejor en los buscadores, pero si nos permiten ofrecer un contenido de mayor calidad a nuestros visitantes.

Los peligros del META REFRESH

El meta REFRESH permite recargar automáticamente una página en un intervalo de tiempo. Para ello simplemente debemos indicar en el atributo CONTENT el intervalo de tiempo expresado en segundos.

También permite realizar una redirección a otra página.

Sin embargo este método de redirección es muy poco recomendable. La W3c alerta sobre su bajo nivel de accesibilidad al no ofrecer información al usuario sobre la página origen y destino. Además realizar una redirección de esta manera puede ser peligroso para la indexación de la página web pues los motores de búsqueda pueden considerar que estamos utilizando una técnica prohibida en sus directrices para webmasters. Las páginas "puerta", back-doors, o cloaking es una técnica agresiva que busca posicionar un Site utilizando varias páginas de entrada creadas exclusivamente para los buscadores. Estas páginas contienen un contenido absurdo para una persona pero muy relevante para los buscadores (repeticiones de criterios de búsqueda, frases y titulares incongruentes, etc). Cuando encontramos una página de este tipo como resultado de una búsqueda e intentamos acceder, somos redireccionados a otra página diferente preparada para su correcta visualización.

Los motores de búsqueda detectan esta técnica y pueden penalizar nuestra página o desindexarnos definitivamente.

El META ROBOTS y la privacidad de nuestras páginas.

El META Robots se utiliza para indicar a los motores de búsqueda de tipo araña (Google y la mayoría de buscadores) si debe o no indexar el contenido de la página (index-noindex) y si queremos que acceda a los enlaces (follow-nofollow). Las directivas que podemos indicar son:

Los valores por defecto son index y follow, así que no es necesario indicar nada par que los buscadores indexen el contenido de nuestras páginas.

En cambio si la información de la página es de carácter confidencial y no queremos que sea indexada debemos asegurarnos de incluir la directiva noindex,nofollow. Debemos tener en cuenta que los motores de búsqueda son capaces de indexar páginas dinámicas como fichas con datos personales de clientes o listados de facturas. ¿Ha probado a buscar su dni en Google?

No es del todo cierto decir que no se indexará el contenido de nuestra página si incluimos la directiva noindex. Google siempre accederá e indexará todas las páginas a las que acceda independientemente del contenido del meta ROBOTS, pero sólo mostrará en sus resultados (SERPs) aquellas que hayan sido declaradas como indexables. Esto es así porque necesita conocer los cambios que se puedan producir en la página y para poder acceder a sus links.

Si no queremos que el contenido de la página sea indexado pero sí necesitamos que los buscadores accedan a los enlaces de la página deberemos incluir:

o símplemente:

En este punto me gustaría hacer una observación y es que mucha gente ha venido reportando en diversos foros que en ocasiones Google no hace caso a esta directiva y muestra en sus resultados páginas que incluían la directiva noindex. Se trata de un bug del algotimo de indexación de Google que se espera que pronto sea subsanado. Como dijo aquel, nadie es perfecto.

Por tanto es muy importante que protejamos la privacidad de nuestros clientes incluyendo noindex,nofollow en todas aquellas páginas que no queremos que sean indexadas.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.

Guía de maquetación web para el desarrollo de un Site corporativo

Ignacio G. — Sun, 14 Jan 2007 17:00:51 +0000

Hemos preparado para usted un resumen de los principales aspectos que debe cuidar a la hora de desarollar su Site corporativo.

1. Aspectos de maquetación

1.1 Estilos css

Deben seguir los recomendaciones definidas por la w3 para los hojas de estilo - css2 ( Cascading Style Sheets, level 2, CSS2 Specification http://www.w3.org/TR/REC-CSS2/) La web debe estar preparada para una óptima visualización en diferentes soportes: monitores, impresoras, pdas, navegadores textuales, reconocedores braille, etc.@media print

@media screen

@media handheld

@media braile

Los estilos deben definirse exclusivamente en hojas de estilo externas para modularizar diseño y contenido.

Las hojas de estilo actuales deben refinarse:

Eliminando estilos obsoletos.
Agrupando y simplificando estilos.
Optimizando los estilos existentes.
La web debe quedar preparada para poder beneficiarse de las ventajas que aportará la inminente llegada de los CSS3.

1.2 Javascript

Todas las funciones Javascript deben definirse e implementarse en archivos externos siempre que sea posible.

Es necesario refinar todas las librerías actuales:

Eliminando funciones obsoletas
Unificando funciones homólogas.
Debemos evitar utilizar Javascript para realizar redirecciones y definir títulos en las páginas.

1.3 Código html

Las nuevas maquetas deben definirse en base al estándar XHTML. EL motivo de utilizar XHTML es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica , donde la info rmación, y la forma de presentarla estén claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la info rmación que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada ) y JavaScript su aspecto y diseño en distintos medios ( ordenadores , PDAs , teléfonos móviles , impresoras …).

Las principales ventajas del XHTML sobre otros formatos son:

Compatibilidad parcial con navegadores antiguos: la info rmación se visualiza, aunque sin formato. Apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en navegadores que soportan HTML de base.
Un mismo documento puede adoptar diseños radicalmente distintos en diferentes aparatos, pudiendo incluso escogerse entre varios diseños para un mismo medio.
Facilidad de edición directa del código y de mantenimiento.
Formato abierto, compatible con los nuevos estándares que actualmente está desarrollando el W3C como recomendación para futuros agentes de usuario o navegadores .
Los documentos escritos conforme a XHTML 1.0 pueden potencialmente presentar mejor rendimiento en las actuales herramientas web que aquellos escritos conforme a HTML.

1.4 Cross Browser

Debemos buscar la compatibilidad de la web en los siguientes navegadores:

Mozilla Firefox.
Internet Explorer 5.x 6.0 7.0 (Próximamente)
Amaya
Safari (Mac)

2. Pautas de usabilidad y accesibilidad

2.1 Nomenclatura

Es necesario definir una estructura de directorios y archivos óptima.

Los nombres de los directorios deben ser descriptivos. Los buscadores dan más relevancia a los nombres de los directorios que a los nombres de los archivos.

Todas las imágenes deben incluir un atributo alt, explicando con palabras la funcionalidad de la imagen.

Los enlaces deben incluir un atributo title especificando lo que ocurre al ser activados.

2.2 Directrices de posicionamiento en buscadores

2.2.1 Aspectos de maquetación

Es importante crear un sitio con una jerarquía y vínculos de texto claros. Se debe poder acceder a todas las páginas desde al menos un vínculo de texto estático.

Es necesario ofrecer a los usuarios un mapa del sitio con vínculos que apunten a las secciones importantes del sitio. Si el mapa del sitio contiene más de 100 vínculos, conviene dividirse en varias páginas.

Conviene mantener una web útil con mucha info rmación y escriba páginas que describan su contenido con claridad y exactitud.

En cada página es importante determinar las palabras que los usuarios escribirían para encontrarla y asegurarse de que realmente las incluye.

Es fundamental utilizar texto en lugar de imágenes para mostrar nombres, contenido o vínculos importantes. El rastreador de Google no reconoce texto incorporado dentro de las imágenes.

Debemos asegurarnos de que los códigos TITLE y ALT sean descriptivos y precisos.

Hay que asegurarse periódicamente que no haya vínculos rotos o código HTML incorrecto.

Para páginas dinámicas, (por ejemplo, una URL que contenga un carácter “?”), hay que tener en cuenta que no todos los motores de búsqueda rastrean páginas dinámicas, además de páginas estáticas. Se recomienda que los parámetros sean cortos y escasos.

El número de vínculos en una página determinada no debería superar los 100.

2.2.2 Aspectos técnicos

Debemos Permitir que los robots de búsqueda rastreen la web sin ID de sesión o argumentos que hacen un seguimiento de su ruta por el sitio. Estas técnicas son de gran utilidad para el seguimiento del comportamiento de un usuario individual, pero el patrón de acceso de los robots es completamente distinto. El uso de estas técnicas puede llevar a una indexación incompleta de su sitio, ya que es posible que los robots no puedan eliminar las URL que tengan un aspecto distinto pero que en realidad apuntan a la misma página.

Debemos asegurarnos que el servidor web acepta la cabecera HTTP If-Modified-Since. Esta funcionalidad permite que el servidor web avise a Google si el contenido de su sitio ha cambiado desde la última vez que rastreamos su sitio. La compatibilidad con esta funcionalidad ahorra ancho de banda y gastos generales.

Es importante que utilicemos el archivo robots.txt en su servidor web. Este archivo comunica a los rastreadores qué directorios pueden o no rastrearse. Asegúrese de que el archivo está actualizado para su sitio de modo que no bloquee accidentalmente el rastreador Googlebot. Para ver más info rmación acerca de cómo configurar los robots que visitan un sitio: http://www.robotstxt.org/wc/faq.html.

Debemos asegurarnos que el CMS puede exportar el contenido de modo que las arañas de los motores de búsqueda puedan rastrear el sitio.

Hay que evitar utilizar “&id=” como parámetro en sus URL, puesto que no incluimos este tipo de páginas en nuestro índice.

2.3 Pautas de accesibilidad

2.3.1 Aspectos a tener en cuenta

Utilizar una herramienta automatizada de validación de la accesibilidad y la navegación. Es necesario tener en cuenta que las herramientas o programas de revisión no contemplan todos los problemas de accesibilidad, tales como la comprensibilidad de un enlace de texto, o la funcionalidad de un texto equivalente, etc.

Validar la sintaxis XHTML, XML, etc.

Validar las hojas de estilo CSS.

Chequear la web con un emulador o navegador solo-texto.

Utilizar varios navegadores gráficos, con:

sonidos y gráficos cargados,
gráficos no cargados,
sonidos no cargados,
sin ratón,
marcos, scripts, hojas de estilo, y applets sin cargar

Validar la web con varios navegadores, antiguos y nuevos.

Navegador con conversión texto-voz, un lector de pantalla, un programa de magnificación, una pantalla pequeña, etc.

Utilizar un revisor gramatical y ortográfico. Una persona que lee una página con un sintetizador de voz puede no ser capaz de descifrar la predicción que hace el sintetizador de una palabra que tiene un error ortográfico. Eliminando los problemas gramaticales se incrementa la comprensión.

Revisar el documento en cuanto a su claridad y simplicidad. Las estadísticas de legibilidad, como las que generan algunos procesadores de texto, pueden ser útiles indicadores de la claridad y simplicidad. Es importante contar un editor (humano) experimentado para revisar el contenido escrito en cuanto a su claridad. Los editores pueden también mejorar la usabilidad de los documentos al identificar problemas potenciales de sensibilidad cultural que pueden presentarse debido al uso del lenguaje o de los iconos.

Es aconsejable invitar a personas con discapacidad a revisar los documentos. Los usuarios con discapacidad, noveles o expertos, proporcionaran valiosa info rmación sobre problemas de accesibilidad o usabilidad y sobre su severidad.

2.3.2 Directrices y normas de accesibilidad web

Directrices europeas para facilitar la lectura de una web:

http://www.sidar.org/recur/desdi/pau/directriceseuropeas%20para%20facilitar%20la%20lectura.pdf

Directrices de accesibilidad para el contenido web:

http://www.w3.org/TR/WAI-WEBCONTENT/

Para facilitar la verificación manual de la aplicación de las pautas de accesibilidad cuando se ha creado una página Web, el WAI ha creado una lista de verificación de los puntos de control de las Directrices de Accesibilidad para el Contenido Web :

ha creado una lista de verificación de los puntos de control de las Directrices de Accesibilidad para el Contenido Web :http://www.sidar.org/recur/desdi/traduc/es/wcag/checker.htm

Niveles de accesibilidad de una página web:

La conformidad con las WCAG 1.0 está definida en la sección 5 de la especificación. Aquí se extracta el texto que define los niveles de conformidad:

Nivel “A” de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1;

Nivel “Doble-A” de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 y 2;

Nivel “Triple-A” de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1, 2, y 3.

nivel A

Doble-A

Triple-A

*Por omisión, un icono de conformidad se refiere a una única página. Si la declaración pretende aplicarse o incluir más de una página, el icono de conformidad debe ir acompañado de info rmación explícita del alcance, explicando qué páginas cubre la declaración.

*Los proveedores de contenidos son los únicos responsables del uso de estos logos.

3 Nuevas funcionalidades.

3.1 Ajax (Asynchronous JavaScript And XML)

Es una técnica de desarrollo web muy actual para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes:

HTML (o XHTML ) y Hojas de Estilo en Cascada (CSS) para presentar la info rmación;

Document Object Model (DOM) y JavaScript, para interactuar dinámicamente con los datos, y XML y XSLT , para intercambiar y manipular datos de manera desincronizada con un servidor web (aunque las aplicaciones AJAX pueden usar otro tipo de tecnologías, incluyendo texto plano, para realizar esta labor).

En las aplicaciones web tradicionales los usuarios interactúan mediante formularios, que al enviarse, realizan una petición al servidor web. El servidor se comporta según lo enviado en el formulario y contesta enviando una nueva página web. Se desperdicia mucho ancho de banda, ya que gran parte del HTML enviado en la segunda página web, ya estaba presente en la primera. Además, de esta manera no es posible crear aplicaciones con un grado de interacción similar al de las aplicaciones habituales.

En aplicaciones AJAX se pueden enviar peticiones al servidor web para obtener únicamente la info rmación necesaria, empleando SOAP o algún otro lenguaje para servicios web basado en XML, y usando JavaScript en el cliente para procesar la respuesta del servidor web. Esto redunda en una mayor interacción gracias a la reducción de info rmación intercambiada entre servidor y cliente y a que parte del proceso de la info rmación lo hace el propio cliente, liberando al servidor de ese trabajo. La contrapartida es que la descarga inicial de la página es más lenta al tenerse que bajar todo el código JavaScript.

Ejemplos:

· Gmail y Google maps.

A9, buscador de Amazon
Flickr, Álbumes de fotos online.
Oddpost, servicio avanzado de webmail de Yahoo!
Basecamp, servicio de gestión de proyectos diseñado por 37Signals sobre plataforma Rails.
24SevenOffice, ERP/CRM
Panoramio.com, Comunidad de fotos sobre Google Maps
meebo, Mensajería Instantánea desde tu navegador

3.2 Sindicación RSS

RSS es parte de la familia de los formatos XML desarrollado específicamente para todo tipo de sitios que se actualicen con frecuencia y por medio del cual se puede compartir la info rmación y usarla en otros sitios web o programas. A esto se le conoce como sindicación .

Lo verdaderamente importante es que a partir de este formato se está desarrollando una cadena de valor nueva en el sector de los contenidos que está cambiando las formas de relación con la info rmación tanto de los profesionales y empresas del sector como de los usuarios. Bloglines, Feedster, Plazoo, Feedness, Retronimo, YourFeeds, Amazon, AllConsuming, NewsIsFree, sindic8, Blogdigger, y un largo etcétera de empresas están explorando nuevas formas de uso y distribución de la info rmación.

¿Le ha gustado este artículo?, ayúdeme a compartirlo.