Cafe UD reloaded

Bueno… el master ha dicho que quiere betatesters, así que yo os invoco, oh, fuerzas de la internet grande y poderosa!

Me explico =) Hoy hemos entregado ya el proyecto, aquel Cafe UD del que os hablé. Lo tenemos colgado en uno de nuestros portátiles, así que si a alguien le sobra tiempo, que entre, enrede, suba fotos… Y comunique sus impresiones sobre Cafe UD =) Puede que en ciertos momentos no esté online, el portátil se apagará a ratos para descansar =) Y si hay suerte y las cosas salen bien, la página estará online de verdad a partir del curso que viene.

Un consejo, no entreis con IE. He usado unas cuantas maravillas del CSS que a IE no le da por soportar, y como hemos andado justos, no he podido solucionarlos, así que los dejo para más adelante. Seguramente sea mi tarea de la Euskal Party, qué diver ¬_¬ Como le decía a Andoni Eguíluz, nuestro director, es genial que te hablen en clase de las bondades del formato PNG y digas «oh, sí, que guay, vamos a usar PNGs con transparencias para sacarle todo el provecho a esta maravilla». Y te encuentras con que IE no soporta transparencias.

Así que mira por dónde estoy haciendo lo mismo que Microsoft, darme igual las reglas y preparar mi diseño para que funcione en el navegador que *yo* quiero. La única diferencia es que yo me siento culpable, y que lo arreglaré con el tiempo.

Y el viernes tenemos la defensa, y termino, por fin, este curso. Qué ganas de verano… seguro que no me pasa sólo a mí…

Muuaakksss!!

La Piedra Angular

FastCompany.com ¿Veis los pequeños iconitos juntos a los títulos? Si haceis un «Ver imagen» ¡¡Son transparentes y el color se aplica con CSS!!! Con esto conseguimos que la paleta de colores del sitio sea totalmente diferente cambiando tan sólo unas líneas del CSS. Y sólo esta es una de tantas maravillas que los grandes diseñadores son capaces de hacer (o tienen la ocurrencia de).

Me ha encantado leer al gran diseñador Dan Cerderholm porque empezó como yo, fijándose en millones de ejemplos y a base de prueba y error, no de una forma académica y guíada, y juro que eso me traía de cabeza: «Yo funciono así pero… ¿estaré haciéndolo mal?»

¡Me siento tan identificada! ¡Me apasiona el diseño! Siempre tengo la necesidad de crear, si no son fotos, son artículos para el blog, y si no, hago diseños en mi mente que muchas veces no plasmo en papel (o en digital), porque generalmente no son tan buenos, pero últimamente las ideas fluyen con más éxito. Si supiera crear música, pintura, escultura… también lo haría =). Pero lo maravilloso del diseño es que mezcla Arte y Tecnología, y esa mezcla es justo lo que creo que realmente me define.

El diseño que había hecho para el Cafe UD era una mierda, de verdad. Parecía más un blog amateur que una página web para cientos de personas. Y me he enfadado conmigo misma de verdad, porque no es eso lo que me han enseñado todas las páginas que he visto y todos los manuales que he leído. ¿Mediocre? Menos que eso. Por eso vuelvo a empezar, y al menos la paleta de colores sé que la tengo fija (si es de la uni tiene que ser azul).

Así que aquí me teneis, leyendo el capítulo de mi libro en el que habla del fantástico diseño dinámico a tres columnas. Y por lo que más quiero, que el diseño de Cafe UD va a ser para caerse de espaldas.

Estoy apunto de llorar =’)… nunca nada que no fuera sentimental me había apasionado tantísimo. Si no sabeis lo que es el creer haber encontrado la piedra angular de uno mismo, eso que nos llena, nos apasiona, nos reconforta y nos duele cuando no es como queremos… ojalá lo vivais algún día, y ojalá yo no esté viviendo un espejismo, ni vaya a ser una de tantas cosas que pruebo y postergo 😉

Por otro lado, estos días me he encontrado también haciendo las tareas de pixelera, que aunque también son parte de un diseñador que se precie, no me veía tan pronto en ello =) Bueno, no he hecho iconos, pero he hecho un par de logos, entre ellos un remix del logo original de la uni, que no sé qué os parecerá. Aishhh… hay tanto que aprender y tanto que mejorar:

«Suelo diseñar de forma visceral». Gran frase.

Amén, Dan.

Cafe UD

Arf! Estoy que no paro. No queda mucho para el final del cuatrimestre, y hay una asignatura (TIM: Tecnología Informática Multimedia) que aunque es la leche, el proyecto que nos hemos planteado también lo es, y así andamos.

