Trabajaremos juntos para recolectar el contenido y después para destacar su mensaje con la mayor exposición dentro del diseño gráfico creado por nuestros diseñadores especializados, que manejan lo último en tecnología Web.

Web Agency Design entregará un sitio web altamente funcional, rentable y de agradable para Usted. y sus clientes.

Web Agency Design es una Agencia Multimedia con capacidad para producir toda clase de material para campañas de publicidad gráfica, multimedia o impresa.

Web Agency Design concentra su esfuerzo en proveer soluciones rápidas y efectivas a las necesidades de sus clientes.

Desarrollamos Sitios Web en Ecuador altamente competitivos, que le permitiran posicionarse en los primeros lugares en su rama. Contamos con los mejores diseñadores web, graficos y programadores para obtener un sistema web atractivo, funcional y bien estructurado, que le permitira competir y ganar mas clientes.

La competencia

bing

Tal vez pienses que después de una decada como el buscador dominante, Google podría tomarse un respiro; después de todo tiene el 65% de cuota de mercado. Pero Google no está listo para dormirse en los laureles,, sus competidores tampoco tienen la idea de declararse vencidos. [...] La habilidad de Twitter de parsear los updates de sus usuarios introdujo el concepto de “búsquedas en tiempo real”. [...] Pero la mayor amenaza de Google viene de 850 millas al norte, Bing. El buscador rediseñado y con una nueva marca de Microsoft fue lanzado en Junio de 2009. El nuevo look, junto con 100 millones de dólares en campaña de publicidad, ayudó a Bing a tener de un 8% a un 11% de cuota de mercado en EEUU.

mike siwek lawyer mi

Google

El query “mike siwek lawyer mi” demuestra el poder del algoritmo de búsqueda de Google, que identifica rápidamente a “mike siwek” como una persona, “lawyer” indica que es un abogado y “mi” identifica que debe buscar en Michigan (un estado de EEUU). Los otros buscadores nos dan otros resultados, ninguno cerca de los resultados de Google (irónicamente este query que fue mostrado como ejemplo en Wired ahora referencia a los varios artículos que hablan acerca de Google)

Pagerank y los nuevos parámetros

Pagerank

El Pagerank de una página fue y sigue siendo uno de los parámetros más conocidos para el orden de los links en una búsqueda. Manber dice “Las personas tienden a confiar en el PageRank, pero existen otras cosas que incrementaron la relevancia”. Ahora se tienen otros nuevos parámetros como por ejemplo el idioma, la localización, etc. Y con su motor de búsqueda que se encuentra en constante actualización (estos nuevos parámetros pueden ser adicionados), como dice Singhal “Nuestro trabajo es básicamente (como) cambiar el motor de un avión que ya despegó y se encuentra volando a 1000km/h a 30000 pies de altura“.

Nosotros, los usuarios

Algoritmo Google

Google tiene una cantidad inmensa de usuarios que proveen mucha información al gigante de las búsquedas. Día a día están haciendo pruebas con nosotros y nuestras búsquedas, todo queda registrado (los clicks que hacemos, los nuevos querys, las correciones de ortografía, etc.). Google tiene esta información a su disposición y es (como indica en el artículo) una de sus grandes ventajas frente a sus competidores.

Estos enlaces, cuya finalidad es la de evitar recorrer todos los enlaces del menú del sitio cuando navegamos con el teclado o con un lector de pantalla, suelen presentarse ocultos a la vista mediante distintas técnicas más o menos acertadas; generalmente utilizando atributos de CSS.

Oculto: Al enlace se le aplica el atributo display:none.

Desplazado: Esta vez el enlace se oculta sacándolo del área visible del documento, generalmente aplicándole la regla text-indent:-100em.

"Fantasma": Una imagen transparente es la que enlaza al contenido.

En ocasiones, estos recursos suelen ir acompañados de una regla aplicada a la pseudo-clase :active y :focus, en las que se anula el indentado del enlace, de tal forma que los usuarios sin problemas de visión puedan percatarse de su presencia al tabular a través del mismo.

Lo que los lectores de pantalla leen

Para aclararnos las dudas sobre qué lectores de pantalla interpretarán estos enlaces, Andrew Kirkpatrick (CPB/WGBH National Center for Accessible Media) ha cedido para esta web una comparativa del comportamiento de varios lectores de pantalla:

¿Hay algo mejor que utilizar alguna de estas técnicas?

Por ahora hemos visto que alguno de estos trucos o hacks pueden cumplir su cometido si navegamos con un lector de pantalla. Pero la pregunta que surge llegados a este punto es ¿por qué tomarnos tantas molestias ocultándolos a la vista?

Parece como que estos enlaces son el patito feo del diseño web, cuando en realidad deberían ser tomados como una utilidad más, del estilo del mapa del web o del típico enlace que lleva a las características de accesibilidad del sitio.

No ocultarlos evitará que el usuario tenga que interactuar con su teclado para encontrarlo y minimizará el número de errores (por ejemplo, tabular hacia atrás porque me lo he pasado sin querer).

Conclusiones

Intenta evitar todo tipo de trucos a la hora de presentar tu enlace de "saltar navegación". Tus páginas serán más usables y te ahorrarás disgustos con las interpretaciones que hagan las próximas versiones de los lectores de pantalla.

