Me encanta la web porque:
- Soy un desordenado con mis ventanas, y siempre existe un excelente Webmaster capaz de centrármela, menudo trabajo me ahorra.
- He aprendido que escuchar una canción, disfrutando de todo el poder de mi home theater, puede estropear la fantástica aventura de navegar en un sitio.
-Ahora se que tengo que aprender a intercambiar rápido de resoluciones. Que el OpenGL no es solo para juegos, sino que debo crear una aplicación que me permita cambiar rápidamente de 640*480, luego regresar a 1256*1024.
-Se también, que cuando tecleo una dirección URL, no estoy seguro de querer verla, tengo que reflexionar, y hasta no estar seguro, darle click en Entrar.
-Mi Mouse, suele ser monótono, necesita mas vida, ¿Por qué no transformarlo en un divertido balón?
-Tengo que instalar todos los navegadores posibles, por que cada web, es hecha en una universidad diferente. Algunas en la universidad FireFox, otras en la universidad InternetExploiter, etc.
-Necesito recrearme viendo mujeres, las computadoras no son hechas, solo para trabajar.
-Es importante tener abiertas muchas ventanas, ya que si no, las teclas Alt-F4, suelen descomponerse fácilmente.
-Cuando contrate mi ancho de banda, realmente no quería descargar las páginas de manera rápida, solo deseaba ese teléfono que regalan al contratar.
-Adoro jugar al Detective, me encantan las paginas que tiene los botones escondidos, para que solo los que tenemos un Alto estudio en Ciencias Ocultas, los encontremos.
- A veces olvido, que debo usar los emoticons, gracias al Cielo, siempre habrá una ventana saltarina que me lo recuerde.
----------------------------
Gracias, Web!
Fuente: Cristalab
Wednesday, April 25, 2007
Usabilidad: Cuide hacia donde llevan los enlaces de su web
Dé información de cualquier link que lleve a los usuarios a una descarga
Cuantas veces han estado navegando en un sitio en busca de alguna información que necesitan y cuando la encuentran y se disponen a bajarla: ¡PUM! se enteran que su navegador se cuelga porque cuando dieron click en el enlace que los llevaría a la información deseada se encontraba en formato PDF y el Acrobat Reader se está iniciando en el navegador, además no podrán ver la información hasta que se descargue por completo (pensemos en un manual de 6 megas) Definitivamente esto se convierte en una experiencia web poco agradable.
Ahora tomemos el mismo ejemplo pero apliquémoslo a un "usuario normal" donde sus conocimientos sobre la web se limitan a revisar el Hotmail y a iniciar sesión en un programa de mensajeria instantanea. ¿Acaso no se convertiría esto en una experiencia traumática para él? Y no solamente será traumática sino que su buena experiencia en la web se verá reducida dramáticamente, casi al punto de que pierda el interés por completo en la información que estaba buscando, le quedaría la otra opción de esperar a que se descargue el archivo en su navegador, pero es seguro, no volverá a entrar a esa página otra vez.
Nosotros, como diseñadores, tenemos el deber de hacer que la experiencia de un usuario en nuestra página sea la mejor posible, aunque el cuento de la "buena experiencia web" suena al eslogan de nuestra desaparecida Macromedia, si nos ponemos a analizarla, tiene tanta validez que debería ser una regla:
Así que la próxima vez que tenga que colocar un archivo para descargar como por ejemplo un video, un manual o un archivo de audio, no se le olvide dar la información necesaria para que el usuario pueda decidir si bajar el archivo o pasarlo por alto.
Trate de no comprometer el contenido de su página con el archivo a descargar, porque a veces ocurre que colocamos una lista de precios o un formulario en un archivo con formato PDF pero, ¿Y si el usuario, por algún motivo, no pueda descargarlo o abrirlo? Debemos tener el cuidado de que este tipo de archivos (hablo de cualquier archivo multimedia en general) siempre sean una alternativa extra para el usuario (como cuando ofrecemos una versión imprimible) pero nunca que la información vital dependa únicamente de un archivo de este tipo.
Recuerden colocar el peso total del archivo, el formato, una estimación del tiempo de la descarga; además proporcionar todas las herramientas o información para que este archivo pueda ser visualizado por el usuario sin ningún inconveniente.
Siempre valore la posible complejidad de los procesos de la descarga, la descompresión, activación y hasta lectura o impresión del archivo. Pónganse en los zapatos del usuario, sean justos y háganle saber donde se van a meter.
Fuente: Cristalab
Cuantas veces han estado navegando en un sitio en busca de alguna información que necesitan y cuando la encuentran y se disponen a bajarla: ¡PUM! se enteran que su navegador se cuelga porque cuando dieron click en el enlace que los llevaría a la información deseada se encontraba en formato PDF y el Acrobat Reader se está iniciando en el navegador, además no podrán ver la información hasta que se descargue por completo (pensemos en un manual de 6 megas) Definitivamente esto se convierte en una experiencia web poco agradable.
Ahora tomemos el mismo ejemplo pero apliquémoslo a un "usuario normal" donde sus conocimientos sobre la web se limitan a revisar el Hotmail y a iniciar sesión en un programa de mensajeria instantanea. ¿Acaso no se convertiría esto en una experiencia traumática para él? Y no solamente será traumática sino que su buena experiencia en la web se verá reducida dramáticamente, casi al punto de que pierda el interés por completo en la información que estaba buscando, le quedaría la otra opción de esperar a que se descargue el archivo en su navegador, pero es seguro, no volverá a entrar a esa página otra vez.
Nosotros, como diseñadores, tenemos el deber de hacer que la experiencia de un usuario en nuestra página sea la mejor posible, aunque el cuento de la "buena experiencia web" suena al eslogan de nuestra desaparecida Macromedia, si nos ponemos a analizarla, tiene tanta validez que debería ser una regla:
Great experiences, build great businesses
"grandes experiencias, crean grandes negocios"Así que la próxima vez que tenga que colocar un archivo para descargar como por ejemplo un video, un manual o un archivo de audio, no se le olvide dar la información necesaria para que el usuario pueda decidir si bajar el archivo o pasarlo por alto.
Trate de no comprometer el contenido de su página con el archivo a descargar, porque a veces ocurre que colocamos una lista de precios o un formulario en un archivo con formato PDF pero, ¿Y si el usuario, por algún motivo, no pueda descargarlo o abrirlo? Debemos tener el cuidado de que este tipo de archivos (hablo de cualquier archivo multimedia en general) siempre sean una alternativa extra para el usuario (como cuando ofrecemos una versión imprimible) pero nunca que la información vital dependa únicamente de un archivo de este tipo.
Recuerden colocar el peso total del archivo, el formato, una estimación del tiempo de la descarga; además proporcionar todas las herramientas o información para que este archivo pueda ser visualizado por el usuario sin ningún inconveniente.
Siempre valore la posible complejidad de los procesos de la descarga, la descompresión, activación y hasta lectura o impresión del archivo. Pónganse en los zapatos del usuario, sean justos y háganle saber donde se van a meter.
Fuente: Cristalab
Fallos miserables del diseño web liquido y elástico
Es posible que hayas leído algún artículo sobre diseños web líquidos (De ancho variable) contra diseños sólidos (De ancho fijo). Los diseñadores nos enfrentamos a la decisión de elegir uno de esos dos caminos a la hora de trabajar nuestro layout:
En cambio, si optamos por un diseño "líquido", por más que seamos maestros en aplicar estándares y medidas porcentuales para garantizar esa "liquidez", siempre será imposible redimensionar los gráficos. Aún si nuestro diseño es sencillo y textual, como mínimo, tenemos el logo.
La solución que más abunda en la red al día de hoy es hacer un diseño en plan mix: medio líquido / medio sólido. Consiste en dar un 100% de ancho al contenedor general de nuestra página y dentro de las columnas de contenido, hacer que sólo una de ellas disfrute de un ancho porcentual: la columna central.
Bajo este recurso existen grandes portales de alta calidad e incluso supuestas web 2.0 que presumen tener un "diseño líquido". Es decir, lo que tenemos es un contenido central que se aposenta a sus anchas a grandes resoluciones de pantalla y que deja unas ridículas columnitas laterales con menús y contenido importante. Por último, un loguito de risa en la parte superior izquierda que parece gritar: ¡¡¡¡Eeeehhh ooohhhh!!!! ¡¡¡¡¡Estoy aquííííí!!!! ¿Es una sensibilidad de diseñador o a todos nos produce escarlatina esa "solución" a la variedad, cada día mayor, de resoluciones de pantalla?
¿Por qué no admitir que hay hacer algo?
¿Por qué no todos los diseñadores que sienten una punzada en el estómago ante el momento “mini-columnas sobre contenedor poderoso” hacen algo?
Sufrimos un bloqueo y así será hasta el día que todos los recursos favorezcan una adaptación lógica e incluso matemática de los elementos que integran nuestra página. Gráficos sean redimensionables, diseñadores y desarrolladores usando correctamente los valores .em y los porcentajes, etc. Ese día habremos superado la crisis
Jamás volveremos a ver cosas semejantes a:
Por el contrario, encontraremos más casos como este brillante ejemplo de cómo redimensionar adecuadamente a cualquier resolución de pantalla.
Sabemos que la tecnología actualmente no nos proporciona las herramientas necesarias para corregir ciertos detalles, pero con un poco de ingenio y sobre todo mucha planificación, podemos evitar convertirnos en grandes maestros de las “mini-columnas”, (así como lo fuimos alguna vez de las tablas).
Lo primero y más importante, planificar, ¡¡PLANIFICAR!! Nunca es demasiada planificación para lograr un buen resultado.
Lo segundo, estudiar mucho, en la web siempre encuentras recursos nuevos, ideas nuevas. Ser curioso es un elemento indispensable en ser un buen diseñador/desarrollador.
En último lugar, estas son algunas pistas que pueden ayudarnos a encontrar the_Road® a los layouts verdaderamente líquidos:
Fuente: Cristalab
- Diseño sólido basándonos en la resolución de pantalla más común según estadísticas.
- Aprovechar las virtudes que nos ofrece las medidas porcentuales en CSS e intentar una web que se adapte a TODAS las resoluciones.
En cambio, si optamos por un diseño "líquido", por más que seamos maestros en aplicar estándares y medidas porcentuales para garantizar esa "liquidez", siempre será imposible redimensionar los gráficos. Aún si nuestro diseño es sencillo y textual, como mínimo, tenemos el logo.
La solución que más abunda en la red al día de hoy es hacer un diseño en plan mix: medio líquido / medio sólido. Consiste en dar un 100% de ancho al contenedor general de nuestra página y dentro de las columnas de contenido, hacer que sólo una de ellas disfrute de un ancho porcentual: la columna central.
Bajo este recurso existen grandes portales de alta calidad e incluso supuestas web 2.0 que presumen tener un "diseño líquido". Es decir, lo que tenemos es un contenido central que se aposenta a sus anchas a grandes resoluciones de pantalla y que deja unas ridículas columnitas laterales con menús y contenido importante. Por último, un loguito de risa en la parte superior izquierda que parece gritar: ¡¡¡¡Eeeehhh ooohhhh!!!! ¡¡¡¡¡Estoy aquííííí!!!! ¿Es una sensibilidad de diseñador o a todos nos produce escarlatina esa "solución" a la variedad, cada día mayor, de resoluciones de pantalla?
¿Por qué no admitir que hay hacer algo?
¿Por qué no todos los diseñadores que sienten una punzada en el estómago ante el momento “mini-columnas sobre contenedor poderoso” hacen algo?
Sufrimos un bloqueo y así será hasta el día que todos los recursos favorezcan una adaptación lógica e incluso matemática de los elementos que integran nuestra página. Gráficos sean redimensionables, diseñadores y desarrolladores usando correctamente los valores .em y los porcentajes, etc. Ese día habremos superado la crisis
Jamás volveremos a ver cosas semejantes a:
Por el contrario, encontraremos más casos como este brillante ejemplo de cómo redimensionar adecuadamente a cualquier resolución de pantalla.
Sabemos que la tecnología actualmente no nos proporciona las herramientas necesarias para corregir ciertos detalles, pero con un poco de ingenio y sobre todo mucha planificación, podemos evitar convertirnos en grandes maestros de las “mini-columnas”, (así como lo fuimos alguna vez de las tablas).
Lo primero y más importante, planificar, ¡¡PLANIFICAR!! Nunca es demasiada planificación para lograr un buen resultado.
Lo segundo, estudiar mucho, en la web siempre encuentras recursos nuevos, ideas nuevas. Ser curioso es un elemento indispensable en ser un buen diseñador/desarrollador.
En último lugar, estas son algunas pistas que pueden ayudarnos a encontrar the_Road® a los layouts verdaderamente líquidos:
Fuente: Cristalab
La creatividad en la web: Ideas, tecnología y dos huevos
El dolor del constante aprendizaje es la premisa de todos aquellos que decidimos ir por el camino de la tecnología. Muchos lo ven ahora al reaprender Actionscript 3. ¿Por qué gastar nuestro tiempo en entender lo nuevo que Adobe nos quiere vender? ¡Tenemos proyectos que entregar, fechas que cumplir! Quizás es un complot para sacarnos del mercado web. O quizás estamos perdiendo el punto de por qué la tecnología avanza.
Mi crítica constante a la academia y la enseñanza universitaria es su lentitud en la adopción de las nuevas tendencias. La programación orientada objetos, por ejemplo, apareció en las aulas mucho después de que se empezara a usar en el desarrollo profesional de software. Hasta hace muy poco se empezaron a enseñar metodologías de diseño de software del lado del servidor y ni siquiera hablemos de estándares web.
Es por eso que los creadores de la web somos famosos por nuestro entusiasmo empírico. Cada día aprendemos nuevas cosas, formas de hacer un CSS compatible, trucos para una vida más fácil en Flash, nuevos caminos para optimizar nuestras interfaces. La proactividad a renovarnos nos diferencia de muchas otras profesiones, haciéndonos especiales. Sin embargo, esa diferencia también funciona como una desventaja para aquellos que quedamos atrapados en el loop de los nuevos tiempos.
¿Cuándo fue la última vez que nos sentimos felices en medio de un proyecto? No al final, sino en medio de su proceso. ¿Hemos dicho alguna vez que hemos "innovado"? ¿Valoramos alguna de nuestras creaciones como nueva y original? ¿O solo seguimos las pautas donde otros ya han triunfado?
Hay dos extremos en los webmasters profesionales. En uno predominan los diseñadores. Es donde vemos páginas web con interfaces extrañas, normalmente hechas en Flash. Cosas raras, difíciles de entender. En muchos casos espectáculos visuales que te hacen decir "Oh", pero que son imposibles de navegar y fallan en transmitir el mensaje de nuestros clientes. El otro extremo, dominado por los desarrolladores, es aquel completamente estándar. CSS y XHTML son omnipresentes aquí. Lleno de información, cumpliendo con cada regla de la web y siendo horrible.
Este ultimo grupo emplea las técnicas comunes de diseño web. Un logo, una botonera, colores de fondo. ¿Si sabes que funciona para qué cambiarlo? Igual no nos van a pagar más por ello. No hay tiempo para experimentar si queremos terminar de aprender lo nuevo de CSS3 y como implementarlo de modo que también funcione en el intento de navegador que es Internet Explorer. Ese es el proceso mental del segundo grupo.
El problema es que estamos usando la tecnología como una excusa. Buscamos la manera óptima de hacer un diseño a tres columnas en CSS y no pensamos en como explotar lo que conocemos para crear nuevas experiencias de usuario. Criticamos las nuevas ideas descartando su posibilidad de éxito. ¿Quién quiere video en la web con transparencias? ¿Qué sentido tiene hacer una web de noticias donde sea el usuario y no los editores los que elijan su contenido? Hay una inercia de anti-innovación en la cultura de la web (especialmente la hispanoamericana) que hace de las nuevas y buenas ideas, monstruos horribles o descartables.
Comparen las ofertas de trabajo en España contra aquellas en Estados Unidos o, digamos, Inglaterra. En España encontrarás: "se busca persona que sepa Actionscript 2, tenga experiencia en programación, diseño grafico y trabaje bien bajo presión". En la otra verás "Se busca persona con experiencia en creación de interfaces de usuario, aplicaciones multimedia y programación de elementos web de e-learning. De preferencia en Flash". No importa la tecnología, sino tu capacidad en ella.
Hay una falta seria de ganas de crear. Sin embargo, también hay casos donde las nuevas "creaciones" generan horribles ejemplos de cómo no hacer algo.
Cuando voy a congresos y conferencias de diseño grafico encuentro estos ejemplos por montones. Webs con intros impresionantes de efectos alucinantes y algunos megabytes de peso. Sitios promocionales que cargan en un popup flotante a pantalla completa para "tener una inmersión completa del usuario". Ya antes había hablado de esto en mi artículo del odio a Flash, pero nunca está de más repetirlo. Estas son las personas que no entienden la web. Esto no es multimedia en CD, aquí la gente sólo está a un click de distancia de mandarte al infierno.
Para tenerlo más claro: Mientras no tengas popups, intros horribles o sonido molesto e invasivo en tu web, experimenta cuanto se te de la gana.
Un ejemplo que estuvo sonando en los foros de Cristalab en estos días fue el de Semillero. Una web de GrupoW cargada de premios. De entrada vemos dos pecados mortales: un intro que te exige un click adicional y un popup. Afortunadamente, e ignorando la forma en que el popup arruinó mi navegación por pestañas, la web cargó rápidamente.
Van dos clicks que he tenido que dar, uno para hacer saltar el popup y otro para que el popup se reprodujera y AÚN no he llegado a la web. Dos clicks son serious business a nivel de usabilidad. Pero sigamos adelante.
Y me sale una jodida semilla... WTF!? La semilla viene con un aviso de "up". Como animándome a que me vaya para arriba. Di click y de la semilla un arbol empezó a crecer. En cada rama hay un botón que me lleva al contenido. Ya serían 4 clicks antes de llegar a la información.
Al final, después de más ramas, hojas, flores y frutos, llego a un lindo texto que dice "ORGULLO". Perdido como quién más... Le doy click a orgullo y me sale un texto lindo hablando de cómo ganaron. En general, la navegación requiere que bajes y subas entre las ramas. El proceso requiere que veas como el árbol crece y decrece. Y aun no tengo ni puta idea de que es Semillero. Francamente, antes de llegar a "somos", creí que era una web de venta de semillas o algo relacionado con el campo. Resultó ser una especie de incubadora de diseñadores pro.
Esa frase es algo a recordar. La experimentación en Semillero es total y en cierto modo genial y valiosa de los premios ganados. Pero después del "wow" de la primera vez es un autentico dolor navegarla para conseguir algo de información de ella. La creatividad de la idea rivaliza contra la efectividad del sitio. Por otro lado, por el target del sitio, quizás sea más importante el impacto inicial del usuario a la información que pueda entregar después. Pero muchachos, ¡Por lo menos quiten el popup! Los bloqueadores de ventanas emergentes en todos los navegadores no fueron creados precisamente porque sea un placer para el usuario usar uno.
Para que no digan que dudo del gran trabajo de GrupoW, miremos otra de sus webs, Ambienta Comex.
Esta web es una jodida obra de arte. Al principio te pide elegir entre tres posibles escenarios de acuerdo a lo que buscas, lo que no está mal. Luego, hasta el preloader es un ejemplo de una gran interfaz. Todo un sistema de venta para un usuario interesado en el tema. La integración del video digital a la experiencia del usuario es tan transparente y única que debería ser un ejemplo estudiado en las facultades de diseño grafico y clases de GUI para ingenieros. Es uno de los mejores ejemplos donde la innovación en interfaces es tan buena que impresiona. Un testimonio de que es posible hacer cosas "wow" sin arruinar por ello la experiencia de un usuario antiguo.
De hecho, propondré que esta web sea estudiada académicamente. Estas son las cosas que valen la pena.
Mi única queja en Ambienta es que el manejo de los títulos a nivel de HTML no es el mejor. Pero más que una queja es un berrinche, así que no me hagan caso.
Por ultimo, Big Spaceship. Esta gente fue la encargada de crear Nike Air. Una web que combina conexión a datos para crear de manera fácil un sitio promocional multilenguaje, al mismo tiempo que la integración con video en Flash más impresionante que hayas visto últimamente. La navegación corta radicalmente con todo lo tradicional y al mismo tiempo es 100% usable. Es rápida a pesar del intensivo uso de video e imágenes y entrega la información exacta de una manera clara y efectiva. 100/100.
Big Spaceship no se preguntó ¿Cuánto tenemos que esperar a Actionscript 3 para hacer eso? O ¿Aprendemos Flash 9 para empezar nuestro proyecto? Ellos quisieron hacer la idea y fue la idea, no la tecnología, lo que los guió.
Es lo que debemos hacer. Inicia un proyecto. Piensa en algo que quieras plasmar. Olvídate de lo que sabes y de lo que no sabes técnicamente. Simplemente di: "Quiero hacer esto". Cuando lo sepas y sólo en ese momento ya te puedes preguntar "¿Cómo hago esto?". La tecnología y sus avances no son un fin por el que debamos matarnos, son un medio para realizar nuestras ideas. Y es ahí donde debemos enfocarnos, en las ideas.
FUENTE: Cristalab
Mi crítica constante a la academia y la enseñanza universitaria es su lentitud en la adopción de las nuevas tendencias. La programación orientada objetos, por ejemplo, apareció en las aulas mucho después de que se empezara a usar en el desarrollo profesional de software. Hasta hace muy poco se empezaron a enseñar metodologías de diseño de software del lado del servidor y ni siquiera hablemos de estándares web.
Es por eso que los creadores de la web somos famosos por nuestro entusiasmo empírico. Cada día aprendemos nuevas cosas, formas de hacer un CSS compatible, trucos para una vida más fácil en Flash, nuevos caminos para optimizar nuestras interfaces. La proactividad a renovarnos nos diferencia de muchas otras profesiones, haciéndonos especiales. Sin embargo, esa diferencia también funciona como una desventaja para aquellos que quedamos atrapados en el loop de los nuevos tiempos.
¿Cuándo fue la última vez que nos sentimos felices en medio de un proyecto? No al final, sino en medio de su proceso. ¿Hemos dicho alguna vez que hemos "innovado"? ¿Valoramos alguna de nuestras creaciones como nueva y original? ¿O solo seguimos las pautas donde otros ya han triunfado?
Hay dos extremos en los webmasters profesionales. En uno predominan los diseñadores. Es donde vemos páginas web con interfaces extrañas, normalmente hechas en Flash. Cosas raras, difíciles de entender. En muchos casos espectáculos visuales que te hacen decir "Oh", pero que son imposibles de navegar y fallan en transmitir el mensaje de nuestros clientes. El otro extremo, dominado por los desarrolladores, es aquel completamente estándar. CSS y XHTML son omnipresentes aquí. Lleno de información, cumpliendo con cada regla de la web y siendo horrible.
Este ultimo grupo emplea las técnicas comunes de diseño web. Un logo, una botonera, colores de fondo. ¿Si sabes que funciona para qué cambiarlo? Igual no nos van a pagar más por ello. No hay tiempo para experimentar si queremos terminar de aprender lo nuevo de CSS3 y como implementarlo de modo que también funcione en el intento de navegador que es Internet Explorer. Ese es el proceso mental del segundo grupo.
El problema es que estamos usando la tecnología como una excusa. Buscamos la manera óptima de hacer un diseño a tres columnas en CSS y no pensamos en como explotar lo que conocemos para crear nuevas experiencias de usuario. Criticamos las nuevas ideas descartando su posibilidad de éxito. ¿Quién quiere video en la web con transparencias? ¿Qué sentido tiene hacer una web de noticias donde sea el usuario y no los editores los que elijan su contenido? Hay una inercia de anti-innovación en la cultura de la web (especialmente la hispanoamericana) que hace de las nuevas y buenas ideas, monstruos horribles o descartables.
Comparen las ofertas de trabajo en España contra aquellas en Estados Unidos o, digamos, Inglaterra. En España encontrarás: "se busca persona que sepa Actionscript 2, tenga experiencia en programación, diseño grafico y trabaje bien bajo presión". En la otra verás "Se busca persona con experiencia en creación de interfaces de usuario, aplicaciones multimedia y programación de elementos web de e-learning. De preferencia en Flash". No importa la tecnología, sino tu capacidad en ella.
Hay una falta seria de ganas de crear. Sin embargo, también hay casos donde las nuevas "creaciones" generan horribles ejemplos de cómo no hacer algo.
Cuando voy a congresos y conferencias de diseño grafico encuentro estos ejemplos por montones. Webs con intros impresionantes de efectos alucinantes y algunos megabytes de peso. Sitios promocionales que cargan en un popup flotante a pantalla completa para "tener una inmersión completa del usuario". Ya antes había hablado de esto en mi artículo del odio a Flash, pero nunca está de más repetirlo. Estas son las personas que no entienden la web. Esto no es multimedia en CD, aquí la gente sólo está a un click de distancia de mandarte al infierno.
Para tenerlo más claro: Mientras no tengas popups, intros horribles o sonido molesto e invasivo en tu web, experimenta cuanto se te de la gana.
Un ejemplo que estuvo sonando en los foros de Cristalab en estos días fue el de Semillero. Una web de GrupoW cargada de premios. De entrada vemos dos pecados mortales: un intro que te exige un click adicional y un popup. Afortunadamente, e ignorando la forma en que el popup arruinó mi navegación por pestañas, la web cargó rápidamente.
Van dos clicks que he tenido que dar, uno para hacer saltar el popup y otro para que el popup se reprodujera y AÚN no he llegado a la web. Dos clicks son serious business a nivel de usabilidad. Pero sigamos adelante.
Y me sale una jodida semilla... WTF!? La semilla viene con un aviso de "up". Como animándome a que me vaya para arriba. Di click y de la semilla un arbol empezó a crecer. En cada rama hay un botón que me lleva al contenido. Ya serían 4 clicks antes de llegar a la información.
Al final, después de más ramas, hojas, flores y frutos, llego a un lindo texto que dice "ORGULLO". Perdido como quién más... Le doy click a orgullo y me sale un texto lindo hablando de cómo ganaron. En general, la navegación requiere que bajes y subas entre las ramas. El proceso requiere que veas como el árbol crece y decrece. Y aun no tengo ni puta idea de que es Semillero. Francamente, antes de llegar a "somos", creí que era una web de venta de semillas o algo relacionado con el campo. Resultó ser una especie de incubadora de diseñadores pro.
"La publicidad no sólo debe ser creativa, también debe ser efectiva
Esa frase es algo a recordar. La experimentación en Semillero es total y en cierto modo genial y valiosa de los premios ganados. Pero después del "wow" de la primera vez es un autentico dolor navegarla para conseguir algo de información de ella. La creatividad de la idea rivaliza contra la efectividad del sitio. Por otro lado, por el target del sitio, quizás sea más importante el impacto inicial del usuario a la información que pueda entregar después. Pero muchachos, ¡Por lo menos quiten el popup! Los bloqueadores de ventanas emergentes en todos los navegadores no fueron creados precisamente porque sea un placer para el usuario usar uno.
Para que no digan que dudo del gran trabajo de GrupoW, miremos otra de sus webs, Ambienta Comex.
Esta web es una jodida obra de arte. Al principio te pide elegir entre tres posibles escenarios de acuerdo a lo que buscas, lo que no está mal. Luego, hasta el preloader es un ejemplo de una gran interfaz. Todo un sistema de venta para un usuario interesado en el tema. La integración del video digital a la experiencia del usuario es tan transparente y única que debería ser un ejemplo estudiado en las facultades de diseño grafico y clases de GUI para ingenieros. Es uno de los mejores ejemplos donde la innovación en interfaces es tan buena que impresiona. Un testimonio de que es posible hacer cosas "wow" sin arruinar por ello la experiencia de un usuario antiguo.
De hecho, propondré que esta web sea estudiada académicamente. Estas son las cosas que valen la pena.
Mi única queja en Ambienta es que el manejo de los títulos a nivel de HTML no es el mejor. Pero más que una queja es un berrinche, así que no me hagan caso.
Por ultimo, Big Spaceship. Esta gente fue la encargada de crear Nike Air. Una web que combina conexión a datos para crear de manera fácil un sitio promocional multilenguaje, al mismo tiempo que la integración con video en Flash más impresionante que hayas visto últimamente. La navegación corta radicalmente con todo lo tradicional y al mismo tiempo es 100% usable. Es rápida a pesar del intensivo uso de video e imágenes y entrega la información exacta de una manera clara y efectiva. 100/100.
Big Spaceship no se preguntó ¿Cuánto tenemos que esperar a Actionscript 3 para hacer eso? O ¿Aprendemos Flash 9 para empezar nuestro proyecto? Ellos quisieron hacer la idea y fue la idea, no la tecnología, lo que los guió.
Es lo que debemos hacer. Inicia un proyecto. Piensa en algo que quieras plasmar. Olvídate de lo que sabes y de lo que no sabes técnicamente. Simplemente di: "Quiero hacer esto". Cuando lo sepas y sólo en ese momento ya te puedes preguntar "¿Cómo hago esto?". La tecnología y sus avances no son un fin por el que debamos matarnos, son un medio para realizar nuestras ideas. Y es ahí donde debemos enfocarnos, en las ideas.
FUENTE: Cristalab
Estadísticas de Cristalab para diseñadores web
A lo w3schools, analizaremos en esta ocasión los parámetros de navegación que presentan los visitantes de nuestra comunidad. Muchos de estos datos nos demuestran cosas como la penetración del Flash Player 9 en la comunidad de desarrolladores o el uso de distintas resoluciones de pantalla en un público tan enfocado como es el que visita a diario Cristalab.
Gráficos, cortesía de Google Analytics.
Penetración del Flash Player 9 y grafico de versiones
Empecemos por uno de nuestros temas principales, el uso de diferentes versiones del Flash Player.
Vemos un claro dominio del Player 8, pero con la liberación de muchos arreglos de seguridad, la grafica se hace difícil de descifrar para tener números reales de que versión tiene que cantidad. Así que saquemos los datos:
El Flash Player 8 ya ha obtenido un gran dominio. De igual manera, el recién lanzado Player 9 ha llegado en al 23% en menos de un mes. Ambos suman un 87% del total de usuarios con el Player instalado. El 7 y el 6 juntos suman 10%, ¿Tiempo de abandonar por fin Flash MX y MX 2004? Los usuarios de Linux dicen que aún no.
Resolución de pantalla
Mucha gente habla de que ya es tiempo de abandonar los diseños a 800x600 y empezar a crear o diseños líquidos o diseños a 1024x768. En estas cuestiones las estadísticas hablan más fuerte que los "entusiastas", así que veamos el panorama.
¡Aja! El ancho de 1024 empieza a ganar un gran terreno con el 57% del dominio, sumándose el 1280 con un 12%. Ambos llegan al 70% de los usuarios dejando al ancho de 800 atrás con 18.5%.
¿Es hora entonces de abandonar el 800 y empezar nuestros diseños a 1024?
¡NOO!
De nuevo, pensemos matemáticamente. Si tenemos una web a la que nos llegan 1000 visitas únicas diarias, podemos diseñar sólo para 1024, con esto hecho estaremos descartando al 18.5% de nuestros visitantes que son (Operación difícil) nada menos que 185 clientes potenciales por día. ¿5550 visitas pérdidas al mes por tener doscientos píxeles más de espacio? Ustedes deciden.
Navegadores
El tema más delicado y sentimental de nuestra amada comunidad es el vehiculo que nuestros usuarios usan para llegar al contenido que con tanto esmero queremos mostrarles. Sea El Maligno u otros más decentes, siempre esperamos que más y más usuarios vean la luz (Porque cierta empresa no lo hará) y poco a poco migren hacia soluciones que tengan un soporte real de los estándares de la web. ¿Hay esperanza?
¡Hay esperanza! Aunque El Maligno aún tenga poseídas las almas del 73% de los Clabers, es claro que muchos ven la luz más y más. 23% usando Firefox es mucho y realmente demuestra que hay luz al final del tunel. Tambien vemos que yo tenía razon en el comic de la entrevista a Internet Explorer... Opera: 2%
Disclaimer: No tengo iPod, loft, bulldog, jersey a cuadros, pequeñas gafas oscuras y aunque sí hago RIAs, no tengo (desgraciadamente) un MacBook.
Sistemas Operativos
Éste no lo iba a incluir pero al final no me aguanté. No dice mucho, nuestra comunidad es principalmente de Flash y diseño web con herramientas del imperio (Macrodib... Adobe) que sólo corren en Windows y Mac (Próximamente Flex 2 y Flash Player 9 para Linux). Así que si no ves a tu sistema operativo de preferencia aquí... no nos hacemos responsables de tus lágrimas derramadas. (Puedes enviar tus quejas a la100rra@gmail.com , seguro serán contestadas)
...
¿Bueno, que esperaban? El mando es así.
Big General Disclaimer
Cristalab es una comunidad de diseñadores y desarrolladores web con personas del Mundo Real® infiltradas y otras especies raras. Nuestro target group es de lo más distópico y antimarketing, por lo que al ver estas cifras, debes tener en cuenta que muy probablemente no sirvan en tu proyecto de toda la vida con un objetivo a usuarios normales que usan el PC para descargar pr0n, abrir el mesanjer y leer el jotmeil. Para esas webs los parámetros de diseño son fáciles: 800x600, Windows, Internet Explorer y Flash Player en versión: el_mas_reciente - 1.
FUENTE: Cristalab
Gráficos, cortesía de Google Analytics.
Penetración del Flash Player 9 y grafico de versiones
Empecemos por uno de nuestros temas principales, el uso de diferentes versiones del Flash Player.
Vemos un claro dominio del Player 8, pero con la liberación de muchos arreglos de seguridad, la grafica se hace difícil de descifrar para tener números reales de que versión tiene que cantidad. Así que saquemos los datos:
El Flash Player 8 ya ha obtenido un gran dominio. De igual manera, el recién lanzado Player 9 ha llegado en al 23% en menos de un mes. Ambos suman un 87% del total de usuarios con el Player instalado. El 7 y el 6 juntos suman 10%, ¿Tiempo de abandonar por fin Flash MX y MX 2004? Los usuarios de Linux dicen que aún no.
Resolución de pantalla
Mucha gente habla de que ya es tiempo de abandonar los diseños a 800x600 y empezar a crear o diseños líquidos o diseños a 1024x768. En estas cuestiones las estadísticas hablan más fuerte que los "entusiastas", así que veamos el panorama.
¡Aja! El ancho de 1024 empieza a ganar un gran terreno con el 57% del dominio, sumándose el 1280 con un 12%. Ambos llegan al 70% de los usuarios dejando al ancho de 800 atrás con 18.5%.
¿Es hora entonces de abandonar el 800 y empezar nuestros diseños a 1024?
¡NOO!
De nuevo, pensemos matemáticamente. Si tenemos una web a la que nos llegan 1000 visitas únicas diarias, podemos diseñar sólo para 1024, con esto hecho estaremos descartando al 18.5% de nuestros visitantes que son (Operación difícil) nada menos que 185 clientes potenciales por día. ¿5550 visitas pérdidas al mes por tener doscientos píxeles más de espacio? Ustedes deciden.
Navegadores
El tema más delicado y sentimental de nuestra amada comunidad es el vehiculo que nuestros usuarios usan para llegar al contenido que con tanto esmero queremos mostrarles. Sea El Maligno u otros más decentes, siempre esperamos que más y más usuarios vean la luz (Porque cierta empresa no lo hará) y poco a poco migren hacia soluciones que tengan un soporte real de los estándares de la web. ¿Hay esperanza?
¡Hay esperanza! Aunque El Maligno aún tenga poseídas las almas del 73% de los Clabers, es claro que muchos ven la luz más y más. 23% usando Firefox es mucho y realmente demuestra que hay luz al final del tunel. Tambien vemos que yo tenía razon en el comic de la entrevista a Internet Explorer... Opera: 2%
- Mensaje para ti, amante de Opera: Hola, quiero que sepas que Opera es el navegador que uso en mi Palm cuando ando “uairelés”, tambien es mi cliente de IRC preferido, tanto en mi “Desktop” como en mi “Laptop”. Así mismo entérate que cada vez que uso Opera me siento tan c00l que creo que es el unico navegador que sale con mi iPod, mi loft, mi bulldog con jersey a cuadros, mis pequeñas gafas oscuras y mi MacBook mientras programo RIAs.
Disclaimer: No tengo iPod, loft, bulldog, jersey a cuadros, pequeñas gafas oscuras y aunque sí hago RIAs, no tengo (desgraciadamente) un MacBook.
Sistemas Operativos
Éste no lo iba a incluir pero al final no me aguanté. No dice mucho, nuestra comunidad es principalmente de Flash y diseño web con herramientas del imperio (Macrodib... Adobe) que sólo corren en Windows y Mac (Próximamente Flex 2 y Flash Player 9 para Linux). Así que si no ves a tu sistema operativo de preferencia aquí... no nos hacemos responsables de tus lágrimas derramadas. (Puedes enviar tus quejas a la100rra@gmail.com , seguro serán contestadas)
...
¿Bueno, que esperaban? El mando es así.
Big General Disclaimer
Cristalab es una comunidad de diseñadores y desarrolladores web con personas del Mundo Real® infiltradas y otras especies raras. Nuestro target group es de lo más distópico y antimarketing, por lo que al ver estas cifras, debes tener en cuenta que muy probablemente no sirvan en tu proyecto de toda la vida con un objetivo a usuarios normales que usan el PC para descargar pr0n, abrir el mesanjer y leer el jotmeil. Para esas webs los parámetros de diseño son fáciles: 800x600, Windows, Internet Explorer y Flash Player en versión: el_mas_reciente - 1.
FUENTE: Cristalab
Tuesday, April 24, 2007
Reglas de codificación y lineamientos de diseño de CSS
Estos lineamientos o guía de creación de código CSS permiten llevar un trabajo ordenado y mejor productividad tanto en proyectos personales como en equipos de trabajo. Sigue estas pequeñas reglas para tener una mayor organización y lógica en tu proceso de diseño de hojas de estilo.
Organización de los archivos
Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en 5 partes básicas todos nuestros estilos. Teniendo estos archivos:
- layout.css: Todo lo relacionado con posicionamiento, esquema del diseño, etc. Exclusivamente.
- color.css: Colores de fondo e imágenes. En el caso de los background también sus repeticiones. Bordes de elementos, estilos de borde.
- fuentes.css: Tipo de fuente o tipografía, adornos de fuente (negrita, cursiva, subrayado). Ancho de líneas, espaciado, tamaño de fuente.
- header.css: TODOS los estilos del header/botonera del diseño.
- forms.css: TODOS los estilos de formularios y elementos de interacción.
Además de estos, habrá un archivo que una a todos y sea el único que llamaremos en el HTML. En el caso de Cristalab, el archivo se llama cristalab.css y su código es:
@import url("header.css");
@import url("color.css");
@import url("fuentes.css");
@import url("forms.css");
@import url("layout.css"); Dentro del CSS
Orden de escritura.
Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Colocaremos los estilos en este orden:
- Etiquetas (Tags de HTML)
- Identificadores
- Clases
- Casos especiales
A su vez, estos los organizaremos en orden alfabético. Ejemplo:
body {}
label{}
span{}
#bate{}
.armageddon {}
.flamas {}
.sangre {}
Comentarios
En caso de que haya estilos especiales o algún cambio importante dentro del equipo de desarrollo, se colocarán comentarios al principio de esa etiqueta de la siguiente manera. Si el cambio no se quita o modifica, se debe mantener el comentario:
/* Por Freddie. 17 de Agosto del 2006
Hack de lo más c00l para lograr el diseño a dos columnas sin problemas
*/
.inferior
{
clear: both;
}
Tabs o Espacios.
En el contenido dentro de corchetes, siempre se identará este contenido con tabs. Cualquier editor decente puede configurarse para poner tabs en vez de espacios en la identación (Dreamweaver, Aptana, Eclipse, etc)
Opción de cambiar espacios por tabs en Aptana.
.cosa {
/* comentario identado con un tab */
}
Nombres de etiquetas, identificadores y clases.
Los nombres de etiqueta son, por supuesto, en minúscula, así como todos los demás nombres. Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”.
Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve:
body {}
#titulo_header {}
.enlace_footer {} Corchetes o llaves. Donde colocarlas
Aunque esto sea motivo de peleas constantes en los equipos de trabajo, lo mejor es seguir el camino que permita mayor claridad en el desarrollo. Para ponerlo en pocas palabras, todos los corchetes van en una línea propia.
.fondo
{
background: none;
}
.titulo
{
color: #0000FF;
}
Espacios después de signos.
Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Pon un espacio después de las comas, los signos de dos puntos, etc. Es básicamente escribir código como si se escribiera (bien) en español.
.fondo, .titulo
{
background: none;
color: #05F1F2;
}
Documentación de hacks
CUALQUIER hack o cosa rara para hacer funcionar un elemento especifico en el diseño, sea porque no hay otra forma de hacerlo o porque es la mejor manera de que funcione en navegadores como El Maligno, debe documentarse. También, no deben usarse hacks hasta que no se han probado todas las opciones posibles de hacerlo de manera correcta.
.info_comic
{
/* Esto logra que funcione en IE de manera mística y nos
permite ir por cerveza */
line-height:12px ¡important;
}
Optimizaciones de código.
Poner en una sola línea el código de un background o simplificar los colores de la paleta básica no sólo es permitido sino que impulsamos a hacerlo:
.contenedor
{
/* aquí el color sería el #EEFF33 */
background: #EF3 url(/images/general/fondo.png) repeat-x;
}
Con estos sencillos lineamientos de diseño de hojas de estilo CSS, se hace mucho más organizado y efectivo el trabajo en equipo. Pónganlo en practica en sus empresas y proyectos. La mayoría de los lineamientos están basados en reglas de codificación usadas en muchos proyectos libres conocidos, como phpBB.
Fuente: www.cristalab.com
La web, hipertexto y literatura
Por lord Shiva, tecnonexus@hotmail.com
"Life is like a videogame with no chances to win..."
Atari Teenage Riot (into the dead - burn, berlin, burn)
Atari Teenage Riot (into the dead - burn, berlin, burn)
Introducción
Si estás leyendo este artículo entonces te interesa en alguna forma cierto tipo de literatura, y estás usando internet y más precisamente un mecanismo hipertextual.
Sin darte cuenta (o sí) ya caíste en la perversa batalla entre el idealismo más utópico y el uso de un sistema masivo y global con implicancias bastante sombrías.
El profetizado boom de la sociedad de la información nos ha explotado en la cara de golpe. Echemos un ojo a ciertos hechos del uso del hipertexto como herramienta en el sistema literario, que de tan obvios pasan inadvertidos.
Bienvenidos a un mundo virtual demasiado parecido al real
¿Qué carajo es el hipertexto?
Cuando usás internet para ver una página web estás usando hipertexto.
El hipertexto se ideó como una evolución del texto, en la cual se agregan la multilienalidad de contenidos paralelos, y la no secuencialidad de los mismos.
Es un enfoque de la información, es una tecnología de la comunicación y es un sistema gracias al cual esta evolución textual puede hacerse posible.
Bajo este enfoque un usuario de hipertexto puede manejar y organizar información diversa, creándola, agregándola, enlazándola y compartiéndola, merced a una tecnología de bases de datos, organizada en bloques de contenido llamados lexias, interconectados por enlaces o links, que oportunamente activados recuperan texto, gráficos, imágenes, video, animaciones, audio o una combinación de todo esto (el hipermedio), permitiéndole así personalizar tanto la presentación como la generación de las lexias.
Este enfoque se asemeja mejor al paradigma natural de la construcción del conocimiento humano, que actúa por libre asociación, estableciendo categorías personales de acuerdo a determinados intereses o necesidades, que el texto tradicional, con una secuencia de monolectura predeterminada.
El fenómeno hipertextual consta de un hiperdocumento que es el contenido de información en sí misma (los fragmentos hipermediales + los enlaces), un sistema hipertextual que es la herramienta de software que usemos para leer y/o escribir hipertexto y un ambiente hipertextual que es el hardware que soporta el sistema y el hiperdocumento. El hipertexto idealmente debería poseer medios de organización y presentación de los datos bajo diversas estructuras, una interfaz gráfica intuitiva que por su virtualidad emule los modelos cognitivos humanos, un ambiente compartido de distribución y concurrencia, un ambiente colaborativo que permite crear nuevas referencias embebidas en el texto y fácilmente portables, que no alteren lo referenciado, y varios mecanismos de recuperación de datos.
Un poquito de historia. No hay nada nuevo bajo el sol (excepto este virtual juguetito).
A pesar de sus veinte años de madurez la idea del hipertexto no es novedosa. Hay antecedentes en el campo artístico de muy larga data (directamente relacionado con la pedagogía y la encriptación hermética), como el I-Ching, antiguo tratado oracular taoísta, la technopaegnia de la Grecia clásica, los kaligramas, los textos mágicos y alquímicos, y las interpretaciones cabalísticas. De forma más reciente buenos ejemplos de contenidos multineales son el Quijote de Cervantes, Así habló Zaratustra de Nietzche, Rayuela de Cortázar, el film Ocho y Medio de Fellini o la miniserie Picos Gemelos de Lynch.
De hecho el texto tradicional es una estructura dinámica, y el principio y fin de los mismos no son marcas de clausura sino conexiones con otros textos. Están contextualizados psíquica, cultural, social y políticamente. Los discursos tradicionales utilizan la habitualmente la polifonía y la intertextualidad como estrategias propias.
Finalmente la lectura es un fenómeno de colaboración semiótica, un nexo entre autor y lector, un medio para llegar a la comunicación.
La hipertextualidad no añade nada nuevo a las teorías discursivas en sí mismas, pero brinda un medio y un soporte ideal para materializarlas. De la misma manera en la que mediante un software de representación de sistemas matemáticos podemos visualizar objetos geométricos de dimensión fraccionaria difícilmente practicables sin la herramienta tecnológica, de igual manera el sistema hipertextual permite visualizar libremente los procesos cognitivos humanos a través de hiperdocumentos.
Igualito que con la imprenta y la máquina de escribir.
El sistema literario está integrado por sectores que hacen posible la realidad de la lectura de un texto, conectando al autor con el lector último. Históricamente cada innovación tecnológica en el campo literario ha modificado el sistema drásticamente, y así el concepto mismo de los textos. Desde las láminas de arcilla o cera y las estecas en babilonia, o el papel y la pluma que hicieron perdurable un evento efímero como la transmisión de la tradición oral. Desde la imprenta que multiplicó enormemente la disponibilidad de textos y quitó el carácter único, personal y elitista de cada copia manuscrita, o la máquina de escribir que llevó la posibilidades de la imprenta a la esfera individual de cada autor. Siempre se alzaron voces reaccionarias amparándose en romanticismos absurdos, negando el carácter artístico de los discursos ejecutados con tecnología innovadora. Y es que los centros de poder se benefician con la ignorancia y la alta especialización de la información, con la restricción de su distribución y el acceso que a ella se tenga, de una forma u otra.
El sector creativo literario comete un craso error al confundir el factor tecnológico de la escritura con el factor creativo, cuando son dos cosas bien diferenciadas. Como el hipertexto "deshumaniza" en cierta forma la comunicación genera miedo al reemplazo del autor por un proceso automático. Lo cierto es que el hipertexto aumenta la autonomía productiva, desde las herramientas de edición digital, el incremento de la producción de textos (aunque no necesariamente de la calidad de los mismos), y la sustitución de la condición de escritor rechazado por las editoriales, a escritor "poco leído". El hipermedio permite explotar ciertas posibilidades textuales que los escritos tradicionales dejan de lado, como la rítmica de la escritura, la expresividad acústica de una voz recitando, y la interconexión multihilos dinámica.
El sector de producción editorial puede tener reacciones diversas ante la aparición de las nuevas tecnologías hipermediales. Dado que la inmensa mayoría de las editoriales son empresas comerciales, cuyo único fin, lejos de la cultura, es ganar dinero este sector puede asimilar o rechazar el hipertexto en función de la consolidación y la conveniencia de nuevos mercados. Las ediciones electrónicas de los libros permiten emitir tiradas críticas lo que redunda en el ahorro de papel, por ende de espacio y dinero, también hace posible la modalidad de impresión bajo demanda (mediante una suscripción). Los libros electrónicos nunca se agotan. Por otro lado en un medio tan complejo e incontrolable como las redes de información se hace imposible ejercer un efectivo control de copia.
Los sectores dedicados a la distribución literaria tienden a desaparecer conllevando una disminución del precio final de los libros.
Al eliminarse el factor de distancia física entre el ejemplar del libro ya editado y el lector las librerías tenderán a especializarse tanto en las temáticas como en el público al que apunten para adaptarse a estos nuevos cambios.
Dentro del sector de los lectores los más beneficiados son los escolares y académicos que podrán echar mano a optimizados medios pedagógicos, y velocidad para generar y distribuir textos especializados que suelen tener vigencia por corto tiempo.
Los críticos, que no dejan de ser lectores profesionalizados modifican sus condiciones de labor pero no mucho más que eso.
Los sectores documentales mejoran sus consultas y métodos de archivo, crean redes mundiales de consulta de textos, que puede interpretarse idealmente como una contraposición a la centralización del conocimiento, por un modelo de biblioteca universal dispersa y rápidamente accesible.
A favor o en contra (elegí el color, las blancas mueven primero).
Sin caer en los extremos de la mesiánica y alucinada utopía maquinista de salvación de los transhumanistas, o el rechazo sistemático y reaccionario a lo tecnológico que solamente contribuye a establecer más fuertemente un status quo jerárquico del poder, hay que hacer un balance entre lo positivo y lo negativo de la realidad del fenómeno hipertextual.
Ciertamente el uso y manejo de este sistema permite una descentralización de los discursos, y una democratización de la información. Brinda el poder de producir y distribuir de forma autónoma y libre la literatura y el arte en general. Pone de manifiesto la necesidad de nuevas mentes capaces de construir textos cartográficos, y nuevas mentes capaces de navegar estos mapas conceptuales de forma creativa. Son una forma práctica de promocionar la libertad, y de generar un nuevo tipo de arte comunitario y lúdico, difuminando las fronteras entre lo cotidiano y lo artístico de forma participativa.
El talón de Aquiles de esta realidad es que el hipertexto se manifiesta gracias a un hiperespacio físico y tecnológico. Casi cualquier autor puede hoy acceder rápidamente a una computadora personal con el software necesario para producir, leer y acceder hipertexto, pero las redes de fibra óptica que circunvalan el globo varios cientos de veces, los enlaces satelitales que salvan miles de kilómetros en un segundo, los poderosos servidores que alojan los hiperdocumentos están ciertamente fuera del alcance del usuario medio. Igualmente con los conocimientos técnicos necesarios para poder gestionar íntegramente un hiperespacio autónomo.
El empleo de las tecnologías de comunicación implica el cumplimiento de ciertas premisas políticas. Hay que atender al cambio de los protocolos de comunicación conocidos, usados, acatados, discutidos o desobedecidos, y a la posición de los discursos de poder y a las instituciones que los detentan.
El desarrollo de ese ambiente de "hardware pesado" ha estado en manos de corporaciones que comercian con el bien más preciado en la actualidad, la información. Los núcleos de poder material ya están bastante consolidados, y en el futuro solo resta la concentración de ese poder en cúmulos cada vez más pequeños y totalitarios.
El hipertexto no deja de ser una manifestación de la búsqueda de un lenguaje común que acelere y optimice la comunicación, impulsada por el interés económico de la industria y por el afán de concentrar enormes cantidades de información relevante para tomar decisiones corporativas.
Los sistemas hipermediales buscan trasladar el mundo a la Red, un cyberespacio de tiempo congelado. Tras la polimorfia, la multisecuencialidad y la interactividad del mundo virtualizado se esconde una peligrosa uniformidad semiótica que aspira a colonizar discursos culturales regionales, borrando distancias geográficas e históricas en beneficio de un mercado masivo, ávido de espectáculo, rapidez, diversión y superficialidad. El hipertexto puede ocultar el contexto y la historia de las lexias, borrar su procedencia o acomodarla caprichosamente, lo que resulta muy peligroso en lexias de contenido discursivo teórico o crítico. Puede ser una herramienta para que las instituciones que detentan el poder de la información adapten ideas individuales a sus propios fines.
La descentralización del poder de la información y los discursos tiene que ver menos con el hipertexto que con el hecho de que los enlaces y el contenido de las lexias están trazados a priori, puesto que con la excepción de una pequeña minoría ilustrada en los procesos de gestión hipertextual y el ambiente que le es propio, el usuario medio solo consume la información que encuentra en la red, no genera nuevos bloques de contenido ni nuevos enlaces entre los mismos.
Para que el hecho del hipertexto ocurra debe intermediar antes un programador que desarrolle el entorno informático que lo soporte, y también con la excepción de una minoría aún más selecta integrada por los programadores que trabajan en el desarrollo de sistemas de software libre, de código abierto bajo licencias públicas generales, por lo general los programadores desarrollan estos entorno como medio para ganarse la vida: una empresa le paga por desarrollar software rentable, sin importarle si este es o no políticamente liberador o democrático.
Para que el hipermedio sea rentable se deben generar entornos masivos con pocas distinciones culturales. Salvo limitadas redes de usuarios, la inmensa mayoría del espacio hipertextual es de entretenimiento (desde video juegos hasta pornografía), donde los límites están fuertemente fijados, y el acceso a muchos contenidos sigue estando restringido o negociable previo pago u otro tipo de filtro.
Teniendo estas cuestiones claras es más fácil diferenciar lexias que tiendan a una liberación del conocimiento y la comunicación, o camufladas bajo una apariencia liberadora, apunten a tornar un medio creado para la libertad, en un medio usado para seguir comerciando con la información. Un legendario hombre judío dijo hace casi dos mil años "...dadle al César lo que es del César..."
¿Cuán abajo es el under?
Así que tenés un sitio web underground, y lo alojaste en geocities, pero antes lo redireccionaste en cjb. Entonces tus usuarios, antes de poder acceder a tus contenidos fueron infectados con mucha probabilidad con una peste de adware, con una cookie y algún spyware y al entrar a tu sitio cada tanto ven unas pop ups o unos banners muy bonitos con publicidades que poco tienen que ver con el mensaje que querés comunicar. Lo que importa es la esencia dirás, pero estás sostenido on line por corporaciones. No creas que sos como un insider socavando viralmente el sistema desde adentro. Ellos te usan, y te usan fulero. Tienen un control preciso de qué contenidos alojaste, recavan información de tus usuarios (o sus usuarios para ser más estrictos) sin su expreso consentimiento y usan esta información para generar estadísticas que les permitan tomar decisiones más acertadas acerca de cómo consolidar mejor su poder corporativo. Poco les importa que en realidad hables en su contra, lo que ellos quieren de vos ya lo tienen hace rato. Game Over. Usan tu sed de libertad para engrosar monstruosas cuentas en Suiza y para perfeccionar los mecanismos publicitarios, y de dominación cultural.
Qué hacer entonces. La respuesta no es fácil. Pagar por el alojamiento, y registrar dominios es la más corta, pero seguís chupándosela a las corporaciones, eso sí, tus usuarios agradecidos. Empezar por aprender acerca de detalles técnicos que poco tienen que ver con el arte. Invertir mucho tiempo en el estudio, restando horas de sueño o trabajo. Estar dispuesto a gestionar (plin! caja) conexiones de fibra óptica profesional (aunque consigas cagarte en los sitios de alojamiento gratuito y en los pagos siempre vas a tener que bajarte los lienzos ante los tipos pesados de la red, los chicos de los cables), montarte tu propio servidor y tenerlo funcionando las 24 horas. Bah, vas a estar mucho más expuesto al hacking de las personas a las que no les simpatices, y quizás 24 horas de up time se transformen en 20, o en 12 (¿te contentarías con 3 días a la semana?).
Así que webmasters, diseñadores y desarrolladores del under de internet: ¡Uníos!... o seguid viviendo en la irrealidad de vuestros idealistas sueños
Bonus 1: ¿Y por casa cómo andamos? (la guerra ha comenzado)
Si vivís en Argentina habrás notado que en los últimos meses internet anda muy mal. No le eches la culpa al encargado del cybercafé al que vas, tampoco a la rubia que promociona tu conexión gratuita, ni a los servidores de los sitios que visites. El problema es mucho más simple e intestino.
La Cámara Argentina de Bases de Datos (CABASE) es una asociación sin fines de lucro (ni te lo creas tanto), fundada en 1989, cuyo fin es brindar un marco de encuentro y acuerdo entre todos los proveedores de servicios de internet, y carriers (los chicos de los cables), y un punto único de interconexión física entre todos ellos en una instalación denominada National Access Point (NAP).
Ese punto de interconexión en el NAP surge de un acuerdo firmado en 1998 por los 30 miembros más importantes de de CABASE, para mejorar la eficiencia de la conectividad general y especialmente nacional. Su fin es facilitar la conexión de contenidos alojados en diferentes redes desde cualquiera de ellas, estimulando la facilidad en el uso de internet.
El 86% del tráfico en la web lo poseen solo 4 de los 30 socios (Telefónica, Telecom, Impsat y Prima), denominados por la prensa el G4. Hacia mediados del año pasado los culos gordos del G4 decidieron restringir la capacidad de tráfico con el NAP, violando acuerdos preexistentes, amparándose en el hecho de considerar que internet ya está madura y no necesita fomentarse más su uso. De ahora en más pretenden que se les paguen adicionales por acceder a sus redes desde proveedores externos, una sucia maniobra extorsiva. Así que si no te conectás usando alguno de los servicios del G4, pero lo que querés acceder está alojado en alguna de sus redes, o si usás conexión del G4, pero deseás acceder a un contenido foráneo, entonces vas muy mal, porque te podés quedar esperando horas antes de que esa página cargue.
¿Y por qué esto no ha salido en los diarios? Simplemente los medios de comunicación, o pertenecen a los mismos holdings que los miembros del G4, o tienen relaciones carnales con ellos. ¿Te imaginas qué puede pasar si un medio de comunicación se queda sin teléfono?
Ya ves qué poco tiene que ver la práctica del hipertexto con su idealista teoría. Hora de afilar los colmillos
Bonus 2: El estilo sobre la sustancia, o como dijo un cyberpunk, la actitud lo es todo.
Bueno, nada mejor que empezar a practicar el under antes que a paladearlo en teoría. La gente de letrasnegras.com ofrece libertad y aceptación editorial... ¿a cambio de nada?
Veamos, hasta donde sé alojan su página junto con otras de la misma "red" en un plan reseller de estados unidos, pagan más caro el hosting, pagan el registro del dominio, así que bajo su aspecto rebelde acatan sumisamente las normas del establishment vigente. Editan los libros electrónicos de los desinteresados (casi todos) autores con un software llamado Activ E Book Compiler (que espero que hayan crackeado antes que comprarlo). Te dejan bajar gratis una copia en formato de html encriptado, compilado y ejecutable.
Pero resulta que como cereza amarga en la torta te encontrás con que solo podés abrirlo una cantidad limitada de veces o de días, al cabo de las cuales, para desbloquear el e book, debés ingresar una contraseña que ellos te brindan. Hasta hace unos días pedían a cambio de la contraseña 5 dólares o una lista de 50 correos electrónicos para practicar su intento de spam.
Ahora aparentemente el proceso es un poco más transparente, al menos no te corren con la guita de las editoriales que critican, ni te piden correos para spam, será porque no le habían dicho nada a los autores de su pequeña maniobra. Eso sí, junto con algunos de los e books te instalan una pequeño archivo oculto en el que recavan información sobre tu máquina y agregan algunos comandos al shell. Eso no se hace. O si se hace me suena a mojada de oreja. Pero qué cabe esperar de aquel "contracultural" que usa PayPal para fajarte 60 dólares por un libro del "under". Fuck off.
Es poco coherente promover la libertad de comunicación y restringirla con contraseñas y spywares. Habla de un doble discurso muy común en la contracultura, y del uso de los mismos mecanismos que se intenta combatir (como dijo Tolkien, no existe ni bien ni mal, solamente deseo de crear o deseo de poder). Es hora de terminar con las revoluciones y empezar con las evoluciones, así que sólo por molestar, sólo para que realmente crees tu propia cultura, y de paso patees algunos culos gordos y pagados de sí mismos te voy a enseñar a crackear estos e books. El ejemplo lo hago usando como sistema operativo WinXP, si tenés otro diferente ponete en contacto conmigo y hablamos. Manos a la obra que es más fácil que comer pan.
Tenés que ir al explorador de Windows (o el programa que uses para ver y administrar tus archivos). Las opciones deben estar seteadas para poder ver archivos ocultos o de sistema (eso se hace yendo, en el explorador de Windows, al menú "Herramientas" > "Opciones de carpeta", y una vez allí te vas a la solapa "Ver", y en el apartado "Archivos y Carpetas Ocultos" marcás "mostrar todos las carpetas y archivos ocultos").
Abrís el e book y lo dejás abierto, pero minimizado en la barra de tareas.
Te vas al disco rígido en el que tengás instalado el sistema operativo (generalmente el C:), y allí a la carpeta "Documents and Settings", allí a la carpeta que se llame como el nombre de inicio de sesión en Windows, allí la carpeta "Configuración Local", luego la carpeta "Temp", allí a una carpeta rotulada simplemente "e", dentro de esa carpeta habrá otra con un nombre largo compuesto por muchos números y algunas letras (como por ejemplo 18695-040220-095627-56.a2k). La ruta a esa carpeta podría quedarte algo así como "C:Documents and SettingsUsuarioConfiguración localTempe18695-040220-095627-56.a2k".
Dentro de la misma vas a encontrar los archivos que componen el libro electrónico. Solo tenés que abrir un archivo de texto sin formato llamado "pass.txt", y allí tenés toda la lista de contraseñas para desbloquear el libro electrónico, separadas por retornos de carro.
Te vas al menú del e book y hacés click en el ícono de la llave, y allí te dice qué número de contraseña tenés que usar, cerrás el cuadro de entrada, volvés a la lista de contraseñas, copiás (selección + ctrl+c) el password que corresponda, volvés al e book, hacés click en el ícono de la llave nuevamente, pegás la contraseña (ctrl+v), y apretás Enter.
Listo, ya crackeaste un libro electrónico de letrasnegras.com. Esto es ilegal. Ahora si sos un poco obsecuente, quizás debás seguir los mecanismos previstos por esta editorial taaan "under", y taaan "contracultural".
"Hack the world", "Shock the mainframe" y "Jungle Boogie, nena".
Fuente: www.cristalab.com
Fundamentos del diseño grafico
Muchos ven el diseño, como la rama que se dedica a hacer que las cosas se vean bonitas, si bien esto es parte del diseño no abarca en su totalidad la función del diseño como tal.
Si miramos a nuestro alrededor por un momento, veremos que el diseño de los inmuebles no solamente está para adornar, por ejemplo un escritorio. Un escritorio bien diseñado no solo ofrece una apariencia externa agradable, sino que debe de cumplir con ciertas funciones como: ser duradero, contar con el espacio superior necesario para colocar otros objetos, si es posible que tenga cajones para guardar otras cosas etc.
Definición de diseño según wikipedia: "El Diseño también es una actividad técnica y creativa encaminada a idear un proyecto útil, funcional y estético…"
Entonces realmente el diseño no solo cumple con la función de embellecer un lugar, sino que esta concebido a partir de un proceso de de creación con el objetivo de cumplir con una función en especial (o varias). Esto es lo que diferencia al diseño de las artes, ya que el segundo es la realización de las visiones personales y extra-sensoriales de un artista, en cambio el diseño cumple con una función práctica.
Elementos del diseño
Un diseñador (sin importar su rama) puede realizar diseños sin conocimiento alguno sobre la materia, ya sea por gusto personal o por su sensibilidad a la creación visual (talento) sin embargo conocer de estos principios le hará ser un mejor diseñador.
En general se distinguen 4 grupos de elementos
- Elementos Conceptuales
- Elementos Visuales
- Elementos de Relación
- Elementos Prácticos
A. Elementos Conceptuales
Los elementos conceptuales son aquellos que estan presentes en el diseño, pero que no son visibles a la vista. Se dividen en 4 elementos
Punto: Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.
Linea: Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y una dirección.
Plano: Un plano tiene largo y ancho, tiene posición y direccion y además esta limitado por lineas.
Volumen: El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el espacio, esta limitado por planos y obviamente en un diseño bi-demensional el volumen es ilusiorio.
B. Elementos Visuales
Por ejemplo cuando se dibuja una figura en el papel, esa figura esta formada por lineas visibles, las cuales no solo tienen un largo, sino que un ancho, un color y claro una textura (definida por los materiales utilizados).
Asi pues como ya han de suponer, los elementos visuales son:
Forma: Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto.
Medida: Todas las formas tienen un tamaño.
Color: El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blanco, negros, grises) y las variaciones tonales y cromáticas.
Ampliación sobre el color según Wikipedia: El color es un fenómeno físico de la luz, relacionado con las diferentes longitudes de onda en la zona visible del espectro electromagnético, que perciben las personas y algunos animales a través de los órganos de la visión, como una sensación que nos permite diferenciar los objetos del espacio con mayor precisión.
Textura: Tiene que ver con el tipo de superficie resultante de la utilización del material. Puede atraer tanto al sentido del tacto como al visual.
C. Elementos de Relación
Se refiere a la ubicación y a la interrelación de las formas en un diseño
Dirección: La dirección de una forma depende de como esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas.
Posición: La posición de una forma depende del elemento o estructura que la contenga.
Espacio: Todas las formas por mas pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundidad)
Gravedad: El efecto de gravedad no solamente es visual, sino que también psicológica. Podemos atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas.
D. Elementos Prácticos
Los elementos prácticos van mas allá del diseño en si y como es de esperar son conceptos abstractos.
Representación: Se refiere a la forma de realizar el diseño: puede ser una representación realista, estilizada o semi-abstracta.
Significado: Todo diseño conlleva conciente o subconscientemente un significado o mensaje.
Función: Para lo que esta creado dicho diseño.
Si bien la información recopilada y analizada en este articulo trata sobre el diseño en general, puede ser aplicada muy fácilmente al diseño web o al diseño grafico. Si bien es cierto cada rama tiene sus diferencias parten de una misma base para todos, al fin y al cabo la función de un diseño es crear un elemento tanto estéticamente adecuado como al mismo tiempo funcional y práctico.
Y recuerden: "El diseño no se trata de hacer cosas bonitas, sino inteligentes"
Fuente: www.cristalab.com
Fundamentos básicos del diseño web
Son las tantas de la madrugada, sigues sentado en calzoncillos delante de tu ordenador viendo páginas web, decides meterte un rato en http://www.worstoftheweb.com, y ver qué atrocidades se han cometido este mes... el resultado es más horrible del que esperabas (p. ej. http://www.porkjerky.com/ esta web parece mentira pero esta hecha en el 2004). ¿Realmente cuesta tanto hacer algo bueno visualmente?
Generalmente la gente piensa que por tener buen gusto vistiendo o decorando su impoluta casa, puede diseñar con soltura. ¡Pues no! El arte del diseño gráfico/web precisa de años de estudio y práctica, es imprescindible el dominio de la tipografía, las simetrías, espaciados, y un sinfín de cosas que la gente ignora conscientemente, pero que agradecen visualmente como no se imaginan.
Lo cierto, es que la mayoría interpreta que el diseño es hacer que nuestras páginas sean visualmente bonitas, pero con eso no basta, nosotros como diseñadores debemos transmitir una idea y un sentimiento al navegante, y que todo esto se produzca de una manera clara y concisa. Para transmitir estos sentimientos deberemos usar correctamente las técnicas siguientes:
- Tipografía
- Teoría del color
- Espaciado y composición
TIPOGRAFÍA
Empezaremos hablando básicamente sobre la tipografía en internet, la cual tiene sus propias reglas, aunque como en el diseño gráfico la regla principal es que todo sea legible, es algo así como la regla de oro de las tipografías (si no se puede leer no mola).
A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y cuerpos de texto o mensajes.
Para los primeros necesitaremos letras generalmente gruesas y detalladas. Es muy recomendable que las tipografías escogidas para los títulos concuerden perfectamente con el diseño de la página y también tendremos que tratar su color con mucho cuidado, ya que el color en los títulos expresa mucho, pero esto lo veremos más adelante
También debido a la tecnología Flash principalmente (si es que somos raritos) surgieron las Pixel Fonts, unas tipografías especialmente diseñadas para que éstas se viesen bien a un determinado punto, ya que "caían" justo en el píxel del monitor. Éstas fuentes han tenido mucho éxito y son muy recomendables usarlas en Flash, ya que hacen los textos muy legibles y no se ven borrosas las letras.
TEORÍA DEL COLOR
Aunque parezca mentira, los colores de los objetos nos transmiten emociones muy fuertes, pese a que, generalmente no nos demos cuenta de ello. Los hospitales carecen de color rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota orden y pulcritud (en las BOFH Room predomina el color verde placa base).
¿Acaso os imagináis trabajando en unas oficinas de color rojo? Sería demasiado estresante, pues es un color de un fuerte impacto visual y que tiene mucha fuerza y energía. Esto son claros ejemplos de como en la actualidad estamos usando los colores para nuestro beneficio, para trabajar mejor, para estar más tranquilos, etc.
Algunas de las cosas más importantes que debemos saber del color son:
- El color y su expansión
- Armonía y contraste
- Significado del color
El color y su expansión
Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web que hay en internet tienen un fondo claro y no negro. De hecho, las páginas que tienen un fondo negro suelen quedar peor. Esto se debe al carácter expansivo de los colores, no se verá igual un texto sobre fondo negro que blanco:
En estos dos dibujos parece que el de la izquierda tienda a expandirse y a hacerse más grande, todo lo contrario que en el de la derecha. Eso es debido a que el color oscuro comprime la figura del medio. Estas técnicas las usaremos cuando queramos que una parte de nuestra web quede cerrada o abierta.
Armonía y contraste
Armonía: Crear una gama de colores para nuestra web que este compuesta por colores de la misma gama o tono. Por ejemplo, CLab es una web con colores armónicos, ya que usa el mismo color y diferentes tonalidades del mismo.
Es obvio que en esta imagen cada casilla nos está expresando una idea diferente.
Significado del color
Esta es una de las cosas que más me apasionan del color, su significado. ¿Pero cómo un color puede significar algo? Pues sí, aunque estos significados varían un poco según las culturas, ya que por tradición es posible que el amarillo signifique mala suerte en algunas partes y en otros no. Ésta es una recopilación de diferentes significados extraídos de algunas páginas web.
Blanco .
Se halla en el extremo de la gama de los grises.. Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente. El blanco es el fondo universal de la comunicación gráfica.
Negro .
Al igual que el blanco, también se encuentra en el extremo de la gama de grises. Es el símbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.
Gris .
Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía.
Los colores metálicos tienen una imagen lustrosa, adoptando las cualidades de los metales que representan. Dan impresión de frialdad metálica, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.
Amarillo
Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos. No es recomendable usarlo como color principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.
Naranja
Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética.
Rojo .
Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y agresivo. El rojo es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo.
Azul .
Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito.
Violeta .
Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión. En sus tonos más claros se vuelve un poco triste, en los más oscuros representa grandeza.
Verde .
Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.
Marrón .
Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.
ESPACIADO Y COMPOSICIÓN
Llegados a este punto yo suelo recomendar que visiten muchos websites de calidad, y se fijen cómo han montado la web, porqué han utilizado ese color ahí y no otro, cómo han espaciado sus textos, etc... pero aún así hay algunas cosas que suelen ser básicas y veremos aquí.
Deja que tu texto 'respire'
No se si es un término correcto decir que el texto 'respire', pero es la expresión que utilizo cuando quiero que mi web sea legible. En estas dos imágenes de aquí abajo podemos ver como una tiene el texto muy pegado a la imagen y su interlíneado es muy bajo para el tamaño de letra escogido, haciendolo confuso para la lectura. La otra imagen en cambio, se lee perfectamente.
Este es un buen ejemplo de cómo hacer que nuestros textos no se vean compactados. También es importante saber que el espaciado entre líneas suele ser un 20% superior al tamaño de la letra, por ejemplo, para un tamaño de letra de 10 puntos pondremos 12 puntos de interlineado.
Colocando nuestros elementos
La posición de nuestros elementos en la pantalla es uno de los puntos más importantes a la hora de hacer nuestro diseño, pues no es lo mismo colocar una imagen arriba que abajo, con un texto al lado o sin el, que sea una imagen grande o pequeña y así infinidad de detalles que dotarán a nuestra página de personalidad.
Un buen ejemplo de cómo componer una web con imágenes y texto adecuadamente puede ser la página principal de Macromedia la cual usa eficientemente el espacio entre líneas, y posiciona las imágenes por tamaño y relevancia.
En esta captura podemos ver como Macromedia ha utilizado una gran imagen para mostrar un nuevo producto, y luego tiene pequeñas imagenes para embellecer y dotar de detalles las partes con más texto.
Es importante colocar pequeñas imágenes cerca del texto, las cuales tendrán dos funciones Primero que el usuario tenga una información visual sobre lo que va a leer, atrayendo la atención del visitante hacia donde queremos, y segundo, hacer más atractiva la página, pues, todo el mundo se hecha para atrás (normalmente cerrando la página y maldiciendo varias veces) cuando ve una web que es sólo texto.
Qué nos dejamos en el tintero
Bueno, pues realmente muchas cosas, pero qué esperabas?? Como ya dije antes el diseño gráfico es algo que tarda muchos años en aprenderse, pero con un poco de esfuerzo podrás realizar bonitas webs en un par de años sin tener ningún tipo de idea en lo referente al diseño. Verás como mientras vas practicando irás mejorando paulatinamente y el día menos pensado visitarás una antigua web tuya con el consiguiente susto y pensarás... ¿Pero cómo pude hacer algo taaan cutre?
Referencias:
http://www.newsartesvisuales.com
http://www.desenredate.com
http://www.weblogicnet.com/
Fuente: www.cristalab.com
Tutorial de accesibilidad web 2, tecnologías auxiliares
Los usuarios con minusvalías suelen confiar en equipos y aplicaciones informáticas para acceder al contenido web. Estas herramientas, conocidas como Tecnologías Auxiliares, son frecuentemente comentadas pero escasamente conocidas por los diseñadores responsables de generar contenidos aptos para resultar accesibles a usuarios con discapacidad. Este artículo analiza las características básicas de los dispositivos para personas con algún grado de impedimento visual.
Accesibilidad y discapacidades: Poniéndose en la piel del otro ...
Si bien es cierto que el tema de la Accesibilidad es motivo de creciente preocupación entre los redactores y diseñadores web, no es menos cierto que en general ignoramos todo o casi todo lo que se refiere al modo en que las personas con discapacidad acceden a nuestros contenidos. Solemos tener una serie de consignas y procedimientos que sabemos que se deben (o deberían) respetar pero en términos completamente teóricos, mientras que la experiencia real de acceder a nuestros contenidos mediante las llamadas Tecnologías Auxiliares nos resulta ajena.
Para intentar un acercamiento más comprometido a esas realidades (tal vez prefiera leer como introducción el artículo La Accesibilidad en la Web (parte 1): Generalidades) nos centraremos en aquellas tecnologías utilizadas por personas con algún grado de impedimento visual.
Discapacidad visual: El hardware
Los equipos utilizados por personas con impedimentos visuales son dispositivos compactos y portátiles que les permiten traducir el contenido originalmente concebido para mostrarse en un monitor a estímulos no visuales tales como el tacto y el oído.
Mediante la utilización de un software adecuado (ver más adelante en este mismo artículo) los contenidos en pantalla se reproducen en un display Braille y/o mediante una voz sintetizada en el idioma de preferencia del usuario. El rango de prestaciones de estos equipos no se restringe a la web sino que operan con la mayoría de las aplicaciones de escritorio, tales como procesadores de texto y planillas de cálculo.
A continuación el aspecto de los dispositivos más usuales de los dos fabricantes líderes del mercado:
Línea PAC-Mate de Freedom Scientific
- Modelo: PAC Mate QX420
- Dimensiones: 31.2 cm x 20.8 cm x 4.1 cm
- Peso: 1.7 Kg
- Software: Jaws
- Precio: U$ 3.795,00
Línea Braille-Sense de GW Micro
- Modelo: Braille Sense
- Dimensiones: 25.4 cm x 15.5 cm x 4.8 cm
- Peso: 1.2 Kg
- Software: Window-Eyes
- Precio: U$ 2.000,00
Estos ejemplos son parte de una amplísima gama de dispositivos, generalmente sofisticados y costosos.
Además de las prestaciones ya comentadas, ambos equipos reproducen un formato denominado DAISY (Digital Accessible Information System) especialmente desarrollado para libros sonoros. Una enorme variedad de estos libros puede descargarse gratuitamente, tanto en castellano como en inglés, del sitio Bookshare.
Discapacidad visual: El Software
Afortunadamente, el software que utilizan estos equipos para leer y traducir contenidos es más accesible, por lo menos en la forma de versiones de prueba.
Para este artículo utilizaremos el Jaws 7.10 de Freedom Scientific, que puede descargarse gratuitamente desde aquí. Esta versión puede utilizarse normalmente durante 40 minutos, transcurridos los cuales el programa se desconecta. Si se reinicia la máquina se dispone nuevamente de 40 minutos y así todas las veces que se quiera.
Un pequeño aparte para aplaudir el sentido del humor del fabricante. Jaws (en castellano: tiburones) se llama así en alusión a la casi nula vista de estos escualos. Solo la gente inteligente es capaz de reirse de sí misma.
La primera indicación de que estamos entrando en un mundo nuevo la brinda el instalador mismo de Jaws, que verbaliza con una voz algo metálica todos los mensajes de avance de la instalación que aparecen en pantalla.
Una vez completado el proceso podemos seleccionar el idioma en que preferimos que nos hable: inglés (americano y británico), español (de Castilla o latinoamericano), francés (de Francia o canadiense), alemán, italiano, portugués o finés.
Hecho esto podemos empezar a probar el programa pero, por encima de eso, podemos acercarnos vívidamente a la experiencia cotidiana de los usuarios con discapacidad visual.
La experiencia de uso de Jaws 7.10 de Freedon Scientific
Las pruebas realizadas funcionaron muy bien en el Internet Explorer, no así en el Mozilla Firefox y en el Opera.
Aunque no fue testeado, GW Micro asegura que Window-Eyes funciona perfectamente en IE y en Firefox.
Si bien nada reemplaza la experiencia personal, que recomiendo enfáticamente realizar, he agregado a continuación un fragmento sonoro obtenido mediante el Jaws leyendo los primeros párrafos de éste artículo.
Por una cuestión de practicidad facilitamos el archivo de audio en formato mp3.
- Audio correspondiente a un fragmento de éste artículo: escuchar (duración: 2 minutos)
Podríamos poner aquí una lista de sitios francamente inaccesibles que transforman la experiencia de navegar con este tipo de dispositivos especiales en una pesadilla, pero no es la intención de éste artículo.
Esperamos simplemente incentivar a cada uno a vivir su propia experiencia y luego llevar al ejercicio cotidiano los resultados.
Fuente: www.cristalab.com
Tutorial de accesibilidad web 1, fundamentos
La Accesibilidad, definida como la facilidad con que las personas con algún grado de discapacidad pueden acceder a los contenidos de un sitio web, es un tema que los diseñadores y programadores para web deben tomar en cuenta en sus proyectos. Esto será posible únicamente a partir del reconocimiento del derecho de acceder a contenidos de las personas con capacidades especiales y del conocimiento de sus limitaciones y particulares modos de acceso a Internet.
¿Qué es Accesibilidad?
A menudo (aunque no tanto como querríamos) descubrimos que la infraestructura de las grandes ciudades cambia en el sentido de favorecer el acceso y la movilidad de personas con algún grado de discapacidad física. Rampas allí donde solo había escaleras, puertas más amplias y sanitarios especialmente adaptados son solo algunos ejemplos de esta nueva forma de integrar a nuestros semejantes.
Este sano fenómeno se expresa también en la Web donde los diseñadores comienzan a tomar en cuenta en sus proyectos los aspectos que harán sus contenidos accesibles a personas con minusvalías.
Surge así el concepto de Accesibilidad, definida en términos generales como la facilidad con que las personas con minusvalías pueden interactuar con los sitios Web.
Un sitio accesible es aquel en que los elementos de diseño como el color, el tamaño de las fuentes y la disposición de los elementos no dificultan la comprensión del contenido del sitio.
Definición de minusvalías
Las minusvalías pueden dividirse en las siguientes categorías:
* Deficiencias visuales
* Deficiencias auditivas
* Deficiencias motoras
* Deficiencias cognitivas
Cada una de estas categorías incluye un conjunto propio de estados. Por ejemplo, dentro de las deficiencias visuales se engloba problemas de visión baja, daltonismo y ceguera. Las herramientas y técnicas desarrolladas para abordar aspectos relacionados con invidentes son muy diferentes a las destinadas a resolver problemas de daltonismo.
Quizás la categoría más diversa es la de las deficiencias cognitivas. En este grupo de incluyen las personas con desordenes epilépticos, así como personas con minusvalías asociadas con problemas de aprendizaje y desarrollo.
Este tipo de usuarios suelen confiar en equipos y aplicaciones especiales para acceder al contenido Web.
Estas herramientas, conocidas como tecnologías auxiliares, incluyen desde lectores de pantalla hasta pantallas táctiles y punteros de cabeza. El análisis de algunos de estos dispositivos, tanto el hardware como el software asociado, son motivo central del artículo de tecnologías y dispositivos de accesibilidad.
Un aspecto crucial de su funcionamiento es el de operar sobre contenidos aptos para ser leídos y procesados de manera no convencional. Es responsabilidad de los diseñadores que esto resulte posible.
Otras limitaciones: minusvalías temporales y la edad
A estas categorías deben agregarse las minusvalías temporales. Imaginemos una persona con una fractura de muñeca que le impide manejar correctamente el mouse y está obligado a utilizar la Web para su trabajo diario.
Asimismo resulta importante tener presente que a medida que envejecemos crecen las posibilidades de vernos afectados por algún tipo de minusvalía. De hecho, casi el 75% de la población de más de 80 años sufre algún tipo de deterioro en sus capacidades.
Por lo tanto, la accesibilidad no es una cuestión de abrir las puertas a esta gente sino de mantenerlas abiertas.
La accesibilidad brinda un nivel de independencia que la edad podría convertir el algo difícil.
Adicionalmente, los sitios accesibles posibilitarán a los usuarios de capacidades plenas el completo acceso a los contenidos independientemente de la aplicación de usuario que utilice (navegador estándar, navegador de voz, navegador de texto, teléfono móvil, etc.) y de las limitaciones del entorno en el que opere (entornos ruidosos o silenciosos, habitaciones infra o supra iluminadas, entorno de manos libres, etc.).
Iniciativa de Accesibilidad Web (Web Accessibility Initiative WAI): un camino
La Iniciativa de Accesibilidad Web del World Wide Web Consortium representa un camino definitivo a la hora de encarar el desafío de la accesibilidad.
En ese sentido ha emitido una recomendación denominada Pautas de Accesibilidad del Contenido en la Web donde se explica cómo hacer accesibles los contenidos de la Web a personas con discapacidad.
El documento contiene un apéndice que estructura todos los puntos que deberían tenerse en cuenta a la hora de desarrollar un sitio para Web organizados como puntos de verificación por tema y prioridad, comprendiendo imágenes, multimedia, tablas, marcos, formularios y scripts.
Cada una de las 14 directrices de las Pautas de Accesibilidad tiene asociado un nivel de prioridad:
* La Prioridad 1 engloba las acciones que los diseñadores "deben" adoptar para que un sitio sea accesible.
* La Prioridad 2 incluye las acciones que los diseñadores "deberían" adoptar para que un sitio sea accesible.
* La Prioridad 3 representa las acciones que los diseñadores "pueden" adoptar para mejorar la accesibilidad de un sitio.
Los puntos de la Prioridad 1 establecen la base de los estándares de accesibilidad de prácticamente todos los países donde se ha adoptado una política formal de accesibilidad.
Fuente: www.cristalab.com
¿Qué es Accesibilidad?
A menudo (aunque no tanto como querríamos) descubrimos que la infraestructura de las grandes ciudades cambia en el sentido de favorecer el acceso y la movilidad de personas con algún grado de discapacidad física. Rampas allí donde solo había escaleras, puertas más amplias y sanitarios especialmente adaptados son solo algunos ejemplos de esta nueva forma de integrar a nuestros semejantes.
Este sano fenómeno se expresa también en la Web donde los diseñadores comienzan a tomar en cuenta en sus proyectos los aspectos que harán sus contenidos accesibles a personas con minusvalías.
Surge así el concepto de Accesibilidad, definida en términos generales como la facilidad con que las personas con minusvalías pueden interactuar con los sitios Web.
Un sitio accesible es aquel en que los elementos de diseño como el color, el tamaño de las fuentes y la disposición de los elementos no dificultan la comprensión del contenido del sitio.
Definición de minusvalías
Las minusvalías pueden dividirse en las siguientes categorías:
* Deficiencias visuales
* Deficiencias auditivas
* Deficiencias motoras
* Deficiencias cognitivas
Cada una de estas categorías incluye un conjunto propio de estados. Por ejemplo, dentro de las deficiencias visuales se engloba problemas de visión baja, daltonismo y ceguera. Las herramientas y técnicas desarrolladas para abordar aspectos relacionados con invidentes son muy diferentes a las destinadas a resolver problemas de daltonismo.
Quizás la categoría más diversa es la de las deficiencias cognitivas. En este grupo de incluyen las personas con desordenes epilépticos, así como personas con minusvalías asociadas con problemas de aprendizaje y desarrollo.
Este tipo de usuarios suelen confiar en equipos y aplicaciones especiales para acceder al contenido Web.
Estas herramientas, conocidas como tecnologías auxiliares, incluyen desde lectores de pantalla hasta pantallas táctiles y punteros de cabeza. El análisis de algunos de estos dispositivos, tanto el hardware como el software asociado, son motivo central del artículo de tecnologías y dispositivos de accesibilidad.
Un aspecto crucial de su funcionamiento es el de operar sobre contenidos aptos para ser leídos y procesados de manera no convencional. Es responsabilidad de los diseñadores que esto resulte posible.
Otras limitaciones: minusvalías temporales y la edad
A estas categorías deben agregarse las minusvalías temporales. Imaginemos una persona con una fractura de muñeca que le impide manejar correctamente el mouse y está obligado a utilizar la Web para su trabajo diario.
Asimismo resulta importante tener presente que a medida que envejecemos crecen las posibilidades de vernos afectados por algún tipo de minusvalía. De hecho, casi el 75% de la población de más de 80 años sufre algún tipo de deterioro en sus capacidades.
Por lo tanto, la accesibilidad no es una cuestión de abrir las puertas a esta gente sino de mantenerlas abiertas.
La accesibilidad brinda un nivel de independencia que la edad podría convertir el algo difícil.
Adicionalmente, los sitios accesibles posibilitarán a los usuarios de capacidades plenas el completo acceso a los contenidos independientemente de la aplicación de usuario que utilice (navegador estándar, navegador de voz, navegador de texto, teléfono móvil, etc.) y de las limitaciones del entorno en el que opere (entornos ruidosos o silenciosos, habitaciones infra o supra iluminadas, entorno de manos libres, etc.).
Iniciativa de Accesibilidad Web (Web Accessibility Initiative WAI): un camino
La Iniciativa de Accesibilidad Web del World Wide Web Consortium representa un camino definitivo a la hora de encarar el desafío de la accesibilidad.
En ese sentido ha emitido una recomendación denominada Pautas de Accesibilidad del Contenido en la Web donde se explica cómo hacer accesibles los contenidos de la Web a personas con discapacidad.
El documento contiene un apéndice que estructura todos los puntos que deberían tenerse en cuenta a la hora de desarrollar un sitio para Web organizados como puntos de verificación por tema y prioridad, comprendiendo imágenes, multimedia, tablas, marcos, formularios y scripts.
Cada una de las 14 directrices de las Pautas de Accesibilidad tiene asociado un nivel de prioridad:
* La Prioridad 1 engloba las acciones que los diseñadores "deben" adoptar para que un sitio sea accesible.
* La Prioridad 2 incluye las acciones que los diseñadores "deberían" adoptar para que un sitio sea accesible.
* La Prioridad 3 representa las acciones que los diseñadores "pueden" adoptar para mejorar la accesibilidad de un sitio.
Los puntos de la Prioridad 1 establecen la base de los estándares de accesibilidad de prácticamente todos los países donde se ha adoptado una política formal de accesibilidad.
Fuente: www.cristalab.com
Guía de usabilidad básica para usuarios de Flash
A lo largo del tiempo he notado como en ambientes profesionales relacionados a Internet; los desarrolladores de Flash somos lapidados sin piedad cada vez que entramos en tema de discusión.
Vamos a especificar un caso puntual; la comunidad del software libre.
Si alguno de ustedes es asiduo a sitios como barrapunto o slashdot (Donde los comentarios obtienen puntaje de -1 a 5 siendo los de 5 los que mas aporten a la noticia) verán que cuando se publica una noticia donde el titulo incluya Flash o Macromedia aparecen de 1 a 10 mensajes con puntaje 5 mencionando las razones de porque Flash debe desaparecer de la faz de la tierra; si bien, muchos comentarios mencionan cosas falsas, algunos se basan en lo que se ve en la web comúnmente.
Con esto no digo que todos sean malos, casi siempre hay un (1) comentario bueno resaltando las capacidades que tiene Flash; pero muy pocas personas, sobre todo de un mundo donde Flash no existe aun como entorno de desarrollo (Linux, BSDs excepto OSX, etc) conocen lo que realmente puede hacer si es bien empleado y lo juzgan por lo que se ve. (para la muestra, un comentario altamente punteado con algunas mentiras obvias)
Flash como tal empezó como simplemente un software de animación vectorial con algunas acciones básicas y se ha convertido en lo que es ahora, un entorno multimedia de desarrollo de todo tipo de trabajos que requieran integración de medios interactivos de fácil distribución multiplataforma; desde animaciones para televisión hasta Rich Internet Applications para Intranets o aplicaciones web (uff, si me acordara de esto cada vez que voy a iniciar un curso de Flash) y es precisamente eso; sus inicios, lo que lo tienen marcado de nacimiento.
Dame click, dame click, a mi a mi a mi
La mayoría de power users de cualquier sistema operativo tiene bastante experiencia con la web; alguna vez navegó con Internet Explorer y odia los popups emergentes y la publicidad intrusiva en un banner de 640x480 que te meten en la mitad del contenido de una pagina para que, supuestamente, hagas click de manera mas efectiva.
En que estará hecho este banner... ¿Como puedes hacer una súper animación que incluya todo tipo de efectos raros, sonido, bitmaps y la foto de tu perro, en menos de 30Kb? Si dijiste Flash, has acertado.
El odio a Flash inicia desde los banners, la gente no los quiere (Y no los querrá y se acabo) así que si hacemos el silogismo
XXX odia los banners
En FLASH están hechos los banners
Por lo tanto XXX odia FLASH
No digo que sea malo hacer banners; digo que si es malo meter publicidad intrusiva y encima abusar de flash para ello
Neo: Ya se animar; Morpheus: Muéstrame
Si eres novato en Flash seguramente lo primero que aprenderás es animación, seguro que luego aprendes a publicar para la web y seguro que haces una megaINTRO para tu web con muchos bonitos colores y animaciones shape morph(Interpolación de forma) por montón; ahora claro, avanzas un poco mas, aprendes a hacer botones y mejoras la experiencia de tu usuario metiendo un botón Skip Intro
No lo hagas y de hecho, repite después de mi esta lista
- Un intro es malo
- Un intro es malo
- Un intro es malo
Si tienes una animación de intro en tu web, repetirás estas tres sabias frases todas las noches antes de dormir.
Hace poco hablamos de eso en el foro y a partir del estudio encontramos que son los defensores del arte los que sostienen la utilidad, belleza y funcionalidad de estas animaciones.
El diseño no es un arte como tal (Si quieres arte, DeviantART) y tomando frases de un compañero del foro, un diseño debe ser funcional, usable y practico, ahora, si encima es bonito, pues tanto mejor, un buen diseño.
Las intro no aportan nada, son aburridas después de la primera vez, casi siempre (casi) son pesadas y te dejan como tonto pensando que esperaste todo eso para ver los bonitos colores animados y al fin entrar a la web; no te engañes, una intro solo sirve para aumentar ego de diseñador (Ahm todos la van a ver, MWAHAHAHA), pero no para que tus usuarios se queden un poco mas
¿Y el espacio que sobra?, pero si no sobra nada!
Popups y fullscreen son palabras que el colectivo de power users relaciona con Flash Developer; si no, solamente miren cualquier pagina web de la película de turno y verán que, después de una intro de 1Mb, te abre un popup con la información de la película
¿Es tan difícil hacer un fondo presentable para una web en Flash?; ¿Es necesario arruinar la experiencia del usuario con un intrusivo popup que te quita las barras de navegación?, ¿Tan poco éxito quieres tener con tu web?
El usuario no pidió que le abrieran una nueva ventana (una mas de tantas), esto es incomodo, ¿Y si el quería seguir navegando en la ventana donde estaba? O peor aun ¿Si usa un navegador de verdad y esta usando pestañas? Acabas de arruinar por completo su experiencia (Y la imagen de tu web de paso)
No solo eso, sino que le quitas al usuario dos elementos claves, la barra de dirección y las herramientas de navegación. ¿Qué de malo tiene que se vea la URL?, ¿Qué de malo tiene poder usar el botón Atrás?
Pero también tenemos la práctica mas maligna de todas... fullscreen
Imagina que estas trabajando en tu PC y de repente tu pantalla queda en blanco absoluto, pasan 35 segundos de desesperación donde, si eres un usuario común, ya oprimiste reset y si no, esperaste mientras intentabas con desesperación dar click en las esquinas tratando de cerrar, minimizar o lo que fuera
Al fin carga algo, parece una web (Una cuya imagen tu mente no olvidara, ya sabes, resentimiento) y sin importar lo que tenga adentro buscas algo similar a Cerrar; al fin, has podido recuperar el control de tu PC, pero esta experiencia te ha marcado toda la vida y solo recuerdas en una esquina un logo que decía Hecho en Flash
Espero que los amantes del arte de la web nos comprendan, NO A LOS POPUPS, no a los Fullscreen
¿Y si animo el logo? ¿Y si animo las noticias? ¿Y si animo la botonera?
Que el logo tiene una animacioncilla divertida, esta bien, siempre y cuando no sea fastidiosa a la vista y en lo posible no sea animada todo el tiempo
Que las noticias van animadas en un scroll ... ¿Quieres que se lean o que el usuario haga ejercicios oculares?
¿Qué has animado hasta la foto de tu jefe pasando de un lado a otro de la web?; es cierto que Flash es poderoso en la animación; pero no tienes que abusar; una web es una web, hecho en Flash no implica que todo deba ser animado; piensa en lo que te fastidiaría si no conocieras el contenido y quisieras leerlo, piensa en tu usuario, no en ti.
En las manos de los Flashers del mundo esta quitarnos la mala fama que tenemos; en tus manos esta difundir la palabra, en nuestras manos esta educar al newbie en el camino de la fuerza y no dejarlo tomar el sendero del lado oscuro
La web debe ser agradable para todos.
Fuente : http://www.cristalab.com/tutoriales/90/guia-de-usabilidad-basica-para-usuarios-de-flash
Subscribe to:
Posts (Atom)