Sabíamos que queríamos hacer una web, que es un medio que si realmente tiene utilidad, se convierte fácilmente en un proyecto real (¿Cortos? ¿Programas? ¿Guías multimedia? Pss… ¿quién usa eso? =P), pero claro… ¿Qué proyecto web se te ocurre que dé suficiente trabajo para 6 personas y no nos deje con un 5 raspado? Empezamos a pensar, y surgió la idea de una especie de centralizador de cuentas. Imaginadlo. Una página en la que loggearte y ver el estado reciente de tu flickr, del.icio.us, gmail, comentarios en tu blog, RSSs varios, en fin… una gozada. Pero por algún motivo la idea no convenció al grupo y se desechó.

Entonces alguien dijo «Estaría bien poder tener un chat en el que hablar por ejemplo con los de la Comercial, que estamos en la misma uni y no nos conocemos!!». Ayy… pillín… y con las de Turismo, ¿¿ehh?? xD

Así que ni cortos ni perezosos, nos hemos enfrascado en un movidón, un «portal» (por llamarlo de alguna manera) para la gente de la Universidad de Deusto (para algo somos los informáticos de la uni ¿no?), incluído paquete estándar con manuales y todo por si otras universidades del país quieren seguir el ejemplo. Claro, muchos igual no estais muy familiarizados, pero os propongo un reto. Buscad en la página de la UD, los horarios de clases de Ing. Téc. Informática de Gestión (mi carrera), por ejemplo. Sí, sí… reíros. Es IMPOSIBLE. Conozco a gente que usa Google para encontrar las cosas en la página. Lo siento mucho por los que han hecho la página, o por los que la han organizado así (sobre todo porque seguramente hasta los conozca), pero he de decir duramente que «USABILIDAD=0».

Y no es que lo diga yo, es que hemos hecho encuestas a muchos estudiantes de cara a nuestro proyecto y una de las preguntas era «¿Qué te parece la página de la UD?». Bueno, creo que si digo que el 100% ha respondido que una mierda, me creeis.

Así que, así surge la idea de una página en la que los estudiantes puedan distensarse, chatear, apuntar las fiestas, escribir posts, ver/subir chistes, animaciones, fotos, videos… Y… hacerse blogs y verlos en el propio planet de la web.

Mmm…. suena bien ¿verdad? Ahora sólo queda que lo terminemos y lo más importante (y ya fuera de la asignatura), que a la Universidad (o a algún simpático profesor con visión actual, que haberlos haylos) le parezca buena idea la página, y la universidad la albergue. Porque sinceramente, no me importa ocuparme de su mantenimiento, pero lo que no pienso hacer es albergarla yo. ¡Ja! ¿Con él éxito que puede tener eso? Ni un byte de mis discos ni un ciclo de CPU para esos obsesionados con ligar en el chat =P

Es broma… lo que ocurre es que somos muchos estudiantes, y son muchos accesos, y yo tengo 300 KB de canuto, creo que se entiende =)

El proyecto corre sobre LAMP (de ahí el manual =)), con WordPress, Coppermine (Galería Multimedia), phpBB (foros), b2evolution (blogs), webcalendar (calendario social), y Bribble (chat).

Como se puede observar muchas son libres, y que conste que no he metido ninguna presión, simplemente han salido elegidas esas =). Y yo, me encargo del diseño y a este paso me parece que de la integración en wordpress de las cosillas =) ¿Sabeis qué es lo más curioso de todo? Que me estoy dando cuenta de que me preparo más lo diseños que son para otra persona que los que son para mí. Bueno, es buena señal de cara a trabajar algún día (cuando surja la oportunidad ^_^). Y no tardaré mucho en presentar nuevo diseño para el blog (a ver si pasa la tormenta), que ya tengo muchas ideas, y ya os pediré opinión en la primera fase =)

Ahora bien, y volviendo al tema… hay una famosa tradición en esta asignatura, la entrega de los famosos Timmies! (premios a los mejores proyectos y de paso cena de fin de carrera) y esto lo sé porque vi hace mucho las fotos en la galería de Borja =D Y parece que se sigue haciendo -espero- =) Tengo ganas, está bien para compensar la vergüenza de que te graben mientras vendes tu proyecto ¬_¬

¿Había dicho ya que odio las cámaras de video…?

Diseñando sueños

Uno de los regalos de Iban, fueron dos libros. Jamás pensé que dos libros pudieran hacerme tanta ilusión y tener tanto significado simbólico.

«CSS. Hojas de estilo en cascada para el diseño web», por los programadores Schmitt, Trammell, Marcotte, Orchard y Dominey, de la colección Profesional de Anaya.
«Crea y presenta tu portafolio digital», por Cynthia L. Baron, de Anaya Multimedia.