Si los ocultas, utiliza un text-indent negativo, apoyado en una pseudo-clase :hover y :focus (esta última Opera no la interpretará) que permita a los usuarios sin discapacidades visuales distinguirlos.

Para rizar el rizo, asocia la letra S como tecla de acceso directo (accesskey) al mismo. Alan Chuter nos explica el por qué de esta asignación.

Hay una forma más conveniente para manejar esta complejidad que hacer grandes decisiones al principio y esperar que todo salga bién. Para hacer sitios mejores, sitios más funcionales, lindos y usables, debemos romper todo el proceso en pequeños pasos independientes basados en los detalles importantes dentro de nuestros requerimintos. Christopher Alexander, el que originariamente propuso la idea, los llama pedazos de patrones.

Yo les voy a mostrar como esquivar los hábitos y costumbres que tenemos y usar patrones para tomar decisiones. Mucho se ha hablado y escrito sobre el tema, para ser simple y claro en esta introduccioón los llamare pedazos.

Paso uno: Hacer una lista de componentes

Empiezen haciendo una lista de todas las partes específicas que componen la página y que la hacen funcionar. Por "partes" me refiero a cualquier tipo de cosa que requiere algún diseño. Asi que esto incluye la información que debe proporcionar la página, que acciones debe incluir, etc. No hay que tener en cuenta prioridades, ni hacer grupos, ni categorías. Si hacen eso terminarán haciendo todo con las costumbres y hábitos de antes.

Estas son las partes de una página "Mi cuenta" que diseñé hace poco:

1. Información de la compañía
2. Información del seguro de la compañía
3. Mi (usuario actual) información
4. Otros usuarios en esta cuenta
5. Información de mi representante de ventas
6. Plan de cuenta actual
7. Enlace para cambiar preferencias de busqueda
8. Fecha de creación de cuenta
9. La gente rara vez cambia o mira su información sobre el seguro
10. Cualquier usuario puede editar cualquier cosa menos la información de otros usuarios
11. Cambiar la contraseña es una acción común
12. La gente podría venir aquí para cambiar las preferencias de busqueda (que están en otra página)

Hagan esto en papel si estan trabajando solos. Es más rápido.

Paso dos: Averiguar que partes estan relacionadas

Algunas partes influencian o affectan a otras (como 7 y 12), mientras que otras son absolutamente independientes (como 1 y 9). Algunas partes funcionan mejor juntas y otras no varian. Pongan las partes en grupos dependiendo si se afectan, sin tener en cuenta el lado gráfico.

• A: 1, 10
• B: 2, 9, 10
• C: 3, 10, 11
• D: 4, 10
• E: 5
• F: 6, 10
• G: 7, 12
• H: 8

Miramos a C, por ejemplo:

• 3. Mi (usuario actual) información
• 10. Cualquier usuario puede editar cualquier cosa menos la información de otros usuarios
• 11. Cambiar la contraseña es una acción común

La contraseña (11) es parte de la información del usuario (3) y se puede editar (10).

Nótese que no estamos asumiendo cosas. Estamos construyendo sobre lo que ya sabemos con seguridad.

Paso tres: Prioridades

Decidan cuales grupos son más importantes desde el punto de vista funcional. Es decir, decidan que es lo que vale más para el usuario.

No es necesario reordenar la lista. Simplemente fijense en que grupos son más importantes y agrupenlos.

• Mas importante: C, A, G, E
• Necesario: B, D, F
• Detalles: H

Paso cuatro: Diseñar cada grupo

Ya que hemos agrupado todos grupos que esten relacionados directamente en categorias más grandes, podemos diseñar sin preocuparnos de los conflictos. Esta idea es, fundamentalmente, lo que dice Alexander con sus patrones (que yo llamo grupos). Se buscan por separado y luego se juntan.

Diagrama C

Diagrama A

Diagrama G

Las lineas parpadeantes alrededor de G cumplen 12 mostrando que esta sección debe sobresalir. ("La gente podría venir aquí para cambiar las preferencias de busqueda).

Diagrama E

Diagrama B

En mi abreviatura he indicado que ese enlace "Show/hide insurance info" (Mostrar/esconder información seguro) va a esconder o mostrar el bloque con Javascript. Esto cumple 9 ("La gente rara vez cambia o mira su información sobre el seguro").

Diagrama D

Este grupo puede ser duplicado para cada usuario adicional.

Diagrama F

Diagrama H

Notese que los diagramas usan escalas y peso para mostrar prioridad. Estas decisiones van a guiar el siguiente paso.

Paso cinco: Juntar todas las partes

Una vez que tengamos listos los diagramas, los juntamos. Piensen en las valoraciones que entraron en los diagramas. Piensen sobre las prioridades. Piensen sobre el balance. Simplemente diseñen.

Lo hice dos fases. Primero el diseño en borrador:

Lo siguiente es hacer un diagrama de mi prototipo HTML:

Paso seis: Producción

Cuando tengan el resultado final pueden que se den cuenta de que algunas cosas no funcionan tan bien en pantalla como lo hacían el el papel. En la página final moví la información de la compañía (4) para un balance mejor y cambie la barra lateral (E,F,H) de lado. Pude cambiar estas partes independientemente ya que los había diseñado independientemente. Vean el resultado: