- Elimina del código HTML aquellos elementos que sólo sirven para cambiar el aspecto visual de presentación. Por ejemplo, para marcar el énfasis utiliza los elementos EM y STRONG, que aportan información estructural, en vez de B e I, que sólo aportan aspecto visual (negrita y cursiva).
- Recuerda: Las gramáticas estrictas desaprueban los elementos de presentación como B, I, CENTER, etc.
- No utilices elementos estructurales para dar formato al texto. Por ejemplo, en vez de usar los elementos de marcado de citas BLOQUOTE o Q para lograr el efecto de texto indentado, sírvete de las propiedades de CSS para tal efecto ("text-indent").
- Utiliza CSS para dar estilo al texto, en lugar de representarlo mediante imágenes. Un texto incluido en una imagen deja de estar disponible para aquellas personas que no pueden verla. Si usas esta técnica añade el mismo texto que aparece en la imagen al texto alternativo de la misma (atributo "alt").
- Evita la utilización de tablas para maquetar. En su lugar usa marcadores estructurales y las hojas de estilo para controlar la maquetación del documento. Recuerda lo comentado sobre tablas de maquetación en la unidad 4 y el ejemplo de maquetación mediante CSS.
- Evita añadir espacios en blanco o mediante la entidad en las celdas vacías
de las tablas para poder proporcionarles bordes. Usa la propiedad "empty-cells". - No añadas espacios ("nbsp;") para conseguir márgenes al contenido de un elemento. En su lugar, recurre a las propiedades CSS "margin", "margin-top", "margin-right", "margin-bottom" y "margin-left".
- Emplea la propiedad CSS "text-align:center" en lugar del elemento no estándar
CENTER.
jueves, 27 de septiembre de 2007
Errores más comunes a la hora de programar Xhtml
Ventajas de Utilizar Hojas de Estilos
La utilización de hojas de estilo, especialmente las externas, que permiten separar el contenido de la presentación, proporciona importantes ventajas:
1-. Mayor facilidad para modificar el estilo de un sitio Web.
De esta forma, al modificar las hojas de estilo cambias la presentación de todas las páginas que hagan uso de dichas hojas.
Si existe una buena separación entre el contenido y la presentación, puedes cambiar el estilo visual de un portal Web sólo con modificar sus hojas de estilo.
2-. Código más claro y sencillo.
El código libre de etiquetas de presentación, usando hojas de estilo externas, es más compacto, claro y sencillo de leer, con lo que su mantenimiento es más sencillo. En el código HTML sólo estaría presente la parte de contenido y estructura del documento, dejando toda la presentación para las hojas de estilo.
La estructura del código es muy clara, reduciéndose casi por completo a un contenido textual dividido en bloques, títulos, textos, listas, enlaces, imágenes, tablas... El número de las diferentes etiquetas y atributos HTML se reduce significativamente.
3-. Código más compacto.
Al trasladar todos los aspectos de presentación y maquetación a las hojas de estilo, el código creado es mucho más compacto. A veces se puede reducir el código a la mitad o incluso menos.
4-. Reducción de los tiempos de carga de las páginas.
Como el código es mucho más compacto, reduces los tiempos de carga de las páginas, facilitando a los-as visitantes el acceso a las mismas.
Ten en cuenta que las hojas de estilo asociadas sólo se descargan en el navegador la primera vez que se necesitan. A partir de ahí, cada vez que una página requiere una hoja de estilo que ya haya sido utilizada, el navegador la busca en su caché en vez de descargarla de la red.
Código más fácil de mantener.
El mantenimiento de las páginas que presentan separación de contenido y presentación es más sencillo y productivo, al tener un código más compacto.
5-. Personalización del estilo.
Algunos usuarios-as, por elección o necesidad, requieren cambiar la presentación de las páginas. Si usas las hojas de estilo facilitas a los usuarios-as la aplicación de sus propias hojas prediseñadas, como por ejemplo estilos de alto contraste o de accesibilidad.
6-. Mayor compatibilidad con diferentes dispositivos.
Separar el contenido y la estructura de la presentación facilita el acceso desde una amplia variedad de dispositivos (pantallas pequeñas, PDAs, móviles de última generación, etc.). Así evitarás crear diferentes versiones de las páginas en función del dispositivo, con el consiguiente ahorro de tiempo y dinero.
Aun así, si quieres controlar más la presentación de las páginas, define varias hojas de estilo diferentes y aplica unas u otras en función del dispositivo del usuario-a.
CSS permite definir diferentes estilos según el tipo de dispositivo sobre el que se visualice. Es lo que se denomina "control de medios".
1-. Mayor facilidad para modificar el estilo de un sitio Web.
De esta forma, al modificar las hojas de estilo cambias la presentación de todas las páginas que hagan uso de dichas hojas.
Si existe una buena separación entre el contenido y la presentación, puedes cambiar el estilo visual de un portal Web sólo con modificar sus hojas de estilo.
2-. Código más claro y sencillo.
El código libre de etiquetas de presentación, usando hojas de estilo externas, es más compacto, claro y sencillo de leer, con lo que su mantenimiento es más sencillo. En el código HTML sólo estaría presente la parte de contenido y estructura del documento, dejando toda la presentación para las hojas de estilo.
La estructura del código es muy clara, reduciéndose casi por completo a un contenido textual dividido en bloques, títulos, textos, listas, enlaces, imágenes, tablas... El número de las diferentes etiquetas y atributos HTML se reduce significativamente.
3-. Código más compacto.
Al trasladar todos los aspectos de presentación y maquetación a las hojas de estilo, el código creado es mucho más compacto. A veces se puede reducir el código a la mitad o incluso menos.
4-. Reducción de los tiempos de carga de las páginas.
Como el código es mucho más compacto, reduces los tiempos de carga de las páginas, facilitando a los-as visitantes el acceso a las mismas.
Ten en cuenta que las hojas de estilo asociadas sólo se descargan en el navegador la primera vez que se necesitan. A partir de ahí, cada vez que una página requiere una hoja de estilo que ya haya sido utilizada, el navegador la busca en su caché en vez de descargarla de la red.
Código más fácil de mantener.
El mantenimiento de las páginas que presentan separación de contenido y presentación es más sencillo y productivo, al tener un código más compacto.
5-. Personalización del estilo.
Algunos usuarios-as, por elección o necesidad, requieren cambiar la presentación de las páginas. Si usas las hojas de estilo facilitas a los usuarios-as la aplicación de sus propias hojas prediseñadas, como por ejemplo estilos de alto contraste o de accesibilidad.
6-. Mayor compatibilidad con diferentes dispositivos.
Separar el contenido y la estructura de la presentación facilita el acceso desde una amplia variedad de dispositivos (pantallas pequeñas, PDAs, móviles de última generación, etc.). Así evitarás crear diferentes versiones de las páginas en función del dispositivo, con el consiguiente ahorro de tiempo y dinero.
Aun así, si quieres controlar más la presentación de las páginas, define varias hojas de estilo diferentes y aplica unas u otras en función del dispositivo del usuario-a.
CSS permite definir diferentes estilos según el tipo de dispositivo sobre el que se visualice. Es lo que se denomina "control de medios".
miércoles, 26 de septiembre de 2007
Principios generales de usabilidad en sitios web
Principios generales de usabilidad en sitios web
Resumen: Aunque estos principios pueden parecer muy generales son la base de la disciplina y de su extrapolación y perfecta comprensión permite resolver cualquier casuística concreta.El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
8. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. Sobre todo cuando estamos trabajando con formularios e insercion de datos.
9. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Se recomiendan tonos pasteles de fondo sobre tonos vivos en tipografia, nunca combinar dos tonos pastel o dos tonos vivos, ya que producirian dificultad de percepcion.
10. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Aunque en estos casos no es recomendable bajo ningun concepto el uso de cookies.
11. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
Resumen: Aunque estos principios pueden parecer muy generales son la base de la disciplina y de su extrapolación y perfecta comprensión permite resolver cualquier casuística concreta.El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
8. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. Sobre todo cuando estamos trabajando con formularios e insercion de datos.
9. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Se recomiendan tonos pasteles de fondo sobre tonos vivos en tipografia, nunca combinar dos tonos pastel o dos tonos vivos, ya que producirian dificultad de percepcion.
10. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Aunque en estos casos no es recomendable bajo ningun concepto el uso de cookies.
11. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
martes, 25 de septiembre de 2007
10 Formas de saber si tu website se ha quedado obsoleto.
10 Formas de saber si tu website se ha quedado obsoleto.
Este contenido lo saque de un manual electronico que encontre hace poco en Internet; aunque esta en tono jocoso y es de hace algun tiempo .. todavia tiene vigencia.
Espero lo disfruten:
"Aviso: Que no te de un patatús si algo de ésto aparece en tus páginas. Anímate a hacer tuspáginas de la forma que te de la gana, ¡aunque alguien diga que son muy malas!.Un buen diseño es cuestión de TU gusto y estilo personal, ¡no el de algún otro!. Además, lasreglas se hacen para romperlas. Yo lo sé....porque ya las he roto algunas veces.
10 Tu imagen de encabezamiento mide más de 50KNo todos los usuarios usan banda ancha para conectarse a Innternet, y una imagen pesada puede hacer que un usuario se desconecte de la pagina por el tiempo de espera para que aparezca dicha imagen. Haz tus imágenes tipo thumbnail, y los demás ya decidiremos si nos interesa verlas o descargarlas.
9 Has colocado una imagen ¡que mide 400K!, ylo importante solo aparece en la esquina inferior izquierda ocupandosolamente 20K.¿Averigua en Diseño lo que se llama la herramienta "Crop"?
8 Utilizas demasiadas imágenes .En realidad debe existir un "equilibrio" entre la parte grafica (imagenes) y el contenido (texto), el cual debe ir en una proporcion de 60/40, siendo 40% del espacio visual ocupado por las imagenes y el 60% del espacio visual ocupado por un texto.
7 ¡No me digas que tienes música de fondo!Situacion tipica"... Si estamos intentando navegar desde la oficina sin que el jefe lo sepa, puedes estar seguro de que en el momento preciso en que cargues la paginilla, ¡zás!, aparece el jefe". Ademas la musica de fondo es uno de los elementos que mas pesa, por lo que genera retardo en la descarga del sitio, y puede llegar a ser aburrida y monotona .. ni demas esta decir que esta pasada de moda!!!
6 Usas un escáner malo, remalo, requetemalo...o no tienes niidea de cómo se maneja.Como esa especie de archivo GIF de 4 bits, que parece un negativo fotográfico después de pasar cinco años en el desierto.
5 Mensajes en la barra de estado.Bueeeeno....eso estaba bien hacia el 1997.
4 Usas imágenes de construcción en tu página.Personalmente pienso que todos sabemos a estas alturas que las páginas SIEMPRE están en construcción.
3 Tu página es un lamento desesperado para encontrar trabajo.http://www.resumen.com/aburrido.html
2 Intermitencias y marquesinas Sin comentarios.
1. ¡Estás en tu propia lista de enlaces recomendados!En Pésimo; Malo, malo; Mejorando y Consejos extra hay mucho más acerca de lo anterior.
Date una vuelta, tal vez veas algo que te interese, y quizás te rías un rato.De todas formas gracias por parar, espero que te hayas divertido."
Este contenido lo saque de un manual electronico que encontre hace poco en Internet; aunque esta en tono jocoso y es de hace algun tiempo .. todavia tiene vigencia.
Espero lo disfruten:
"Aviso: Que no te de un patatús si algo de ésto aparece en tus páginas. Anímate a hacer tuspáginas de la forma que te de la gana, ¡aunque alguien diga que son muy malas!.Un buen diseño es cuestión de TU gusto y estilo personal, ¡no el de algún otro!. Además, lasreglas se hacen para romperlas. Yo lo sé....porque ya las he roto algunas veces.
10 Tu imagen de encabezamiento mide más de 50KNo todos los usuarios usan banda ancha para conectarse a Innternet, y una imagen pesada puede hacer que un usuario se desconecte de la pagina por el tiempo de espera para que aparezca dicha imagen. Haz tus imágenes tipo thumbnail, y los demás ya decidiremos si nos interesa verlas o descargarlas.
9 Has colocado una imagen ¡que mide 400K!, ylo importante solo aparece en la esquina inferior izquierda ocupandosolamente 20K.¿Averigua en Diseño lo que se llama la herramienta "Crop"?
8 Utilizas demasiadas imágenes .En realidad debe existir un "equilibrio" entre la parte grafica (imagenes) y el contenido (texto), el cual debe ir en una proporcion de 60/40, siendo 40% del espacio visual ocupado por las imagenes y el 60% del espacio visual ocupado por un texto.
7 ¡No me digas que tienes música de fondo!Situacion tipica"... Si estamos intentando navegar desde la oficina sin que el jefe lo sepa, puedes estar seguro de que en el momento preciso en que cargues la paginilla, ¡zás!, aparece el jefe". Ademas la musica de fondo es uno de los elementos que mas pesa, por lo que genera retardo en la descarga del sitio, y puede llegar a ser aburrida y monotona .. ni demas esta decir que esta pasada de moda!!!
6 Usas un escáner malo, remalo, requetemalo...o no tienes niidea de cómo se maneja.Como esa especie de archivo GIF de 4 bits, que parece un negativo fotográfico después de pasar cinco años en el desierto.
5 Mensajes en la barra de estado.Bueeeeno....eso estaba bien hacia el 1997.
4 Usas imágenes de construcción en tu página.Personalmente pienso que todos sabemos a estas alturas que las páginas SIEMPRE están en construcción.
3 Tu página es un lamento desesperado para encontrar trabajo.http://www.resumen.com/aburrido.html
2 Intermitencias y marquesinas Sin comentarios.
1. ¡Estás en tu propia lista de enlaces recomendados!En Pésimo; Malo, malo; Mejorando y Consejos extra hay mucho más acerca de lo anterior.
Date una vuelta, tal vez veas algo que te interese, y quizás te rías un rato.De todas formas gracias por parar, espero que te hayas divertido."
Ampliando la funcionalidad de Dreamweaver: Las Extensiones
Hoy por la mañana quede gratamente sorprendido cuando un colega de Blogs, al cual yo sigo por que me encanta su blog http://www.estandaresyaccesibilidad.com (el cual recomiendo que visiten si quieren saber mas sobre usabilidad y estandares web), Gabriel Porras dejo un post para que ampliara algo mas sobre el tema de las extensiones de Adobe Dreamweaver CS3, aka Macromedia Dreamweaver.
Pues bien, amigo Gabriel, te comento que existen infinidad de extensiones, y su funciones son multiples dentro de la suite de Macromedia. Se instalan a traves de la consola de Adobe Exchange aka Macromedia Exchange y algunas son gratuitas y otras son de pago.
Pero mis favoritas, y las cuales uso con bastante frecuencia son las de la empresa InterAKT, actualmente comprada por Adobe y que para la version Adobe Dreamweaver CS3, las puedes descargar como version de prueba por 30 dias; el link esta mi lista de sitios para visitar y recordar, y se llama Adobe Dreamweaver CS3 developer tools (recuerda que debes estar registrado para poder bajarte dicha aplicacion).
Basicamente que tiene esta aplicacion:
- Puedes crear Formularios de Insercion/ Ediccion/ Eliminacion de Datos
- Te permite generar reportes con links a formularios de Insercion, Edicion, eliminacion de Datos, dichos reportes tienen formularios de busqueda parametrizable.
- Un modulo bastante completo de Creacion y Manipulacion de Mailing-List
- Un modulo para crear usuarios logeados y restriccion de acceso a paginas
- Puedes crear formularios para subir multiples imagenes a BD
- Puedes crear Listas Anidadas con conexion a BD
Si en cambio te quedas con la version Macromedia Dreamweaver 8, esta misma aplicacion se llama "INTERAKT KOLLECTION PRO 3.7.1" y tiene las mismas funcionalidades que la sucesora para Adobe Dreamweaver 8.
Ambas son de pago (es lo unico malo), pero si eres desarrollador y tienes que generar sitios dinamicos y no tienes tiempo o no conoces bien el lenguaje en el que estas programando, estas extensiones te facilitaran mucho la vida. Por cierto, puedes programar con ellas en ASP, PHP, JSP y ColdFusion.
De todas formas, Gabriel estoy abriendo en poco tiempo espero, un Blog el cual se llamara Dreamweaver4Dummies, donde compartire con todos ustedes estos conocimientos y otros sobre extensiones y mas cosas que me parecen interesantes de Dreamweaver.
La importancia del Texto en el Contenido Web (II)
Acorde con el Post anterior, a continuacion transcribo algo que encontre en la WWW y que sirve para ilustrar lo que anteriormente comente:
"El texto se considera accesible para prácticamente todos los usuarios si puede ser manejado por lectores de pantalla, navegadores no visuales y lectores braille.
Puede ser presentado visualmente, agrandado, sincronizado con un vídeo para crear un subtítulo, etc. Durante el diseño de un documento que contenga información no textual complemente esa información con textos equivalentes siempre que sea posible.
Cuando se presente al usuario un equivalente textual, éste debe cumplir esencialmente la misma función (en la medida de lo posible) que el contenido original. Para contenidos simples, un equivalente textual puede sólo necesitar describir la función o propósito del contenido. Para contenidos complejos(gráficas, gráficos, etc.) el texto equivalente puede ser más largo e incluirinformación descriptiva.
Deben proporcionarse textos equivalentes para los logotipos, fotografías, botones de envío, viñetas en listas, ASCII art y en todos los vínculos contenidos en un mapa de imagen, así como en las imágenes invisibles usadas para maquetar una página. Pautas WCAG del WAI"
La importancia del Texto en el Contenido Web
Mucho se ha escrito (valga la redundancia) sobre el texto en la Web; hay especialistas que dicen que todo debe ser texto (forma como originalmente fue concebida la Web), otros dejan en muchos casos de lado el texto, supliendolo como hacen muchos diseñadores que montan sitios web por imagenes, asi no es dificil ver como una barra de navegacion con roll-over consta de dos imagenes que se alternan, o titulos que en lugar de estar jerarquizados por etiquetas, aparecen como imagenes.
Personalmente creo que cuando se pueda aplicar texto, debemos aplicar texto bajo todas las condiciones posibles; ya que debemos pensar que no solo existen usuarios que acceden a nuestro sitio a traves de Exploradores con soporte de Imagenes, sino que tambien existen otras formas de conexion cuya compatibilidad con imagenes es limitada o nula.
Asi siguiendo esta premisa, debemos sustituir las imagenes de los rollover por las pseudoclases de CSS (a y a:hover .... se acuerdan?), por otro lado debemos sustituir los titulos por las etiquetas de marcado H1, H2 y demas familia (se acuerdan del articulo donde hablaba de la categorizacion de contenidos .. por ahi voy) y por supuesto si no puedo colocar texto, pensar en alternativas para que de alguna forma este aparezca y sea empleado en caso de no poder mostrar imagenes ... me refiero por supuesto entre otras a la etiqueta "Alt" en el caso de las imagenes.
Y me diran... que ganamos con todo esto? .. muy sencillo: Facilidad de Mantenimiento del Sitio, imaginense por un momento que quiero actualizar las opciones de un menu ... con imagenes y rollover, tengo que crear todas las opciones dos veces 1 para normal y otra para el intercambio ... editar el codigo, crear el espacio para añadirlas, programar las opciones y como resultado incrementar el peso del sitio. Si lo tengo por CSS con Pseudo clases, lo unico que tengo que hacer es escribir el nombre en el HTML vincularlo ... de todo lo demas se encargan las Pseudo clases .. asi de sencillo ... y lo mejor ... estaremos construyendo un sitio accesible y estandarizado.
viernes, 21 de septiembre de 2007
Separación de Paginas en Areas claramente definidas.
Según Steve Krugg, «los usuarios deberían ser capaces de señalar las distintas áreas de una página y decir cosas como: “lo que puedo hacer en este sitio”, “productos que vende esta empresa”, “navegación para ir al resto del sito”, etcétera».
Realmente, a propósito de la jerarquía visual, hay que dividir la página en áreas claramente definidas porque permite que los usuarios puedan decidir rápidamente y casi sin pensar en qué áreas de la página deben centrar su atención y cuáles pueden obviar.
Resultan significativos los estudios acerca de la lectura rápida de los usuarios en la Web que vienen a sugerir que éstos deciden muy rápidamente en qué partes de la página es más probable que esté la información que buscan y que casi nunca miran para el resto de la página.
Realmente, a propósito de la jerarquía visual, hay que dividir la página en áreas claramente definidas porque permite que los usuarios puedan decidir rápidamente y casi sin pensar en qué áreas de la página deben centrar su atención y cuáles pueden obviar.
Resultan significativos los estudios acerca de la lectura rápida de los usuarios en la Web que vienen a sugerir que éstos deciden muy rápidamente en qué partes de la página es más probable que esté la información que buscan y que casi nunca miran para el resto de la página.
Una forma de definir las areas, es utilizando las etiquetas <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , donde cada una de ellas indica el titulo o subtitulo en funcion de la importancia del contenido, asi por ejemplo <h1> seria el titulo principal de la pagina o documento que estamos mostrando, <h2> serian los titulos de los principales apartados del contenido de esa pagina, <h3> serian los subtitulos de dichos contenidos y asi sucesivamente hasta llegar a <h6>.
Hacer uso de las convenciones
Las convenciones son una serie de normas no escritas, adquiridas por el uso cotidiano, que todo el mundo conoce y sabe interpretar correctamente.
Es decir, vendrían a representar una especie de estándares de facto. Si nos atenemos a ellas, garantizamos que nuestros usuarios van a ser capaces de usar un determinado producto, saber moverse cómodamente por un sitio web, leer un nuevo periódico o revista... sin tener que estudiar un manual de usuario ni dedicar un tiempo a la experimentación y el aprendizaje.
Al igual que sabemos hojear un periódico gracias a que podemos identificar fácilmente las distintas noticias que lo forman porque todos ellos siguen unos patrones comunes (los titulares más grandes y en negrita que se expanden tantas columnas como ocupa la noticia, por ejemplo), hay multitud de convenciones que se han ido estableciendo en la Web y que deberemos seguir si no queremos que usar nuestro sitio sea una especie de pesadilla para sus visitantes.
Por citar sólo algunos de ellos, podemos enumerar los siguientes:
Los enlaces en azul y subrayados
El uso de menús de navegación (normalmente, en forma de barra lateral izquierda o bien en la parte superior de la página)
La metáfora de la cesta de la compra
etcétera
Es decir, vendrían a representar una especie de estándares de facto. Si nos atenemos a ellas, garantizamos que nuestros usuarios van a ser capaces de usar un determinado producto, saber moverse cómodamente por un sitio web, leer un nuevo periódico o revista... sin tener que estudiar un manual de usuario ni dedicar un tiempo a la experimentación y el aprendizaje.
Al igual que sabemos hojear un periódico gracias a que podemos identificar fácilmente las distintas noticias que lo forman porque todos ellos siguen unos patrones comunes (los titulares más grandes y en negrita que se expanden tantas columnas como ocupa la noticia, por ejemplo), hay multitud de convenciones que se han ido estableciendo en la Web y que deberemos seguir si no queremos que usar nuestro sitio sea una especie de pesadilla para sus visitantes.
Por citar sólo algunos de ellos, podemos enumerar los siguientes:
Los enlaces en azul y subrayados
El uso de menús de navegación (normalmente, en forma de barra lateral izquierda o bien en la parte superior de la página)
La metáfora de la cesta de la compra
etcétera
Creación de una Jerarquia Visual Clara
¿Cómo facilitamos el proceso de lectura rápida a un usuario? Una de las mejores cosas que podemos hacer en este sentido es que la apariencia de todos los elementos de la página refleje lo más fielmente posible las relaciones entre esos mismos elementos. Es decir, que
quede claro qué cosas están relacionadas entre sí, qué cosas son parte de otras y así sucesivamente.
En otras palabras, es necesario crear una jerarquía visual lo más clara posible, que refleje la estructura lógica subyacente de la página.
Pero, ¿qué queremos decir realmente con crear una jerarquía visual? Pues cosas como las siguientes:
Cuanto más importante es una cosa, más prominente debe ser en la página Aunque pueda parecer una obviedad, muchos sitios Web no respetan esta sencilla máxima, no sólo de la Web, sino de cualquier publicación impresa.
Por ejemplo, que los títulos destaquen del contenido normal de la página, ya sea haciéndolos más grandes, poniéndolos en negrita o en otro color, dejando más espaciado entre ellos y el resto de los elementos, etcétera (o bien mediante una combinación de las técnicas anteriores).
Las cosas que están lógicamente relacionadas también han de estarlo visualmente
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido. Anidar visualmente unos elementos dentro de otros para mostrar qué cosas son parte de otras
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido.
1. Facilitar la lectura rápida
Ya hemos comentado que cuando usamos la Web, en vez de leer, todos tendemos a hojear las páginas, y que no debíamos pretender luchar contra ese hábito de los usuarios sino asumirlo y aun potenciarlo. ¿Cómo? Eso es lo que vamos a ver en este apartado, mediante algunos sencillos consejos.
En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:
Crear una clara jearquía visual en cada página
Hacer uso de las convenciones
Separar las páginas en áreas cláramente definidas
Hacer obvio dónde se puede hacer clic
Minimizar el ruido
1.1 Crear una jerarquía visual clara
¿Cómo facilitamos el proceso de lectura rápida a un usuario? Una de las mejores cosas que podemos hacer en este sentido es que la apariencia de todos los elementos de la página refleje lo más fielmente posible las relaciones entre esos mismos elementos. Es decir, que
quede claro qué cosas están relacionadas entre sí, qué cosas son parte de otras y así sucesivamente.
En otras palabras, es necesario crear una jerarquía visual lo más clara posible, que refleje la estructura lógica subyacente de la página.
Pero, ¿qué queremos decir realmente con crear una jerarquía visual? Pues cosas como las siguientes:
Cuanto más importante es una cosa, más prominente debe ser en la página Aunque pueda parecer una obviedad, muchos sitios Web no respetan esta sencilla máxima, no sólo de la Web, sino de cualquier publicación impresa.
Por ejemplo, que los títulos destaquen del contenido normal de la página, ya sea haciéndolos más grandes, poniéndolos en negrita o en otro color, dejando más espaciado entre ellos y el resto de los elementos, etcétera (o bien mediante una combinación de las técnicas anteriores).
Las cosas que están lógicamente relacionadas también han de estarlo visualmente
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido. Anidar visualmente unos elementos dentro de otros para mostrar qué cosas
son parte de otras
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido.
Ya hemos comentado que cuando usamos la Web, en vez de leer, todos tendemos a hojear las páginas, y que no debíamos pretender luchar contra ese hábito de los usuarios sino asumirlo y aun potenciarlo. ¿Cómo? Eso es lo que vamos a ver en este apartado, mediante algunos sencillos consejos.
En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:
Crear una clara jearquía visual en cada página
Hacer uso de las convenciones
Separar las páginas en áreas cláramente definidas
Hacer obvio dónde se puede hacer clic
Minimizar el ruido
1.1 Crear una jerarquía visual clara
¿Cómo facilitamos el proceso de lectura rápida a un usuario? Una de las mejores cosas que podemos hacer en este sentido es que la apariencia de todos los elementos de la página refleje lo más fielmente posible las relaciones entre esos mismos elementos. Es decir, que
quede claro qué cosas están relacionadas entre sí, qué cosas son parte de otras y así sucesivamente.
En otras palabras, es necesario crear una jerarquía visual lo más clara posible, que refleje la estructura lógica subyacente de la página.
Pero, ¿qué queremos decir realmente con crear una jerarquía visual? Pues cosas como las siguientes:
Cuanto más importante es una cosa, más prominente debe ser en la página Aunque pueda parecer una obviedad, muchos sitios Web no respetan esta sencilla máxima, no sólo de la Web, sino de cualquier publicación impresa.
Por ejemplo, que los títulos destaquen del contenido normal de la página, ya sea haciéndolos más grandes, poniéndolos en negrita o en otro color, dejando más espaciado entre ellos y el resto de los elementos, etcétera (o bien mediante una combinación de las técnicas anteriores).
Las cosas que están lógicamente relacionadas también han de estarlo visualmente
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido. Anidar visualmente unos elementos dentro de otros para mostrar qué cosas
son parte de otras
Por ejemplo, agrupándolas bajo un mismo título, usando para todas ellas un estilo visual parecido o introduciéndolas en un área de la página claramente definido.
La Creación de Contenidos Web
Ya hemos comentado que cuando usamos la Web, en vez de leer, todos tendemos a hojear las páginas, y que no debíamos pretender luchar contra ese hábito de los usuarios sino asumirlo y aun potenciarlo. ¿Cómo? Eso es lo que vamos a ver en este apartado, mediante algunos sencillos consejos.
En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:
Crear una clara jearquía visual en cada página
Hacer uso de las convenciones
Separar las páginas en áreas cláramente definidas
Hacer obvio dónde se puede hacer clic
Minimizar el ruido
En concreto, éstas son las cinco cosas más importantes que, a juicio de Steve Krug (Krug,
2000 ) debemos hacer para asegurarnos de que nuestros usuarios ven —y son capaces de comprender— la mayor parte posible de nuestro sitio:
Crear una clara jearquía visual en cada página
Hacer uso de las convenciones
Separar las páginas en áreas cláramente definidas
Hacer obvio dónde se puede hacer clic
Minimizar el ruido
El uso de Extensiones con Adobe Dreamweaver CS3
Mucho se ha hablado y mucho se ha escrito sobre este magnifico programa editor visual de HTML. Son muchos los que lo usan para maquetar y darle un toque profesional a sus sitios, pero creo que somos muy pocos los que en realidad conocemos toda la potencia y funcionalidad de dicho programa.
Hace algun tiempo, escribi en Google "Macromedia Extension", y .... oh gran sorpresa!, me encontre frente a un listado de sitios los cuales estaban por supuesto en varios idiomas, pero que por sobre todos ellos destacaba una empresa por aquel entonces Rumana llamada "Inter AKT", la cual se dedicaba a crear extensiones para Macromedia Dreamweaver (en aquel entonces). Asi que decidi buscar en otros sitios de intercambio P2P toda la lista de extensiones que alli estaban listadas e instalarlas en mi Dreamweaver 8 (por aquel entonces).
El resultado fue increible, me encontre en mi interfaz dentro de la caja de insercion de objetos una serie de pestañas nuevas que entre otras cosas y con tan solo dos clicks de raton y un sencillo cuadro de configuracion me permitian entre otras cosas:
- Crear un Carrousel de Fotos
- Crear una Carrito de Compras (Shopping Cart)
- Crear un Foro
- Intercambiar XML por MySQL y al reves
En fin todo un mundo de oportunidades al alcance de uno con tan solo dos clicks de raton y sin saber programar.
Amigo, le hago la siguiente pregunta: Sabe Ud en cuanto tiempo era yo capaz de diseñar, desarrollar y programar un Carrousel de Imagenes? .... en 4 horas .... gracias a Adobe Extension .. ahora en 4 Clicks ... ah! y lo mas importante ... sin errores! ... por que lo de los errores eran en aquel entonces, hoy ya no.
Hace algun tiempo, escribi en Google "Macromedia Extension", y .... oh gran sorpresa!, me encontre frente a un listado de sitios los cuales estaban por supuesto en varios idiomas, pero que por sobre todos ellos destacaba una empresa por aquel entonces Rumana llamada "Inter AKT", la cual se dedicaba a crear extensiones para Macromedia Dreamweaver (en aquel entonces). Asi que decidi buscar en otros sitios de intercambio P2P toda la lista de extensiones que alli estaban listadas e instalarlas en mi Dreamweaver 8 (por aquel entonces).
El resultado fue increible, me encontre en mi interfaz dentro de la caja de insercion de objetos una serie de pestañas nuevas que entre otras cosas y con tan solo dos clicks de raton y un sencillo cuadro de configuracion me permitian entre otras cosas:
- Crear un Carrousel de Fotos
- Crear una Carrito de Compras (Shopping Cart)
- Crear un Foro
- Intercambiar XML por MySQL y al reves
En fin todo un mundo de oportunidades al alcance de uno con tan solo dos clicks de raton y sin saber programar.
Amigo, le hago la siguiente pregunta: Sabe Ud en cuanto tiempo era yo capaz de diseñar, desarrollar y programar un Carrousel de Imagenes? .... en 4 horas .... gracias a Adobe Extension .. ahora en 4 Clicks ... ah! y lo mas importante ... sin errores! ... por que lo de los errores eran en aquel entonces, hoy ya no.
jueves, 20 de septiembre de 2007
Las 14 Pautas de Accesibilidad
Aqui transcribo las 14 Pautas de Accesibilidad que emitio la W3C para crear sitios usables. En este Post no entrare a discutir ni aclarar ninguna de ellas, lo hare una por una en Post posteriores.
PAUTA 1: Proporcione alternativas equivalentes al contenido visual y auditivo.
PAUTA 2: No se base sólo en el color.
PAUTA 3: Utilice marcadores y hojas de estilo y hágalo apropiadamente.
PAUTA 4: Identifique el idioma original usado.
PAUTA 5: Cree tablas que se transformen correctamente.
PAUTA 6: Asegure que las páginas que incorporan nuevas tecnologías se transformen
correctamente.
PAUTA 7: Asegure al usuario el control sobre los cambios de los contenidos
tempo-dependientes.
PAUTA 8: Asegure la accesibilidad directa de las interfaces de usuario incrustadas.
PAUTA 9: Diseñe para la independencia del dispositivo.
PAUTA 10: Utilice soluciones provisionales.
PAUTA 11: Utilice las tecnologías y pautas W3C.
PAUTA 12: Proporcione información de contexto y orientación.
PAUTA 13: Proporcione mecanismos claros de navegación.
PAUTA 14: Asegure que los documentos sean claros y simples.
PAUTA 1: Proporcione alternativas equivalentes al contenido visual y auditivo.
PAUTA 2: No se base sólo en el color.
PAUTA 3: Utilice marcadores y hojas de estilo y hágalo apropiadamente.
PAUTA 4: Identifique el idioma original usado.
PAUTA 5: Cree tablas que se transformen correctamente.
PAUTA 6: Asegure que las páginas que incorporan nuevas tecnologías se transformen
correctamente.
PAUTA 7: Asegure al usuario el control sobre los cambios de los contenidos
tempo-dependientes.
PAUTA 8: Asegure la accesibilidad directa de las interfaces de usuario incrustadas.
PAUTA 9: Diseñe para la independencia del dispositivo.
PAUTA 10: Utilice soluciones provisionales.
PAUTA 11: Utilice las tecnologías y pautas W3C.
PAUTA 12: Proporcione información de contexto y orientación.
PAUTA 13: Proporcione mecanismos claros de navegación.
PAUTA 14: Asegure que los documentos sean claros y simples.
Guia breve para crear sitios web accesibles
1. Imágenes y animaciones: Use texto alternativo (atributo alt) para describir la función de los elementos visuales.
2. Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas activas.
3. Multimedia: Facilite subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos no accesibles.
4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de contexto.
Por ejemplo, no usar «pincha aquí».
5. Organización de las páginas: Use encabezados (H1, H2, H3,...), listas y estructura consistente. Use Hojas de Estilos en Cascada (CSS) para maquetación y estilo, donde sea posible.
6. Gráficos de datos: Resuma o use el atributo longdesc.
7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan soporte.
8. Marcos (Frames): Etiquete con los atributos title o name.
9. Tablas: Realícelas de manera que se puedan leer línea a línea. Incluya un resumen.
Evite el uso de tablas para dar formato a las páginas.
10. Revise su trabajo: Valide el código HTML. Use herramientas de evaluación y navegadores sólo-texto para verificar la accesibilidad.
2. Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas activas.
3. Multimedia: Facilite subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos no accesibles.
4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de contexto.
Por ejemplo, no usar «pincha aquí».
5. Organización de las páginas: Use encabezados (H1, H2, H3,...), listas y estructura consistente. Use Hojas de Estilos en Cascada (CSS) para maquetación y estilo, donde sea posible.
6. Gráficos de datos: Resuma o use el atributo longdesc.
7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan soporte.
8. Marcos (Frames): Etiquete con los atributos title o name.
9. Tablas: Realícelas de manera que se puedan leer línea a línea. Incluya un resumen.
Evite el uso de tablas para dar formato a las páginas.
10. Revise su trabajo: Valide el código HTML. Use herramientas de evaluación y navegadores sólo-texto para verificar la accesibilidad.
miércoles, 19 de septiembre de 2007
Los Errores más Frecuentes a la hora de Diseñar en Web
1-. Modelo de negocio
Tratar la Web como un simple folleto, en vez de cómo algo fundamental que va a cambiar la forma de dirigir la empresa en la economía en red.
2-. Gestión de proyectos
Gestionar un proyecto web como si se tratara de un proyecto corporativo tradicional. Esto nos lleva a un diseño interno provisto de una interfaz de usuario inconsistente. En vez de ello, un siito web debe ser gestionado como un proyecto específico de interfaz de cliente.
3-. Arquitectura de la información
Estructurar el sitio para que refleje la forma en que la empresa está estructurada. En vez de ello, el sitio debe estar estructurado para reflejar las tareas de los usuarios y sus puntos de vista en el espacio informativo.
4-. Diseño de páginas
Crear páginas que tengan un aspecto atractivo y que evoquen sensaciones positivas al ser probadas internamente. Las pruebas internas no sufren los retrasos de tiempo de respuesta, que son el determinante principal de la usabilidad; de forma similar, una prueba no expone la dificultad que va a tener un usuario novel en encontrar y comprender los distintos elementos de las páginas. En lugar de ello, diseño el sitio para que el usuario tenga una experiencia óptima en circunstancias reales, aunque sus pruebas sean menos “atractivas”.
5-. Creación de contenido
Escribir en el mismo estilo lineal en el que siempre haya escrito. En lugar de ello, oblíguese a escribir con un nuevo estilo optimizado para los lectores en línea, los cuales suelen escanear el texto y necesitan páginas muy breves con la información secundaria relegada a páginas de apoyo.
6-. Estrategia de vinculación
Tratar su propio sitio como el único importante, sin vínculos a otros sitios y sin puntos de entrada bien diseñados para que otros coloquen sus vínculos. Muchas empresas no utilizan vínculos correctos al mencionar su sitio web en su propia publicidad. En vez de ello, recuerde que el hipertexto es la base de la Web, y que ningún sitio es una isla.
Esperamos que esta introducción haya servido para que el alumno se plantee cosas que quizás antes obviaba cuando tenga que diseñar un sitio web y, fundamentalmente, para que lo haga siempre –no nos cansaremos de repetirlo– desde el punto de vista del usuario.
Por último, ha de quedar claro que la usabilidad no tiene que ver únicamente con el diseño gráfico, o con que haya mecanismos apropiados de navegación, exista un mapa del sitio, etcétera. En muchas ocasiones, el problema viene de no haber sabido ofrecer la funcionalidad demandada por el usuario o que, simplemente, le haría sentirse más satisfecho usando nuestro sitio.
En definitiva, como afirma Nielsen, «la Web es un medio nuevo, por lo que requiere un planteamiento distinto».
Tratar la Web como un simple folleto, en vez de cómo algo fundamental que va a cambiar la forma de dirigir la empresa en la economía en red.
2-. Gestión de proyectos
Gestionar un proyecto web como si se tratara de un proyecto corporativo tradicional. Esto nos lleva a un diseño interno provisto de una interfaz de usuario inconsistente. En vez de ello, un siito web debe ser gestionado como un proyecto específico de interfaz de cliente.
3-. Arquitectura de la información
Estructurar el sitio para que refleje la forma en que la empresa está estructurada. En vez de ello, el sitio debe estar estructurado para reflejar las tareas de los usuarios y sus puntos de vista en el espacio informativo.
4-. Diseño de páginas
Crear páginas que tengan un aspecto atractivo y que evoquen sensaciones positivas al ser probadas internamente. Las pruebas internas no sufren los retrasos de tiempo de respuesta, que son el determinante principal de la usabilidad; de forma similar, una prueba no expone la dificultad que va a tener un usuario novel en encontrar y comprender los distintos elementos de las páginas. En lugar de ello, diseño el sitio para que el usuario tenga una experiencia óptima en circunstancias reales, aunque sus pruebas sean menos “atractivas”.
5-. Creación de contenido
Escribir en el mismo estilo lineal en el que siempre haya escrito. En lugar de ello, oblíguese a escribir con un nuevo estilo optimizado para los lectores en línea, los cuales suelen escanear el texto y necesitan páginas muy breves con la información secundaria relegada a páginas de apoyo.
6-. Estrategia de vinculación
Tratar su propio sitio como el único importante, sin vínculos a otros sitios y sin puntos de entrada bien diseñados para que otros coloquen sus vínculos. Muchas empresas no utilizan vínculos correctos al mencionar su sitio web en su propia publicidad. En vez de ello, recuerde que el hipertexto es la base de la Web, y que ningún sitio es una isla.
Esperamos que esta introducción haya servido para que el alumno se plantee cosas que quizás antes obviaba cuando tenga que diseñar un sitio web y, fundamentalmente, para que lo haga siempre –no nos cansaremos de repetirlo– desde el punto de vista del usuario.
Por último, ha de quedar claro que la usabilidad no tiene que ver únicamente con el diseño gráfico, o con que haya mecanismos apropiados de navegación, exista un mapa del sitio, etcétera. En muchas ocasiones, el problema viene de no haber sabido ofrecer la funcionalidad demandada por el usuario o que, simplemente, le haría sentirse más satisfecho usando nuestro sitio.
En definitiva, como afirma Nielsen, «la Web es un medio nuevo, por lo que requiere un planteamiento distinto».
Cómo usamos la Web
Uno de los errores más comunes a la hora de diseñar una página web es pensar que el usuario va a leerla como si se tratase de la página de un libro, comenzando arriba a la izquierda y leyendo de manera secuencial todo el contenido de la página, hasta el final. Además, tendemos a creer que va a dedicar un tiempo a averiguar cómo hemos organizado las cosas (en la propia página y en el sitio web en general) y que sopesará las distintas opciones que ésta le ofrece antes de decirse a pulsar en un determinado enlace.
Lo anterior se parece bastante poco al modo en que todos nosotros utilizamos la Web. En vez de eso, lo que hacemos la mayoría de usuarios de Internet es hojear las páginas, hacer lectura rápida de parte del texto y pulsar en el primer enlace que capta nuestra intención de un modo u otro, o que nos recuerda aquello que estamos tratando de hacer. Es decir, normalmente hay grandes porciones de la página para las que ni siquiera miramos.
Como afirma Steve Krug, el diseñador de la página muchas veces piensa que está
haciendo literatura (o, cuando menos, una especie de folleto de un producto) mientras que el usuario se enfrenta a la Web con una actitud similar a la que mostramos ante las vallas publicitarias que vemos en la carretera mientras viajamos en su coche a cien kilómetros por hora.
Así pues, en vez de tratar de luchar contra esta actitud, lo que debemos hacer es asumirla y, sabiendo que casi nadie va a molestarse en leer detenidamente ni, mucho menos, en orden, el contenido de nuestras páginas web, trataremos precisamente de favorecer esa lectura rápida para captar la atención del usuario sobre aquellos aspectos más importantes de cada página.
En "Creación de sitios usables y arquitectura de la información" veremos algunas pautas de diseño que pueden ayudarnos a facilitar dicha lectura rápida.
Básicamente, de lo que se trata es ofrecer una clara jerarquía visual de la página, como siempre, desde el punto de vista del usuario, tratando de destacar aquello que consideremos más importante para él en cada contexto, y no lo que la empresa piense que es más importante.
Algunos de estos principios de diseño tienen que ver con el uso correcto del espacio en blanco, la eliminación del ruido de la página, omitiendo todo aquello que sea prescindible para así dar más preponderancia a lo fundamental, hacer que los enlaces resulten obvios
(es decir, que el usuario sepa que ahí se puede pulsar), etcétera.
Lo anterior se parece bastante poco al modo en que todos nosotros utilizamos la Web. En vez de eso, lo que hacemos la mayoría de usuarios de Internet es hojear las páginas, hacer lectura rápida de parte del texto y pulsar en el primer enlace que capta nuestra intención de un modo u otro, o que nos recuerda aquello que estamos tratando de hacer. Es decir, normalmente hay grandes porciones de la página para las que ni siquiera miramos.
Como afirma Steve Krug, el diseñador de la página muchas veces piensa que está
haciendo literatura (o, cuando menos, una especie de folleto de un producto) mientras que el usuario se enfrenta a la Web con una actitud similar a la que mostramos ante las vallas publicitarias que vemos en la carretera mientras viajamos en su coche a cien kilómetros por hora.
Así pues, en vez de tratar de luchar contra esta actitud, lo que debemos hacer es asumirla y, sabiendo que casi nadie va a molestarse en leer detenidamente ni, mucho menos, en orden, el contenido de nuestras páginas web, trataremos precisamente de favorecer esa lectura rápida para captar la atención del usuario sobre aquellos aspectos más importantes de cada página.
En "Creación de sitios usables y arquitectura de la información" veremos algunas pautas de diseño que pueden ayudarnos a facilitar dicha lectura rápida.
Básicamente, de lo que se trata es ofrecer una clara jerarquía visual de la página, como siempre, desde el punto de vista del usuario, tratando de destacar aquello que consideremos más importante para él en cada contexto, y no lo que la empresa piense que es más importante.
Algunos de estos principios de diseño tienen que ver con el uso correcto del espacio en blanco, la eliminación del ruido de la página, omitiendo todo aquello que sea prescindible para así dar más preponderancia a lo fundamental, hacer que los enlaces resulten obvios
(es decir, que el usuario sepa que ahí se puede pulsar), etcétera.
martes, 18 de septiembre de 2007
¿Qué son las «prioridades», los «niveles de adecuación» y cómo se usan?
A la hora de evaluar un site, es importante que el contenido del mismo este diseñado acorde con las pautas de accesibilidad que recomienda la W3C y la WAI 508.
Para averiguar si nuestro sitio cumple con dichas pautas (14 en total), existen sitios que se encargan de validar nuestro contenido en funcion de unos puntos de verificacion (76 en total), cada punto de verificación tiene asignado uno de los tres niveles de prioridad.
• La Prioridad 1 es para los puntos de verificación que el desarrollador tiene que satisfacer;
si no, algunos grupos de personas serán incapaces de acceder a la información
de un sitio;
• La Prioridad 2 el desarrollador debe satisfacerla; sin ello alguien encontrará muchas
dificultades para acceder a la información;
• La Prioridad 3 el desarrollador puede satisfacerla; de lo contrario, algunas personas
hallarán dificultades para acceder a la información.
• La Prioridad 1 es para los puntos de verificación que el desarrollador tiene que satisfacer;
si no, algunos grupos de personas serán incapaces de acceder a la información
de un sitio;
• La Prioridad 2 el desarrollador debe satisfacerla; sin ello alguien encontrará muchas
dificultades para acceder a la información;
• La Prioridad 3 el desarrollador puede satisfacerla; de lo contrario, algunas personas
hallarán dificultades para acceder a la información.
Segun los resultados, nos dan una serie de recomendaciones y nos pueden calificar en funcion de 3 niveles de adecuacion, la especificación tiene tres «niveles de adecuación» para facilitar la referencia por otras organizaciones:
• El nivel de adecuación «A» (A) incluye los puntos de verificación de prioridad 1;
• El nivel «Doble A» (AA) incluye las prioridades 1 y 2;
Esta página de «preguntas más frecuentes» proporciona información sobre la
recomendación W3C (World Wide Web Consortium) «Pautas de Accesibilidad
al Contenido en la Web 1.0», emitida el 5 de mayo de 1999.
20
• El nivel «Triple A» (AAA) incluye las prioridades 1, 2 y 3.
Para aquellos cuyas páginas siguen estas pautas, hay disponibles unos logotipos que
pueden colocar en sus sitios para mostrar su nivel de adecuación. Vea la pregunta 12 de
este documento “¿Qué recursos de apoyo están disponibles para usar estas pautas?”,
para informarse sobre los programas de revisión, parcialmente automatizados, de ayuda
para la valoración de los sitios.
• El nivel de adecuación «A» (A) incluye los puntos de verificación de prioridad 1;
• El nivel «Doble A» (AA) incluye las prioridades 1 y 2;
Esta página de «preguntas más frecuentes» proporciona información sobre la
recomendación W3C (World Wide Web Consortium) «Pautas de Accesibilidad
al Contenido en la Web 1.0», emitida el 5 de mayo de 1999.
20
• El nivel «Triple A» (AAA) incluye las prioridades 1, 2 y 3.
Para aquellos cuyas páginas siguen estas pautas, hay disponibles unos logotipos que
pueden colocar en sus sitios para mostrar su nivel de adecuación. Vea la pregunta 12 de
este documento “¿Qué recursos de apoyo están disponibles para usar estas pautas?”,
para informarse sobre los programas de revisión, parcialmente automatizados, de ayuda
para la valoración de los sitios.
Que son las Pautas de Accesibilidad Web
Las «Pautas de Accesibilidad al Contenido en la Web 1.0» son una especificación del W3C que proporciona una guía sobre la accesibilidad de los sitios de la Web para las personas con discapacidades.
Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. La especificación contiene catorce pautas, que son los principios generales para el diseño accesible. Cada pauta está asociada a uno o más puntos de verificación que describen cómo aplicar esa pauta a las presentaciones de las páginas
Web.
Un apéndice de estas pautas, la «Lista de puntos de verificación para las Pautas de
Accesibilidad al Contenido en la Web 1.0», presenta los puntos de verificación clasificados por prioridades, para encontrarlas fácilmente. Estas pautas no sólo hacen las páginas más accesibles para las personas con discapacidad, sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios que utilizan navegadores diferentes o los nuevos ordenadores portátiles o basados en la voz.
Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. La especificación contiene catorce pautas, que son los principios generales para el diseño accesible. Cada pauta está asociada a uno o más puntos de verificación que describen cómo aplicar esa pauta a las presentaciones de las páginas
Web.
Un apéndice de estas pautas, la «Lista de puntos de verificación para las Pautas de
Accesibilidad al Contenido en la Web 1.0», presenta los puntos de verificación clasificados por prioridades, para encontrarlas fácilmente. Estas pautas no sólo hacen las páginas más accesibles para las personas con discapacidad, sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios que utilizan navegadores diferentes o los nuevos ordenadores portátiles o basados en la voz.
La importancia de Desarrollar HTML con Listas
Muchas veces la diferencia entre un codigo limpio y accesible que nos permite modificar el Look&Feel de un componente web o sencillamente "hacer lo que se pueda por el paciente" esta en la correcta estructuracion del HTML.
A lo largo de mi carrera, he pasado por diversas etapas, desde usar tablas para distribuir contenidos, pasando por la tipica conversion de imagenes de Fireworks para Dreamweaver y mostrar el site cargado de imagenes hasta el uso de div's, clases y Id's para darle look&feel a todo y posicionar todo en la interfaz de usuario.
Ha sido un largo y a veces, por que no?, tortuoso camino del cual he aprendido ciertas cosas:
1) Las secciones se estructuran a traves de la etiqueta (div)
2) Los contenidos de texto se estructuran a traves de la etiqueta (p)
3) Los diferentes contenidos de una seccion se estructuran con Listas (ul, li)
4) Los resultados de reportes se presentaran en tablas (función para la que han sido creadas)
Hasta aqui todo bien, pero detengamonos en el punto 3 y fijemonos en algo:
Cuando yo quiero jerarquizar contenido (Titulo, Subtitulo, Imagen, Contenido) que opciones tengo:
Tabular todo y mostrar el contenido en diferentes celdas Hacer uso del Divisionismo y crear div's hasta para separar los diferentes parrafosUsar al libre albedrio dentro de un Div etiquetas Perfecto, yo me quedaria con la opcion 3 .... pero que tal si el cliente a ultima hora (y creame que ocurre), decide darle un cambio drastico de posicion, visualizacion o distribucion a una zona de contenido.
A lo largo de mi carrera, he pasado por diversas etapas, desde usar tablas para distribuir contenidos, pasando por la tipica conversion de imagenes de Fireworks para Dreamweaver y mostrar el site cargado de imagenes hasta el uso de div's, clases y Id's para darle look&feel a todo y posicionar todo en la interfaz de usuario.
Ha sido un largo y a veces, por que no?, tortuoso camino del cual he aprendido ciertas cosas:
1) Las secciones se estructuran a traves de la etiqueta (div)
2) Los contenidos de texto se estructuran a traves de la etiqueta (p)
3) Los diferentes contenidos de una seccion se estructuran con Listas (ul, li)
4) Los resultados de reportes se presentaran en tablas (función para la que han sido creadas)
Hasta aqui todo bien, pero detengamonos en el punto 3 y fijemonos en algo:
Cuando yo quiero jerarquizar contenido (Titulo, Subtitulo, Imagen, Contenido) que opciones tengo:
Tabular todo y mostrar el contenido en diferentes celdas Hacer uso del Divisionismo y crear div's hasta para separar los diferentes parrafosUsar al libre albedrio dentro de un Div etiquetas Perfecto, yo me quedaria con la opcion 3 .... pero que tal si el cliente a ultima hora (y creame que ocurre), decide darle un cambio drastico de posicion, visualizacion o distribucion a una zona de contenido.
1-. El hecho de usar tablas me impide bajo toda circunstancia cambiar de posicion algun componente, en el mejor de los escenarios tengo que crear nuevas celdas y divisiones y aguantar los descuadres de medidas que esto genera.
2-. Si use divisiones, estare en una posicion mas privilegiada que con las tablas, pero igual las medidas de los divs y su opcion de flotar me crearan quebraderos de cabeza.
3-. Por ultimo, si use style, y el reposicionar todo eso se puede volver complicado al entrar en el codigo .. sino me creen, hagan la prueba.
Existe una opcion, que aunque parece bastante primitiva, desde el momento que la descubri, cambio mi vida por completo, veamos:Estructurando todo el contenido en listas tengo varios problemas resueltos:
1) La presentacion secuencial de los contenidos esta estructurada y jerarquizada, por lo que puedo con unicamente declarar una clase mover a mi antojo todo el contenido que encierra una lista o sub-lista.
2) En combinacion con la etiqueta de estilo CSS float, puedo usar tanto vertical como horizontalmente el contenido de las listas.
3) A la hora de cambiar look&Feel, el codigo es mas limpio por lo que sera mas legible y por ultimo de fácil comprension.
Desde aqui le animo a que pruebe a hacer por ejemplo una galeria de imagenes basadas en listas, o una barra de navegacion.
Mi Primera Entrada
Hola amigos: Esta es mi primera entrada en mi Blog Web4Dummies, y mi idea es descubrirle a todo aquel que visita mi Blog, el apasionante mundo de Internet, pero visto desde bastidores, de como funcionan las paginas web, como se llega a montar un sitio y por que se ha montado ese sitio, cual es el camino a seguir, etc. Es decir les mostrare desde el punto de vista del desarrollador cuales son las herramientas, las metodologías y los procesos para el desarrollo de un Sitio Web.
Suscribirse a:
Entradas (Atom)