¿Y por qué tanto revuelo? De todos es sabido que si por algo me tengo que decantar en la informática, es por el diseño. Pero hablando mal y pronto, no tengo ni p__ idea. Si, de acuerdo, mi gusto puede hacer que salgan cosas «más o menos» decentes, pero eso no es suficiente a nivel profesional, y ¿cuánto podría aumentar eso si tuviera una buena base conceptual?

Me encantaría trabajar de diseñadora, pero no soy una persona que lleve el arte en las venas, que haga tres trazos y tenga un dibujo… tengo más facilidad que otra gente, pero no he nacido artista. Así que me da miedo… sé lo exquisitos, lo únicos que suelen ser los diseñadores gráficos de las empresas. Pero también es cierto, como me decía Iban, que si yo misma me pongo muros, desde luego que será difícil que llegue a nada.

Así que, encontrarme con estos dos increíbles libros, elegidos expresamente para mí (porque de todos los enfoques que he visto en los libros de diseño, yo aún no había encontrado el que buscaba), es realmente emocionante. Lo de trabajar profesionalmente de diseñadora es algo que últimamente me andaba rondando la cabeza como una idea aún no madura, y que aún no había comentado con nadie. Así que, mi vida, gracias por demostrarme una vez más que me conoces, y que nos entendemos sin palabras, por hacerme sentir un poquito más cerca de mi sueño =)

Ahora sólo queda que yo ponga de mi parte, y esto pase de ser un hobbie de de vez en cuando, a algo serio en lo que invertir mi tiempo. Además, este año estoy haciendo tercero, y el año que viene tendré que hacer la otra mitad, así que, como me sobrará el tiempo, me encantaría entrar como monitora en el aula multimedia de la uni, aunque esto tampoco lo he comentado apenas aún =) Para ello, me toca lucirme en el proyecto de TIM que estamos haciendo ahora, y me va a venir muy bien el libro de CSS =)

En principio parece que todo se va encajando a la perfección… ojalá salga bien =’)

Besitos =)**

Para que luego digan que no nos preocupamos por los usuarios

El año pasado, como algunos sabeis, tuve una asignatura llamada «Interacción con los Computadores» (IC) en la que me lo pasé como una enana. No quiero decir que fuera divertida, si no que al contrario que a muchos de mis compañeros, era una temática que me resultaba hiper-interesante.

Después de tanto lenguaje binario, bases de datos, organización de ficheros, lenguajes de programación y demás conocimientos estrictamente sobre ordenadores, descubrí que había algo que conseguía que nuestro mundo y el de los ordenadores no fueran disjuntos, había un puente entre ambos, y esta materia era la protagonista.

IC básicamente trataba de Cómo crear, organizar, planear, colocar, *ar… nuestras aplicaciones para que fuera lo más agradable, cómodo y provechoso para el Usuario. Pero claro, cuando en las primeras clases nos pusimos a escuchar hablar acerca de las partes del ojo humano y los conos que habitan en él, más que desorientados estábamos flipados: ¿Esto es informática o medicina? decían algunos. Ayyy… pobres xD

Me caló muchísimo. Y aunque los usuarios son la mosca coj*nera de nuestro gremio, trabajamos por, para y gracias a ellos. Bueno, a su dinero. Así que cada vez que creo algo, pienso como si yo fuera el usuario. Pienso en que sea intuitivo (y no difícil de manejar), en que sea agradable a la vista, en que esté organizado, que se distingan las partes, en que me puede estar leyendo un ciego… Hay cosas que consigo y cosas que no… algunas por diseño, y otras porque no sé hacerlo. Pero aún así hay cosas tan subjetivas, que es difícil que todo el mundo esté contento. Como el color negro-gris marengo de la página. Sé que hay gente que lo prefiere a un color claro, y sé que hay gente que al revés, y sé que hablando desde el punto de vista de la Interacción… debería ser más claro que oscuro. Pero resulta que el cliente principal para mi blog soy yo =P y si yo no puedo mirar mi página -porque lo claro me molesta más-, o no me gusta el diseño, mal vamos =P

¿Y para qué os cuento todo esto? Sé que tengo muchos lectores bloggers, al menos entre los que comentan, la mayoría. Y quiero compartir pequeños truquitos que el año pasado aprendí e investigué para hacer más accesibles y usables nuestras páginas. Así que sin más dilación… me dispongo a enumerar ^_^ Dando ya por sabido que el HTML está deprecated y que es XHTML+CSS lo que hay que utilizar en su lugar, empezamos:

Ordenadores antiguos:

No está de más ser un poquito considerados y solidarios con aquellos que siguen con su vieja computadora =)

