Desarrollo web – Página 2

Javascript no intrusivo, un ejemplo mágico.

Navegando por Internet he encontrado un curioso ejemplo de javascript no intrusivo que por su sencillez y espectacularidad me gustaría compartir con ustedes. Creo que antes de comenzar con ninguna explicación lo mejor será que lo prueben:

Para ello vaya a su navegador favorito (google) y accedan a la sección de búsqueda de imágenes.
Realicen la búsqueda que prefieran, por ejemplo «hellogoogle» y pulse en buscar para ver todos los resultados.
Una vez llegado a este punto copie la siguiente linea de código y péguela en su navegador (Como si se tratara de la dirección de una web):
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
Pulse enter…¿Sorprendido?

Aunque a pesar de su sencillez es un efecto muy espectacular, no se trata de ningún truco de prestidigitación. La explicación hay que buscarla en el javascript no intrusivo, si analizamos el código para ver cómo se consigue este efecto puede sacar algunas conclusiones interesantes:

En primer lugar hay que tener presente que el código javascript se ejecuta después haber cargado una página web en el navegador. En nuestro caso era la página de resultados de una búsqueda de imágenes.
Cuando un navegador web carga una página crea una estructura de objetos en memoria denominada DOM (Document Object Model). Esta modelo de objetos puede ser consultado e incluso modificado a través de un lenguaje de scripting como javascript.
Por ejemplo en el array document.images se almacena una referencia a cada imagen del documento:
DI=document.images //Array con las imagenes del DOM
Podemos determinar fácilmente la longitud de este Array con el atributo length para poder recorrerlo con un bucle for:
DIL=DI.length for(i=0; i-DIL; i++) { ... }
Los atributos de cada una de las imágenes de la página puede ser modificado con javascript accediendo al DOM:
DIS=DI[ i ].style; // Obtenemos una referencia al atributo style
Así podemos modificar el atributo position que por defecto es block a absolute . Un elemento con posicionamiento absolute puede ser posicionado en cualquier coordinada de la página a través de los atributos top y left:
DIS.position='absolute'; //Modificamos el posicionamiento a absolute DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; //Actualizamos el atributo left DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++} /Actualizamos el atributo top
Por último se crea de un temporizador con la función setInterval que ejecuta cada 5 milisegundos la función A que es la que realiza el movimiento de las imágenes modificando sus atributos top y left:
setInterval('A()',5); void(0);
nota: Aunque no tiene relación directa con el javascript no intrusivo la función que realiza el movimiento de las imágenes es una función helicoidal. Variando los parámetros de la función podemos conseguir que las imágenes describan otros parábolas:
javascript:R=0; x1=.01; y1=.005; x2=.025; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300;y5=200;DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

La utilidad del javascript no intrusivo no se limitan a este tipo de ejemplos curiosos, si no que es una herramienta de gran importancia a la hora de realizar webs accedibles que no dependan de que el navegador del visitante soporte o no javascript. Esto lo veremos sin duda en próximos artículos.

Fuente de la noticia original: This is freaking insane.

Nota: Este artículo ha sido indexado por Google en 4 minutos, nunca dejarás de sorprenderme baby.

Internacionalización y Localización (i18n – l10n): Cómo localizar una web en php

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

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

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:

<script type="text/javascript" xsrc="js/prototype.js" mce_src="js/prototype.js"></script> <script type="text/javascript" xsrc="js/scriptaculous.js?load=effects" mce_src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" xsrc="js/lightbox.js" mce_src="js/lightbox.js"></script>

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).

<link rel="stylesheet" xhref="css/lightbox.css" mce_href="css/lightbox.css" type="text/css" media="screen" />

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:

<a xhref="nota.htm" mce_href="nota.htm" rel="lightbox_text" >Ver nota</a>
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:

<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox" title="Los recursos de HelloGoogle son la pera">imagen #1</a>
Si quiere agrupar un conjunta de imágenes, incluya un nombre de grupo dentro de unos corchetes en el atributo rel:

<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox[mi_grupo]">imagen #1</a> <a xhref="images/image-2.jpg" mce_href="images/image-2.jpg" rel="lightbox[mi_grupo]">imagen #2</a> <a xhref="images/image-3.jpg" mce_href="images/image-3.jpg" rel="lightbox[mi_grupo]">imagen #3</a>

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

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

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:

Arquitectura de la aplicación provincias y localidades en 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.

Cómo elegir un nombre de dominio: 25 consejos

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 puede suponer 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. Tenga cuidado al utilizar la letra «x» en su nombre de dominio, algunos proxyes y firewalls pueden catalogar su Site como contenido para adultos.
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á.

Optimizar Los META tags para los buscadores

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.

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.