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

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.

Icono del Nivel A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI nivel A

Icono del Nivel Doble-A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI Doble-A

Icono del Nivel Triple-A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI 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.