– Preparar nuestra página para una resolución de 800×600. Aunque parezca mentira, esta resolución aún es común, y tener que andar desplazándote de derecha a izquierda quita las ganas de leer la página. El ancho máximo de body+sidebar por tanto (generalmente), ha de ser de *menos de* 800 píxeles, y el resto el fondo de la web.

– Utilizar los colores web. Como sabeis, los colores en hexadecimal se componen de 6 cifras, por ejemplo #54d8a2. Pues se suelen considerar colores web a todos aquellos que por repetirse en pareja se pueden reducir en tres cifras: #aadd77 -> #ad7 #22dd22 -> #2d2. Y así sucesivamente. Aunque este detalle es menos esencial =)

Accesibilidad según la W3C:

La World Wide Web Consortium es la asociación que se encarga de escribir los estándares sobre todo para web, que ya le hace falta orden a este caos… Estos son algunos de los consejos de la W3C:

– Texto correcto y sin abreviaturas. Tú puedes entender «Anche stba n l bar». Pero apuesto a que un lector de páginas web para ciegos no puede.

– Identificadores de imagen. Es obligatorio incluir el atributo «alt» en las etiquetas de imágenes. Este atributo es el que describe la imagen, que es exactamente lo que lee también el citado traductor. Algo así como «Imagen: ‘Mi perro y yo’.» (alt=»mi perro y yo»)

– Los links. Prohibido el «aquí». Esto es algo que me trae de cabeza, porque todo el mundo hace. Si os fijais, yo nunca pongo «Y hay otra página interesante aquí«, si no «y aquí hay otra página sobre flores silvestres«. Porque el link debe ir acompañado de una descripción coherente, que además ayudará en los buscadores.

– Las listas no han de ser caóticas. Aunque esto es de cajón de madera de pino =)

– Las medidas han de ser relativas en la medida de lo posible. Incrementos de tamaño de fuente en el CSS son claro ejemplo. Es mejor poner {font-size:xx-small;} que incremente o decremente según el tamaño de fuente con el que llega el visitante, que no obligar a 12px -por ejemplo- que a lo mejor resulta ser mucho más pequeño que el tamaño normal del ordenador de esa abuelita que te visita.

Tipografía:

– En web siempre sans seriff. Hay dos tipos de estilo de fuente. Seriff (las que tienen remaches en las puntas, como la Times New Roman) y Sans Seriff (o Sin Seriff, como la Arial). Está demostrado que en pantalla las Seriff dificultan la lectura, aunque en papel nuestra vista lea más relajada gracias a poder ayudarse de esos remaches.

– El fondo NO debe ser, como dijo Borja en su siempre recordado artículo sobre tipografía, de color blanco nuclear. Pues podemos quedarnos ciegos si estamos mucho rato leyendo en él. Siempre es más descansado un marfil, beige o color hueso, o cualquier otro color pastel, que el blanco más puro. ¿Por qué si no iban los ajedrecistas profesionales a jugar con tablas de color chocolate-café en vez de blanco-negro?

– El uso de las mayúsculas. Hagamos una prueba:

TIPOGRAFÍA EN LA WORLD WIDE WEB

Tipografía en la World Wide Web

¿Qué habeis leído mejor? El segundo ¿verdad? El ojo humano lee las frases mirando casi sólo la mitad superior de las letras. Por eso, enfatizamos mucho más una línea convirtiendo las iniciales en mayúsculas (e incluso haciéndolas más grandes), pues nuestro ojo las nota más que un montón de letras en mayúscula, que por cierto cuesta leer.

El Usuario y la Web:

Basados en un trabajo llamado Eyetrack sobre movimientos oculares de los usuarios frente a un monitor, creado e investigado por el Instituto Poynter, se puede analizar el porqué de la situación en la que los elementos debieran situarse en la página web. Esto que veis aquí es la trayectoria, el barrido de la primera mirada a una página web.

¿No reconoceis fácilmente la estructura de una web? =) En la parte de arriba título y descripción, después la información importante como el cuerpo de la web, y por último lo menos importante en la parte de abajo y la zona derecha, que es donde solemos poner el footer con autores y estilos y la barra lateral con links y otras informaciones que el usuario ya buscará si necesita.

Epílogo:

Fallo en muchas cosas, pero intento que al menos no sea en las cruciales, y poder ayudar cuando me piden opinión sobre la accesibilidad, usabilidad, look & feel, etc de una aplicación. Me parece muy interesante analizar las aplicaciones desde este punto de vista tan subjetivo y poco usual. Pero a veces, ya sabeis qué pasa… «Consejos vendo…»

Espero que haya alguien a quien estos consejos le vengan bien =)

Technorati Tags: tipografía diseño web