Planeta WEB 2.0 - Inteligencia Colectiva o Medios Fast Food
Nuevo libro sobre el fenómeno Web 2.0, escrito por Cristóbal Cobo y Hugo Pardo.
Se puede descargar y leer completo de forma gratuita porque está publicado con una licencia Creative Commons.
Son en total 162 páginas en formato PDF.
YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Solo hay que indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.
Sitio: http://builder.yaml.de/
Desde hace un par de meses esta pronto y al aire www.webtodoweb.com, misma web, mismos temas, mismos articulos, un poco mejor...
Clic para ir >>
Solo agradecer a http://uxespanol.blogspot.com/ que selecciono mi blog entre otros destacados...
hoy no hay sobre accesibilidad ni usabilidad, solo un saludo!
Jing es una aplicación de Windows y Mac que permite capturar imágenes y vídeos de nuestro escritorio y los sube a internet, copiando en el portapapeles la url final para nosotros pegarla en nuestra web.Una herramienta muy útil si queremos realizar documentación o tutoriales. En las imágenes permite insertar flechas y texto, y los vídeos muestran con claridad las acciones que se realizan.
Tanto los vídeos como las imágenes se alojan en screencast.com, disponiendo todos los usuarios 200Mb de alojamiento.
8 buenos consejos para que podamos mejorar la usabilidad de nuestras aplicaciones web, algo que a veces se ignora pero que hace sufrir a algún que otro usuario.
Space Time permite navegar en un entorno futurista 3D.
Los resultados aparecen como pastillas flotantes que se van viendo al estilo "minority report".
Como desventaja los requerimientos para usarlo correctamente:
OS: Windows 2000, Windows XP or Vista
RAM: 512MB
Graphics Adapter: 128MB plus 3D Capable
CPU: Pentium 4 2.4GHz or AMD 2400xp+
Screen Resolution: 1280 x 1024
Color: 32-Bit True Color
Network Speed: 768 Kbits/sec
Sitio: http://www.spacetime.com
Es distinto, pero dudo de la utilidad...
LibrosWeb.es publica gratuitamente todo el material que utiliza su autor en los cursos que imparte. Además, publica traducciones de libros gratuitos interesantes relacionados con el diseño y la programación web.
Algunos de los libros para descargar:Accesibilidad, Usabilidad y Estética
Largo y tendido se ha debatido la relación entre Usabilidad y Estética, discusión principalmente alentada por aquellos que quisieron ver alguna incompatibilidad entre ambos conceptos.
Entre los miembros de la comunidad dedicada a la experiencia del usuario parece ser que finalmente se llegó a un acuerdo: La usabilidad y la estética no tienen por qué estar reñidas. De hecho, como se ha demostrado en diversos estudios - entre ellos Laviea y Tractinsky (2004)-, las interfaces estéticamente agradables son percibidas por el usuario como más fáciles de usar; e igualmente, como sugiere Karvonen (2000), principios de usabilidad como la simplicidad en el diseño representan también una noción estética.
Ese mismo debate, en algunos foros, parece haberse trasladado a la confrontación entre Accesibilidad y Estética. ¿Existe realmente esa tensión entre ambos conceptos?
A esa pregunta intentan responder Petrie, Hamilton y King (2004) en su trabajo “Tension, what tension? Website accessibility and visual design”.
La metodología empleada es la siguiente:
* Análisis de la accesibilidad de las páginas de inicio de 1000 sitios web mediante su comprobación semiautomatizada conforme las directrices WAI
* En base a estos resultados, una muestra representativa de 100 de esos 1000 sitios web, es evaluada con usuarios reales con diferentes tipos de discapacidad
Las primeras conclusiones que obtienen del estudio son en forma de aquellos problemas de accesibilidad y usabilidad que se repiten con más frecuencia:
* Composición visual de la página compleja y desordenada
* Mecanismos de navegación confusos y desorientativos
* Poco contraste de color entre contenido y fondo
* Incompatibilidad de las páginas con navegadores de lectura
* Los textos y los gráficos son excesivamente pequeños para su lectura
Otra de las conclusiones que obtienen es que no existe tal tensión entre diseños visuales sofisticados y estéticamente agradables, y la accesibilidad de esos diseños. Esta afirmación la ilustran con varios ejemplos de la muestra estudiada:
* www.egg.com
* www.ebay.co.uk
* www.oxfam.org.uk
Fuente: Por Yusef Hassan
Todos nos hemos enfrentado al pánico de empezar un proyecto con una página (o monitor) en blanco al inicio de un proyecto y ninguna gran idea. Hace algunos años alguien pidió ayuda a la lista de correo Graphic Arts. Gunnar Swanson, profesor de diseño, escribió una respuesta que aun conservo en mi archivo, y utilizo a menudo.
La respuesta de Gunnar Swanson:
Asumo que el "Síndrome de la página en blanco" significa parálisis psicológica en las primeras etapas de un trabajo. Mi sugerencia es hacer algo — aunque sea algo malo. Entonces puedes examinarlo y ver porqué está mal y hacer otra cosa y examinarla y ver porqué está mal y hacer otra cosa… y muy pronto estarás haciendo algo bueno.
Si estás en el mero principio de un proyecto, tienes suerte. Es una etapa bastante mecánica. Le preguntas al cliente cosas como "¿Qué estis College of Art andás tratando de decir?" y "¿A quién se lo estás tratando de decir?" Sigue preguntando esas preguntas en diferentes niveles — "¿Cuál es el subtexto de todo esto? ¿Cómo quieres que la gente se sienta?"
El siguiente paso es juntar todo esto como un registro coherente, listando características en orden de importancia ("los criterios del proyecto"). Esto es bueno para que obtengas una visión clara del proyecto, y te permite que tu cliente este de acuerdo con estos criterios, de manera que no te estés matando por hacer algo que a tu cliente no le importa.
El siguiente paso es donde sospecho que estás. Es la fase de "necesito una gran idea". No necesitas una gran idea. Te conviene más tener muchas ideas pequeñas. Un ejercicio que les doy a mis estudiantes usa una retícula. En el eje Y (el lado izquierdo), ennumera palabras clave o conceptos sobre tu proyecto / tema. En el eje X (arriba), haz una lista de cada término que puedas pensar que describa una relación de forma y significado. Llena los cuadrados formados por la retícula con dibujos.
Ejemplo: Tu proyecto es diseñar un logo para un restaurante llamado "La Casa del Perro". Las palabras clave obvias son perro, casa, comida … trata de extender la lista.
Las relaciones de forma y significado incluyen términos de semiótica de Peirce — icono, indice y símbolo. Para simplificar, un icono en este sentido, es algo que se ve como lo que significa (por ejemplo, un dibujo de un perro). Un indice representa una relación física en la que no existe una parecido actual (como humo para un fuego o huellas digitales para una presencia humana). En el caso de "perro" incluiría huellas, un hueso, excrementos, o lo que sea. Símbolo, en este sentido, significa cualquier representación meramente cultural sin una base en la naturaleza (como las formas P E R R O en el caso del perro).
Otra buena fuente de relaciones entre forma y significado puede ser creada por todo lo que tu profesor de literatura trató de decirte cuando no estabas escuchando — metáforas y tropos literarios. Estas incluyen la sinécdoque, que es una metáfora en la que una parte de algo se usa para describir el todo. Por ejemplo, si digo "Al no tener techo, empezó a ganarse el pan a las 15 primaveras", se entiende que a los 15 años empezó a ganarse la vida por no tener casa. (Una sinécdoque de un perro podría ser una cola meneándose.)
Otros tropos incluyen la metonimia (literalmente "cambio de nombre" en griego). Esta incluye reemplazar un trabajador por una herramienta (como la hoz y el martillo soviéticos) y lo opuesto de la sinécdoque. Si digo "Me levanté esta mañana y la ley estaba tras de mi. El FBI me tenía rodeado", es claro que no me refiero a que los códigos penales de los Estados Unidos, el sistema judicial entero y todos sus empleados, todos los edificios y archiveros del FBI… todos estaban a mi puerta. Estoy usando el todo para describir una parte.
Si aprender nuevos términos te da dolores de cabeza, puedes poner en la parte de arriba "grande por chico" "chico por grande" "suena como", y lo que tenga sentido para ti.
Esto puede ser difícil de entender porque solo tiene sentido si lo entiendes. Si sólo vas a hacer parte de esto, la columna "indice" es donde se halla una cantidad tremenda de buenas cosas. Piensa como sabes que algo está ahí sin verlo, qué es lo que indica su ausencia.
La buena noticia es que no tienes que pensar una gran idea. Solo tienes que responder muchas respuestas pequeñas. Puedes encontrar que no hay respuestas para algunas de las preguntas, pero este proceso te dará un banco de imágenes. Si algunas son particularmente buenas o interesantes, ponlas junto con tus palabras y preguntate si el hueso al que llegaste como indice de perro o metonomia de perro vale la pena continuar. Pon "hueso" en la retícula y haz las mismas preguntas sobre el—- cual es el indice del hueso.
Toma este banco de ideas y trata de combinar cada una con todas las demás. Ahora tienes miles de ideas. La mayoría son malas, pero no necesitas mil buenas ideas, solo unas cuantas.
Fuente: Diseñorama.com
Escrito por Gunnar Swanson
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Si es que todavía no sabíais de su existencia, os presento una pequeña (174 Kb) barra de herramientas que es un 'must' para cualquier diseñador o desarrollador Web.
Esta utilidad creada por Chris Pederick desnuda cualquier página web que visitemos, proporcionando una gran cantidad de información de todo tipo : su código HTML, sus hojas CSS, el tamaño de las imágenes, los atributos 'Alt', la información sobre las cookies, muestra las tablas que componen el diseño en diferentes colores, permite validar el código de la página, muestra los diferentes valores de profundidad de las div... y un largo etcétera de información. Realmente una maravilla para todos los que estamos metidos en el mundo de la creación web.
La barra está disponible sólo para los navegadores de la familia Mozilla como Firefox y Flock. El enlace directo para descargar la barra Web Developer es (también con su versión en castellano) :
http://chrispederick.com/work/web-developer/
Si queréis instalarla directamente como una extensión del navegador Mozilla Firefox éste es el enlace :
https://addons.mozilla.org/es-ES/firefox/addon/60
MyIP.es es un servicio online que permite solamente ingresando el ip conocer la ubicacion geografica exacta de un usuario. Y MOSTRANDONOS SU UBICACION CON GOOGLE MAP!!
Por ejemplo:
| IP País: |  Uruguay |
|---|---|
| IP estado: | Montevideo |
| IP ciudad: | Montevideo |
| IP latitud: | -34.8581 |
| IP longitud: | -56.1708 |
| Proveedor: | Administracion Nacional de Telecomunicaciones |
| Organización: | Administracion Nacional de Telecomunicaciones |
| netspeed: | Dialup |
Los que hace años diseñamos webs, y trabajamos con Internet, con el tiempo, vamos aprendiendo pequeños trucos y atajos que nos hacen la vida más fácil. Esta experiencia nos lleva a saber de ante mano si el diseño de una página html, será exitoso o por el contrario será rechazada por los usuarios. En esta oportunidad te voy a contar de ClickTale.net, un servicio para webmaster imposible dejar de pasar.
... muchas veces no estaré más de 5 segundos en ella y cambiaré de sitio ! ¿Por qué? ¿Porque no tiene una animación flash que me gusta? ¿Porque la foto que sale en portada está mal pixelada? ¿Porque no me ofrecen un precio atractivo por el producto que estoy buscando?
Puede ser alguna de esas respuestas, pero el 99% de las veces que saldré del sitioe para seguramente no volver nunca más, será por otra razón : No quiero perder el tiempo intentando descifrar la página. Estaba buscando alguna información (precio, artículo, noticia, comentario, foto, explicación, etc) y sucedieron dos cosas : ni la encontré a la primera (decepcionado pero no frustrado)... ni el diseñador me ayudó a que la pudiera encontrar ¡(así que frustrado, me largué del sitio)!
¿A qué me refiero? Al concepto básico que debe tener cualquier sitio web y que muchos diseñadores obvian: ¡ U-S-A-B-I-L-I-D-A-D !, sobre el cual no hace falta escribir un tratado de 20 páginas. En mi modesta opinión, teniendo en cuenta unos pocos aspectos, ayudaremos al usuario a encontrar lo que está buscando en nuestro sitio (si es que se lo podemos proporcionar) o como mínimo no saldrá de nuestro sitio jurando no volver nunca más. Estos puntos serían :
1 - Facilitar al usuario de forma inmediata la situación exacta dentro del sitio web. ¿Cómo?
Analizar y comparar sitios web es una tarea habitual en nuestro trabajo. Frecuentemente al inicio de un proyecto analizamos y comparamos el sitio en el que estamos trabajando con otros sitios web de características o funcionalidades similares. Esto nos ayuda a detectar buenas prácticas del sector, problemas comunes, nuevas ideas, etc.
Por ejemplo, cuando empezamos a trabajar en el diseño de un sitio de comercio electrónico de unos grandes almacenes, una de las primeras fases consistió en estudiar las webs de sus competidores más cercanos, así como sitios web de referencia como Amazon.
Frecuentemente el resultado de este estudio lo incluimos dentro de la documentación que presentamos al cliente, con lo que es muy importante escoger adecuadamente el modo de representar los resultados. Estos deben ser gráficos e ilustrativos y fáciles de entender.
Cuando se comparan elementos concretos, como son las características de los enlaces, la legibilidad de los textos, la facilidad de uso de los menús, etc. es posible mostrar los elementos e indicar sus características, sus puntos fuertes y flojos, y lo que los hace mejor o peor que las otras alternativas.
Sin embargo, cuando se quiere comparar las webs estudiadas en su conjunto puede resultar difícil de representar. Para estos casos puede ser interesante utilizar el User Experience Honeycomb, un diagrama que desarrolló Peter Morville en el que se representan las distintas facetas que componen la experiencia de uso de un sistema.
Los usuarios en la Web no leen, o por lo menos no lo hacen de la misma forma secuencial que cuando tienen entre manos un periódico, un libro, un artículo o un cómic. Los usuarios tienen necesidades y objetivos, metas que alcanzar, y saben que la forma de conseguir dichas metas no suele ser dedicando largos ratos a cada nodo web que visitan, leyendo de principio a fin sus contenidos y enlaces. El usuario, en una página, hará clic sobre el primer enlace que crea puede llevarle a lo que busca, necesita o pudiera interesar. Eso quiere decir que muchos de los contenidos y enlaces de ese nodo ni siquiera serán vistos por el usuario.
El usuario, ante una página, ojea a saltos la información contenida. No podemos predecir con exactitud cuál será el camino que el usuario seguirá durante su exploración visual de la página, pero sí a qué zonas le presta mayor atención en su búsqueda:
Hay zonas del interfaz de la página que confieren una mayor jerarquía a la información que contienen, como la zona 1. La Jerarquía Visual[1] proporciona relaciones jerárquicas del tipo 'esto es parte de esto' y 'esto va a continuación de esto' entre los objetos informativos de la página, mientras que la Jerarquía de Información o Contenidos establece relaciones del tipo 'esto es más importante que esto'.
Para enfatizar la importancia de unos objetos informativos de la página sobre otros, es decir, para definir la Jerarquía de la información, se pueden utilizar diversas técnicas:
Al contrario de lo que pueda parecer, los objetos informativos parpadeantes, cambiantes o deslizantes no serán percibidos por el usuario como importantes. Pueden ser percibidos como publicidad, ya que es un mecanismo demasiado explícito para atraer la atención del usuario.
Además, al diseñar la información de nuestra página (jerarquía visual y la jerarquía de información), si definimos demasiados objetos informativos como 'muy importantes', se produciría en el usuario una sobrecarga de información, con lo que habremos fallado en nuestro objetivo.
El problema es que el usuario en la Web no es único ni uniforme. Cada usuario que visite el sitio web tendrá necesidades, expectativas y comportamientos diferentes, por lo que el diseño de la información debe realizarse para satisfacer al mayor número de usuarios posibles.
Si dispone de los conocimientos y tecnología suficiente podría realizar un diseño dinámico que mediante perfiles se adaptara a las diferentes necesidades de cada grupo de usuarios, o idealmente, a cada usuario en concreto. La jerarquía de información de cada página sería diferente para un usuario que visitara el sitio web una media de 3 veces por semana y que ya hubiera comprado un par de productos, que para el usuario que es la primera vez que visita el sitio web.
Los usuarios usan las páginas, no las leen. Aún en el caso del usuario, que después de haber realizado una navegación compulsiva e irreflexiva, se encuentra con un texto o artículo cuyo contenido en general es de su interés, no empezará a leerlo. Antes lo ojeará, leerá los títulos y epígrafes, mirará las figuras, gráficos e imágenes, quizás lea algún párrafo en el que se encuentre algún término de su interés enfatizado, y sólo después de esto, empezará a leer. Una vez que empiece a leer el texto (no necesariamente desde el principio), puede que incluso lo abandone haciendo clic sobre algún enlace que tuviera embebido.
La causa de este comportamiento es sencilla: los usuarios odian leer en pantalla, e intentarán por todos los medios extraer de los textos toda la información que necesiten o interese con el menor esfuerzo posible.
Fuente: nosolousabilidad.com
Yusef Hassan Montero
Grupo SCImago, Universidad de Granada
Frecuentemente nos preocupamos de la accesibilidad de nuestros sitios web y para ello una de las preocupaciones más frecuentes es que nuestro Gestor de Contenido (CMS) genere un código HTML accesible. Pero alguna vez nos hemos preguntado si el CMS que utilizamos es accesible?? Podrían manejar un CMS (y por tanto mantener un sitio web) una persona con discapacidad??
Para responder a estas preguntas, he recordado el artículo Choosing an Accessible CMS en el que se estudiaba la accesibilidad de los principales CMS que se encuentran en el mercado. Voy a hacer un resumen de los datos más importantes.
Después de leer ésto, puedes elegir el CMS que más te guste y recuerda que el mantenimiento de la accesibilidad de un sitio web también depende del uso que haga del CMS el administrador, por tanto, recomiendo la lectura de esta breve guía para mantener la accesibilidad de un CMS.
Fuente: http://accesibilidadweb.blogspot.com/
Extracto del libro mencionado en el post anterior.
"La parte más significativa del movimiento 2.0 pasa antes por intereses personales
que por modelos de negocio ya que se trata de un movimiento social antes
que un modelo empresarial, y de ahí la dificultad en identificar el modelo de
negocio subyacente ya que en muchas ocasiones no lo hay. Para muchos, hablar
de web social y de negocio es un oxímoron.
¿Es razonable buscar un modelo de negocio en un movimiento social o cultural?.
Las razones que movilizan a la gente y la llevan a actuar se hallan a menudo
alejadas de las claves económicas. ¿Cuál era el modelo de negocio del surrealismo?
Sin duda hubo gente que ganó mucho dinero, pero hubo otros muchos
que simplemente buscaban una manera de expresarse. ¿Cuál es el modelo de
negocio del ecologismo? Sin duda dará pie a un nuevo sector como el ecodiseño
o las energías renovables, pero también es evidente que nace antes por la
concienciación y la responsabilidad social que por el ansia de ganar dinero.
Aunque también es seguro que habrá quien lo dude, y vea en todo ello una estrategia
global para que los millonarios sean aún más millonarios.
La Web 2.0 está plagada de propuestas que puede que generen dinero, pero que
nacen con la única intención de resolver una necesidad personal. Por ejemplo
Joshua Schachter creó el célebre del.icio.us63 simplemente para su uso personal
y poder resolver sus problemas al gestionar los enlaces favoritos en Internet64.
posteriormente Yahoo! le compró su empresa y seguramente ingresó un buen
dinero, pero el inicio no tuvo nada que ver con una idea de negocio.
Todo ello puede esquematizarse en tres tipos de iniciativas que responden a
móviles personales, que pese a no tener ninguna conexión entre ellas también
es cierto que algunos proyectos las siguen ordenadamente como si se tratara de
una escala evolutiva.
1.1. Iniciativas sin expectativa de retorno económico...
1.2. Iniciativas con expectativa de retorno económico centrado en la persona...
1.3. Iniciativas con expectativa de retorno económico centrado en el proyecto..."
Extracto del libro "Web2.0" de Antonio Fumero y Genis Roca
La Fundación Orange ha creado un libro en español sobre la Web 2.0 que se puede descargar gratuitamente. La intención de este libro es intentar poner un poco de luz en torno a la Web 2.0, que es un término que casi todo el mundo usa, mucha gente sabe lo que es y pocas personas son capaces de definir.
La Web 2.0 es un término que está patentado por sus creadores, la editorial O'Reilly Media. La definición que nos dan en el libro es la siguiente:
"La Web dos (punto) cero podría definirse como la promesa de una visión realizada: la Red –la Internet, con mayúscula o minúscula, que se confunde popularmente con la propia Web– convertida en un espacio social, con cabida para todos los agentes sociales, capaz de dar soporte a y formar parte de una verdadera sociedad de la información, la comunicación y/o el conocimiento. Con minúsculas porque nace de la propia acción social en interacción con un contexto tecnológico nuevo."
Fuente: http://accesibilidadweb.blogspot.com
A diferencia de Google que tiene complejos robots, Mahalo es un buscador que funciona gracias al trabajo de 40 personas que se encargan de indexar las páginas web de forma manual
Mahalo es un nuevo servicio de búsquesas muy diferente a todos los disponibles en la Red. Mientras Google posee todo un ejército de máquinas que elaboran complejos algoritmos para idexar la Web, Mahalo -que todavía está en fase alpha- emplea a 40 personas que son las encargadas de buscar los resultados de forma artesanal.
Esto tiene sus ventajas y sus inconvenientes, como todo. Mahalo es un servicio mucho más cercano que Google: permite que a sus usuarios sugerir nuevos enlaces por cada búsqueda, y dispone de guías que velan para que no haya fraude con los enlaces propuestos. Además, dispone de un área de discusión sobre los resultados de cada búsqueda, sus enlaces o sus términos de búsqueda.
Mahalo no es un servicio que pueda competir con los grandes buscadores,
aunque tampoco es esa la intención de su fundador, Jason Calacanis, que asegura que el objetivo de su empresa no es indexar la información mundial, sino ofrecer un servicio de calidad y de paso, si es posible, sacar una pequeña pero lucrativa tajada de este gran mercado dominado por Google.
De momento, Mahalo va poco a poco y hasta ahora ha conseguido ofrecer páginas para más de 4.000 términos de búsqueda, aunque sus usuarios están pidiendo más y esperan que para finales de año puedan llegar a los 10.000.
Estos números están muy lejos de los billones de páginas web a las que remiten los resultados de Google, pero de momento esto no es problema para los chicos de Mahalo, que tiran de los resultados de sus amigos de Google cuando ellos no pueden ofrecerlos.
El factor humano es al mismo tiempo el gran activo de la empresa y su principal limitación. Seguro que el despegue de este nuevo buscador va a ser difícil y va a necesitar de mucho trabajo, pero si lo consigue podemos estar ante un gran proyecto.
Fuente: Observa.com.uy
RoundCube Webmail es un cliente web de correo electrónico, se trata de un cliente IMAP multilenguaje que ofrece todo el conjunto de funcionalidades que se espera de un cliente de correo: soporte MIME, libreta de direcciones, administración de carpetas, búsqueda de mensajes y corrector ortográfico. Escrito en PHP y MySQL, y es configurable su aspecto mediante XHTML y CSS.
Web: http://www.roundcube.net/
1. El logotipo de la organización deberá estar enlazada con la página de inicio.
2. Actualizar regularmente el contenido que tus usuarios utilizan con más frecuencia.
3. Asegurate de que el contenido de las secciones esenciales del sitio no se encuentre a más de tres ‘clicks’ (niveles de enlace) de la página principal.
4. La navegación del sitio debe ser colocada en un área inmediatamente visible, usualmente a lo largo de la parte superior de la página o bien a lo largo del lado izquierdo de la ventana del “Browser”.
5. El logotipo de la organización debe ser localizado en la esquina izquierda superior de cada página y se recomienda emplear en lo posible las medidas estándar de 60×60 pixels.
6. La distribución de los diversos elementos de contenido en el interfaz deberán ser organizadas jerárquicamente con el fin de que los usuarios lo perciban y asimilen con un esfuerzo mínimo.
7. Todas las imágenes deberán contar con texto descriptivo mediante el empleo de el atributo ‘ALT’ para que los navegadores con la opción de descargar imágenes desactivada o de solo texto lo puedan leer, así como sistemas alternativos especializados para usuarios con discapacidad.
8. Cada una de las páginas del Sitio Web deben contar con títulos de página diferentes y descriptivos del contenido de la misma.
9. El nombre de cada página debe tener el nombre de la Marca de la empresa u organización, así como también algunas palabras claves. referentes al contenido expuesto en la página. El nombre deberá ser el propio, sin pronombres (“el”, “la”, “una”, etc) para que permita la facilidad de indexado tanto en motores de búsqueda como de listas de favoritos (“bookmarks”)…(El Metodus… NO! - Metodus…SÍ!)
10. Todo sitio público deberá ser creado pensado en una conexión a Internet promedio de 56 kbps o menos.
11. En una página tipo galería de fotos o similar, Evite el empleo de imágenes grandes que descarguen lentamente. Emplee imágenes pequeñas (“thumbnails”) que sugieran su ampliación a conveniencia de los usuarios.
12. Considere en el diseño del Sitio que el contenido sea adaptable a las diversas resoluciones –tamaños de pantalla– empleadas por los usuarios. En caso de usar listas en tablas, no utilice tamaños fijos en las mismas (para efectos de crecimientos de texto o interfaces “elásticas” que se adapten al ancho de la pantalla).
13. El sitio de debe ser accesible por browsers alternativos (Firefox, Internet Explorer, Mozilla, Opera, Safari, Netscape, etc…) y sistemas operativos (Linux, Windows, Macintosh, etc) sin trabas o exclusiones técnicas de ningún tipo.
14. Emplee fuentes (tipografías) en los textos del sitio web que sean comunes a todos los usuarios (Ej: Helvetica, Verdana, Arial, Times New Roman, Georgia) ya que las mismas son empleadas por la mayoría de los sistemas operativos, permitiendo la accesibilidad al contenido sin problemas de compatibilidad.
15. En el caso de sitios que cuentan con amplia cantidad de información, incluya un mecanismo de búsqueda en la página de inicio, analice su comportamiento y sugiera una opción avanzada y una sección de preguntas frecuentes (Frequently Asked Questions).
16. Evite el uso de términos para vínculos tales como “click aquí”, “más información”, “ver detalles”, los cuáles son genéricos. Procure que el texto del vínculo describa el destino del enlace.
17. El uso de ventanas “pop-ups” deben utilizarse con cuidado. Nunca emplee ventanas “pop-ups” en enlaces de contenido interno. En caso de que su empleo sea necesario y según las circunstancias que se presenten, se debe indicar al usuario que la ventana será abierta en una ventana separada.
18. En lo posible, no utilizar “Framesets” (marcos), pues son virtualmente imposibles de utilizar por los “Spiders” (robots de buscadores en Internet) en su proceso de indexado además de que son difíciles de desplegar e interpretar por algunos “browsers”.
19. Desarrolle el sitio mediante la creación de plantillas que empleen formatos estándar para presentación (hojas de estilo – CSS -) y estructura de contenido (XHTML) los cuales permitirán que el sitio sea accedido correctamente, y agregar credibilidad en la percepción del usuario.
20. Cree paralelamente al desarrollo del sitio una hoja de estilos (CSS) que permita imprimir el contenido correctamente, eliminando elementos innecesarios en una impresión (menús, etc) y en hojas de tamaño estándar (81/2 X 11).
Fuente: http://www.peretufet.com/08/05/2007/20-leyes-heuristicas-sobre-usabilidad/
Vida mas alla de Monstruo.
Aunque no nos hayamos acostumbrado, hay otras opciones del monstruo.
Un listado de los mejores 100 buscadores para encontrar algo en Internet ademas de en Google.
The Top 100 Alternative Search Engines, April 2007
fuente: www.alpoma.net
Coleccion de tags, vinculos y las ultimas actualizaciones de BLogs de diseño
Technorati Profile
Palette Grabber es una extensión para Firefox que nos permite obtener los colores de una página web y exportarlos a un archivo para su posterior utilización.
El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.
Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.
El diseño digital tiene sus problemas propios, a los que se suma el hecho que existen diferentes plataformas y distintos monitores, y nunca es posible saber exactamente cómo un mismo website será visto por los diferentes usuarios.
La tipografía en la web es un tema nuevo, y si bien pueden aplicarse muchas reglas del medio impreso, existe un número importante de características propias del medio digital que deberán considerarse para redefinir pautas. En este momento, estas últimas están siendo creadas con el sistema de prueba-error. Las diferencias más importantes pueden enumerarse de la siguiente manera:
En un principio, era sumamente complicado tener un control de la tipografía y el creador de un website tenía muy poco control sobre cómo el usuario lo vería verdaderamente.
Desde la creación de las Cascading Style Sheets (CSS) –algo así como Páginas de Estilo–, una característica disponible en la mayoría de los browsers de la actualidad, es posible controlar varios aspectos de la tipografía y del formato de la página en general.
El buen uso de la tipografía depende del contraste visual entre fuentes y entre los bloques de texto y el blanco. El ojo es naturalmente atraído por los contrastes.
El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras; no en reconocer cada letra para luego juntarlas y formar la palabra. El ojo escudriña la parte posterior de las letras en el momento de leer y es por ello que las palabras compuestas todas en mayúsculas tienen menor legibilidad.
El ojo ve primero el conjunto de la puesta en página y el contraste que la misma presenta, para pasar en segundo plano al reconocimiento de las partes y por último, llegar al detalle de las palabras.
El uso de textos en pantalla viola las convenciones sobre las reglas básicas creadas para las piezas impresas. Las líneas de los bloques de texto son, en general, mucho más largas que lo necesario para una lectura relajada. En libros o revistas, por ejemplo, a una distancia del papel normal, el alcance ocular a lo ancho es de unos 8 cm, y es por eso que los párrafos (standard) conservan estas proporciones. El uso de líneas más anchas requieren que el lector gire su cabeza ligeramente o fuerce los músculos del ojo para poder seguir las líneas. Desgraciadamente, gran parte de las páginas en la web tienen el doble de ancho del alcance normal del ojo, por lo que se requiere de un esfuerzo extra para leer estos textos. Además, si la línea es demasiado ancha, como al ojo le cuesta ir de un extremo al otro, provoca que esa línea sea salteada o leída dos veces.
Como dijéramos anteriormente, con el uso de CSS es posible controlar varios aspectos de la puesta en página y, por lo tanto, hacer párrafos de líneas más cortas e incrementar la interlínea, que al ser utilizada generosamente (un 150% más que en impresión) mejora notablemente la legibilidad. Esto especialmente en tipografías sans serif, que no cuentan con la guía horizontal que forman las serifas, y que ayudan al ojo a seguir el flujo de texto.
La elección de la tipografía a utilizar es de suma importancia en el diseño digital, como lo es, por supuesto, en las piezas de diseño impreso.
Hay tipografías diseñadas especialmente para la pantalla y otras producidas por un cálculo basado en una descripción por software de la fuente. Las fuentes para pantalla están pensadas para calzar en la grilla de pixeles y cada caracter está pensado y optimizado en función a ésta. Las tipografías están diseñadas para ser usadas en tamaños específicos, como cuerpo 8, 9, 10, 12, 14, etc. Si se las utiliza en un cuerpo para el que no han sido pensadas, como por ejemplo cuerpo 11 ó 13, van a ser generadas mediante un cálculo que aproxima visualmente al tamaño solicitado, pero que pierde todas las sutilezas de diseño original.
Guidebookgallery.org nos deja recordar las antiguas versiones de los programas de diseño ( OS y otros) que usabamos los diseñadores años atras.
La evolución de Flash y capturas de sus versiones ateriores: La evolución de Adobe Photoshop y sus capturas de pantalla.
Me acuerdo haber empezado a usar Macromedia Flash en su version 4 y Adobe Photosop en su version (creo) que 4. No se si es util, pero vale la pena acordarse.
Browsershots permite testear/probar como se veria un sitio en distintos navegadores, permitiendo definir tambien distintas resoluciones de pantalla (800x600, 1024x768).
Los Navegadores en los cuales chequea un sitio son:
Link: http://browsershots.org/
Fuente: http://wwwhatsnew.com
CDLIBRE.ORG es un sitio que existe desde el año 2003, creado por un profesor de Informatica de Valencia (España), alojado en el Instituto de Robótica de la Universidad de Valencia,
El sitio en el que dar a conocer programas libres / gratuitos ordenados por categorias e inculso permite descargar imagenes de CD o DVD con bibliotecas de software para utilizar.
Entre ellos DVD-Fuentes, que incluye el código fuente de todos los programas cuyo código fuente está disponible.
Acceder a CDLIBRE.ORG
Dos sitios que recopilan el listado de aplicaciones nuevas de la web 2.0.
Listible : http://www.listible.com
Web2list : http://www.web2list.com
Stock.XCHNG : Completa colección con más de 250.000 imágenes de altisima calidad para descargar en forma grtuita para utilizar simplemente registrandose en el sitio.
Imagenes separadas por categorias y descargas.
El sitio Accessify ofrece una serie de herramientas que nos ayudaran a crear webs más accesibles. Son wizards o herramientas sencillas pero que nos pueden facilitar mucho el trabajo.
Entre las herramientas tenemos un generador de tablas, de formularios (con o sin tablas), de pop-ups y otros más. A parte, nos ofrece una lista de aplicaciones generales, no centradas en la accesibilidad, pero que también serán de gran ayuda: generador de capas o de listados, un script para escapar código HTML para incluirlo en nuestras páginas, ...
Acceso a Accessify: http://www.accessify.com/tools-and-wizards/
fuente: http://sentidoweb.com/
Excelente aplicacion de Adobe Labs llamada Kuler, permite preparar automaticamente paleta de colores
Dispone de varias paletas creadas por diseñadores y usuarios, las paletas mas populares y permite crear y guardar para compartir paletas personalizadas de hasta 5 colores colores para proyectos web, graficos o multimedia.
Herramienta interesante y muy util para seleccionar colores de fondo, tipografias, bordes, iconos y logos.
Link: http://kuler.adobe.com
Definir el título en todas las páginas que conforman el sitio web es una norma básica que aumenta considerablemente la 'findability' de la información contenida en cada página. Además, no definirlo supone mostrar una imagen poco profesional del sitio web y su diseño.
Al contrario de lo que pudiera parecer, el título de la página no es un elemento de orientación del usuario en su navegación, ya que la mayoría de los usuarios ni tan siquiera advertirán su existencia.
La utilidad real de definir el título de la página y hacerlo correctamente, se presenta cuando:
No defina el mismo título para todas las páginas que formen el sitio web. Esto suele pasar en sitios web que utilizan marcos, otra razón más para no utilizarlos. En un sitio web, cada página contiene información diferente, y el título siempre debe describir la información contenida en la página.
El título debe ser breve, ya que la parte final de la cadena de caracteres de un título largo no será visible para el usuario en ninguna de las situaciones descritas en la introducción de este artículo.
Por esta misma razón, también debe mantener una jerarquía de información entre los elementos que formen el título, colocando al principio los más importantes. El siguiente título 'Post 13 Diciembre 2002 : Qué es la Usabilidad' sería más correcto de la siguiente forma 'Qué es la Usabilidad (Post 13 Diciembre 2002)'.
Suprima, cuando sea posible, las palabras vacías de significado al principio del título, como artículos o frases del tipo 'Bienvenido a...'.
Si utiliza signos de puntuación en el título, recuerde que los siguientes caracteres:
\ / : * ? " < > |
'desaparecerán' del título una vez los añada el usuario a su lista de favoritos o guarde la página en su disco local, por lo que si el título los contiene asegurese de que éste siga comunicando el mismo significado sin ellos.
Deformar el texto de un título, como en el siguiente ejemplo:
'D I S E Ñ A D O R E S W E B'
puede llamar la atención del usuario cuando ojea su lista de favoritos o los resultados de un buscador, aunque conlleva varios inconvenientes: connota poca profesionalidad, disminuye la legibilidad, y más importante, dificulta la indización de la página por parte de los robots de búsqueda, por lo que podemos vernos perjudicados con respecto a nuestra competencia en cuanto a nuestro posicionamiento en los resultados de búsqueda.
Las páginas de inicio o home pages, por sus características intrínsecas y diferentes respecto del resto de páginas del sitio web, si bien le son aplicables todos los consejos y sugerencias descritas anteriormente, merecen un tratamiento especial de su título.
Como en todas las páginas del sitio web, el título de la página de inicio debe describir su contenido. La mejor forma de hacerlo es indicando en el título el nombre y una breve explicación del sitio web, por este orden.
El nombre del sitio web no lo incluya en forma de semi-URL. Es decir, es preferible usar 'El Corte Inglés' a 'ElCorteIngles.es', 'www.elcorteingles.es' o 'http://www.elcorteingles.es'. Sólo en sitios web dónde el nombre de dominio de nivel superior (.com, .net, etc..) forme parte de la identidad de la empresa u organización, se debe incluir en el título de la home.
Si el nombre de dominio del sitio es un acrónimo, no encabece el título de la home con ese acrónimo, a no ser que sea más conocido así que de la forma expandida.
En nombres de sitios web que estén formados por más de una palabra, si cada una de esas palabras tiene significado por sí sola, debería escribirlas separadas en el título, para que los robots de búsqueda puedan indizar el sitio web de forma óptima.
En el título de la home, además del nombre, debe exponer una breve explicación o descripción de cuál es el contenido o finalidad del sitio web.
Si el sitio web posee ya un eslogan, y éste es verdaderamente descriptivo y significativo, utilícelo en el título de la home. No incluya frases vacías de autopromoción como 'Empresacualquiera.com - El mejor sitio web' o 'Empresacualquiera.com - Profesionalidad, rapidez y eficacia'.
La descripción que se debe exponer es la del sitio web, no la de la página. Por ello absténgase así mismo de utilizar frases explicativas del tipo 'Página de Inicio'.
Consejos y sugerencias tan sencillos como los indicados en este artículo pueden aumentar considerablemente la findability de las páginas del sitio web, no únicamente desde el navegador y escritorio del usuario, o desde los resultados en motores de búsqueda, sino también en el propio sitio web desde los resultados mostrados por el buscador interno.
Para concluir habría que recordar que la elección del título de la página no debe realizarse de forma aislada por cada una de las páginas del sitio web. Es imprescindible su planificación en las primeras fases de desarrollo del sitio web, y de acuerdo a un control terminológico sistematizado. Es por ello que el responsable lógico de definir el título de las páginas (así como del resto de sistemas de rotulado) es el Arquitecto de la Información.
* Microsoft Explorer almacena las páginas guardadas desde el navegador con el nombre del título de la página, aunque otros navegadores como Mozilla no lo hacen de esta forma. Otra diferencia es que Explorer almacena en la lista de favoritos las páginas como si fueran archivos, por lo que no permite ciertos caracteres especiales
fuente: http://www.nosolousabilidad.com
Yusef Hassan Montero
Grupo SCImago, Universidad de Granada
Mitos sobre Accesibilidad y Estándares Web
1. “Si mi sitio Web está hecho con estándares, será aburrido y perderé clientes.”
Con los estándares W3C, podrás tener sitios Web muy atractivos. Crear un sitio Web que respete los estándares no tiene nada que ver con generar páginas Web únicamente textuales.
El W3C propone en la actualidad un conjunto de tecnologías integradas muy divertidas. Puedes experimentar un sitio Web completamente multimedia con las existentes tecnologías interoperables del W3C utilizando XHTML (Marcado XML estructurado), CSS (Hojas de estilo), SVG (Gráficos vectoriales animados en 2D), y SMIL (Multimedia Sincronizada). Estas tecnologías han contado con el consenso de los diferentes actores del mercado Web.
2. “ No tengo los medios financieros para preocuparme por los estándares en mi sitio Web. ¡Costará demasiado!”
Diseñar con estándares simplificará el mantenimiento del código del sitio Web porque no tendrás múltiples versiones para diferentes navegadores. Tus páginas tendrán una vida más larga y no dependerán de tecnologías vaporosas. Por tanto, diseñar con estándares Web te costará menos en realidad.
3. “Si respeto los estándares, invadirán mi creatividad.”
Las limitaciones técnicas existen en cualquier medio artístico, bien estés dibujando, esculpiendo, o diseñando páginas Web. Las acuarelas o las pinturas al óleo tienen sus propias limitaciones, pero esas técnicas no bloquean la creatividad, sino que proporcionan una estructura para la expresión creativa.
Crear con los estándares Web abrirá un mundo nuevo con técnicas particulares al medio, la tecnología, la audiencia. Aún hay mucho que explorar en este dominio. Estamos sólo comenzando a explorar los beneficios de las experiencias multimedia basadas en estándares.
4. “No me importa la accesibilidad. Las personas con discapacidades no se encuentran en mi audiencia objetiva.”
Tú te beneficiarás de diseñar con respeto a la accesibilidad. Las personas con discapacidades representan del 8% al 10% de la población total. Es más fácil mantener un sitio Web que sigue las pautas de accesibilidad (y por tanto los estándares Web). El tráfico de tu sitio Web se incrementará, y una más amplia variedad de navegadores tendrán acceso al contenido del sitio.
5. “¿Porqué debería respetar los estándares? La Web es un lugar libre.”
La Web es un lugar libre compartido por muchos usuarios cuyas necesidades no necesariamente conoces. Los estándares han sido diseñados para tener en mente a todas las audiencias potenciales. Es un reto a la comunidad Web el crear con estándares Web. No estarás ligado a ninguna compañía o tecnología propietaria. Puedes usar tecnologías que son independientes de los requerimientos de las plataformas.
6. “Me he limitado a seguir las instrucciones de los libros.”
Desafortunadamente, muchos libros no enseñan buena programación Web. Cuando creas un sitio Web, deberías comprobar la corrección de tu marcado. Si eres un desarrollador Web, se cuidadoso al utilizar los libros para desarrollar tu aplicación y lee las especificaciones particulares que estás tratando de implementar.
Algunos sitios Web están recogiendo buenos materiales para ayudar a la gente a diseñar de acuerdo a los estándares W3C. En el sitio Web del W3C, encontrarás una lista creciente de tutoriales promoviendo buenas prácticas.
7. “Mi editor Web genera marcado no válido.”
Muchas herramientas de autor no generan marcado válido. Algunos tienen incrustados correctores de sintaxis, otros hacen lo correcto, y muchos no generan marcado válido. Como una solución intermedia, tienes que comprobar tu página Web con un validador HTML.
8. “No es culpa mía. Es la forma en que ha sido diseñado el motor de plantillas.”
Estás en lo cierto. A menudo no es culpa tuya. Si es un simple formulario donde tú núnca escribes HTML a mano, escribe al desarrollador de tu interfaz o al mantenedor de su sitio hasta que el problema sea solucionado. Si no estás seguro de si el contenido producido respeta los estándares del W3C, valida el contenido con el validador HTML, y envía el informe a tu Wemmaster, o la persona a cargo del sistema de gestión de contenido.
9. “No existe información para ayudarme. Todos los materiales que he encontrado están en Inglés.”
Algunas personas han traducido documentos y especificaciones a otras lenguas. El W3C mantiene una lista de traducciones.
fuente: http://accesibilidadweb.blogspot.com/
