Blog del Master en Diseño de Proyectos Web 2009. Elisava, Escola Superior de Disseny
Proyectos web 2009 » Archivo de 'May, 2009'

Para trabajar con ems Comments Off

Para el proyecto hemos hablado de trabajar los CSS con ems como medida para los font-sizes. En un principio, parece fácil y piensas que tu plantilla va a tener mejor calidad que si sólo lo haces con píxeles.

La cuestión es que trabajar con ems lleva un poco más de trabajo porque hay que acostumbrarse a pensar en ellos y porque hay que saber manejarlos en casos especiales.

Moraleja: estrujar el cerebro para entenderlo. Aquí va un post bastante sencillito sacado de un blog llamado clagnut. Al final del mismo, viene un calculador de ems que promete ser utilizado hasta la saciedad en las próximas semanas.

los usuarios, la información y la tecnología Comments Off

Últimamente he leido en un par de post reflexiones en torno al valor de la información en la Web. La información es lo que mueve la Web y velar por su calidad, tanto lo que se refiere a mala/buena información como a la forma de llegar a ella (acceso y uso), debe ser lo que mueva a los que trabajan en la Web.

El último post de Daniel Torres Buriel trata este tema con ocasión de su conferencia en FESABID 2009. Daniel aclara que debemos “dal valor a aquello que no es tecnología”. Los estándares web, la accesibilidad más allá del tipo de dispositivo y el desarrollo de herramientas y su evolución responden a la satisfacción de necesidades concretas pero son exactamente eso: medios y herramientas. Pero lo importante es la información que genera el usuario y que la Web gestiona. Por tanto, la Web (residencia de la información) debe acercarse a las personas mediante la accesibilidad y la usabilidad y a la información mediante la arquitectura de la información. Porque los usuarios toman la información que les dan y además buscan la que le interesa. En el enlace está el post pero aquí incluyo también la key note que deja él mismo.

Por otra parte, en el post de César Martin para Alzado.org titulado “Más aplicaciones, menos información” analiza la situación actual de la prensa online y sugiere diferentes caminos para que esta se adapte a Internet de forma completa. Señala cuatro modos de optimizar su exitencia online y deja fuera la de aumentar el número de noticias/periodistas (aumentar la cantidad de información) y recomienda otras que confluyen en generar aplicaciones que se adapten y satisfagan lo que necesitan sus usuarios o que fomenten la calidad de su uso para a su vez generar beneficios a ese medio.

Creo pues que ambos coinciden en saber bien qué tiene valor (la información) y qué debe servir a ella (la tecnología aplicada bajo criterios de accesibilidad y usabilidad).

Usabilidad: Apple VS Microsoft Comments Off

Hola chicos!
He encontrado un articulo en el blog WebdesignerDepot, que me parece que vale la pena leer:
“Apple vs. Microsoft - A Website Usability Study”
Besos!

Plantilla Mediaculum’09 Comments Off

Aquí está la revision de la nueva plantilla.

Corrección plantilla {entrega} Comments Off

Ya realizadas las ultimas modificaciones de Nacho , este es el resultado final… cambio y reubicacion de botones, señalizacion con pestañas, ajuste de textos, etc.

Imprimir

Imprimir

 

;)

Plantilla corregida Comments Off

Hola a todos!!
Aca les envío la propuesta de plantilla de Mediaculum corregida.
Puedes ver un menú secundario en la esquina superior derecha, para descargar el CV y enviar mail al usuario.
Espero que les guste. :)
PD: ViSçA BaRçA! :P

Plantillas nuevas y modificadas Comments Off

Aca muestro una propuesta nueva de plantilla y también la modificación de una de las plantillas que vimos en la última correccion con Nacho…

Vamos al Salón del Cómic??? Comments Off

Nos dejarán entrar? JaJa :)

Toda la info aquí

Plantillas del Jueves -EN CORRECCIÓN- Comments Off

Hola!
Aca están las plantillas presentadas el jueves en clase.
Ya me encuentro en proceso de corrección de formato y demás elementos que hablamos con Cristobal.
A pesar de quedar descartadas, publico las dos que tendrían que funcionar con flash.
Si alguien quiere comentarme algo más que valga la pena tener en cuenta, espero el comment!
Gracias chicos!

Sobre la evolución de los móviles… Comments Off

Seguramente aquí si encontraremos el primer móvil que tuvimos, pasando por el que perdimos y el que nos robaron, llegando finalmente hasta el actual.
Recuento de dispositivos móviles 1983 - 2009.

Tips para diseñar un buen sitio web Comments Off

Hola chicos!
Navegando por uno de los 1001 blogs de diseño me he encontrado con que los de Smashing Magazine hicieron una colección de soluciones prácticas para el momento de diseñar un sitio web.
Me ha parecido muy útil para nosotros.
Enjoy it! :)

Presentacion de las plantillas para Web2.0 (mediaculum) Comments Off

Aca les muestro mis plantillas web para la seccion de “usuario” que presente hoy en el master… basicamente, la primera propuesta es la correción de la que ya habia sido escogida anteriormente, y las que le siguen son un par de nuevas ideas de ultima hora :p

Ojala les gusten!

Propueta A(1)

Propuesta A(2)

Propuesta A(3)

…… …… …… …… …… …… …… …… …… …… …… ……

Propuesta B(1)

Propuesta B(2)

Propuesta B(3)

…… …… …… …… …… …… …… …… …… …… …… ……

Propuesta C.1

Propuesta C.2

;)

Nova Plantilla Mediaculum v.I Comments Off

De una neurona a una sociedad: veámoslo Comments Off

Aquí va una presentación bastante completa e interesante a mi parecer de Manuel Lima de VC Visual Complexity sobre Visualización de información.

Creo que transmite muy bien la importancia de la visualización de la información en lo que han sido los siglos pasados pero sobre todo lo que significa e implica para nuestro presente y nuestro futuro.

Hace tiempo empecé a leer “Cómo funciona la mente” de Steven Pinker. ¿Qué tiene que ver esto con la visualización de la información o incluso con la Web? En que los datos convertidos en información (es decir, que pasan de un lugar a otro, de una persona a otra) son lo que ha movido nuestra existencia hasta ser quienes somos. Y hoy la información nos hace las más grandes promesas que se han hecho nunca gracias a la World Wide Web (en sus redes, en sus ecosistemas, en su código). Entender que formamos parte de ese proceso (que somos ese proceso) nos dará la respuesta a qué tiene que venir después en este ámbito.

Y ese qué viene en parte dado a cómo vemos y aprendemos esa información. Espero que os apasione tanto como a mi.

TU-DUS!: Lista orientativa de tareas por hacer Comments Off

DISEÑO / MAQUETACIÓN:

- Contenidos footer: (12)

qué es
quiénes somos
cómo funciona
DONA (falta programar)
Listado de mediaculums? (falta programar)
contacto–> respuesta
Ayuda
Idioma?(falta programar)
Reportar abuso–> Respuesta (falta programar)
Política de privacidad
Términos y condiciones de uso
Error404

NUEVA MAQUETACIÓN (implementación css)

- Home login: (falta “contenido”)

respuesta: bienvenido a mediaculum
errores en campos
recuperación contraseña
respuesta
CAMBIO DE FOOTER–> toda la página
DEMO–> cambio último frame: invitación a crear cuenta
empieza automáticamente
integración en home

-Home admin

alertas
acceso 1ªvez
no has introducido algún dato

IMPORTAR:

EDITAR: mis contenidos/ mis proyectos/ categ y tags –> imag/ videos/ cat y tags
//—-DISEÑAR: (depende de diseño)——/// novo css!!

-METANAV:  (Implementación css).

MI PERFIL
MI CUENTA

- Content footer-admin:

Sobre mediaculum
Ayuda
Invitar

P.D.: Ánimo q PODEMOS!! ; P

Otra plantillita… Comments Off

Hello!
Por aquí les dejo la plantilla que ya les he presentado en clase para mediaculum/usuario y usuario/sobre mi.
Acepto toda clase de comentarios! :)

click aquí

Aprendiendo a hacer métricas Comments Off

La primera pregunta para hablar de métricas es ¿por qué hacer métricas? La respuesta es muy sencilla: porque es tremendamente importante saber si hablan de ti, qué dicen, si se debe actuar o si se ha de mejorar.El entorno ahora es más importante que tu círculo más próximo y es el que no se puede perder de vista.

En las últimas clases de web 2.0 hemos aprendido a hacer métricas y cómo valorarlas. Para ello, hemos visto las siguientes herramientas:

Wikipedia: En una herramienta colaborativa como esta es importante checkear si tenemos una definición creada y quién la ha creado, que otras fuentes incluye, etc.

Google: Los resultados de búsqueda que muestra el buscador será lo que encuentre cualquier navegante.

Google Blog Search: Un buscador especializado en blogs, por lo que podemos ver la presencia de cualquier tema en post recientes.

Google Trends: Presencia en Internet de un tema, interés en búsquedas de los usuarios y cantidad de noticias generadas.

Google Insights: Parecido al anterior, con más información y desglose de datos.

Delicious: Conocer cuanta gente nos tiene en su Delicious aporta mucha información y por qué etiquetas nos conocen.

Youtube: Youtube es la enciclopedia de los adolescentes. Si no estás en Youtube, no estás para ellos.

Facebook: El fenómeno de Facebook no se puede dejar de lado. Tener o no tu grupo de fans o de detractores es significativo y realizar acciones con ellos importante.

Twitter: Twitter aporta información de primera actualidad y es la voz de los usuarios.

Flickr: Cómo eres retratado en imágenes por las personas, qué guardan de ti o cómo te ven.

Google Page Rank: Tu orden de aparición en el buscador.

Alexa: Análisis de webs con su número de visitas, perfil de usuarios, secciones más visitadas, etc.

Otras nuevas que he descubierto en el blog de Javier Godoy y todas basadas en Twitter son:

search.twitter.com: donde buscar lo último que se está diciendo sobre cualquier tema.

twist: permite ver tendencias en el tiempo.

twitalyzer: realiza un análisis de tu actividad en Twitter. Me parece una buena herramienta sólo exclusiva para tu mundo twitteriano pero muy potente para gestionar tus comunicaciones y tu presencia en esa aplicación. (en clase hablamos de twitteranalyzer).

Lexicon: Ya hablamos anteriormente de esta aplicación deFacebook para trackear las tendencias de palabras usadas por los usuarios en su estado.

Que tal masters Comments Off

Como estan… Aquí les dejo unos links, para que puedan ver y descargar unos videotutoriales de actionscript 3, que encontré en castellano. Además un link que me mandaron de un compañero de trabajo en chile, sobre el curso de actionscrip3 que hizo. Este link tiene los archivos fla, con los ejercicios que el desarrollo durante el curso. Son 13 archivos, y solo hay que presionar sobre los numeros para descargarlos.
Suerte a Todos.
Videotutorial curso actionscript 3
video swfaddress
archivos actionscript compañero de trabajo

Repaso de los copys de Mediaculum Comments Off

Aquí van los wireframes con correcciones de los copys de admin.

Esta corrección no incluye los copys del apartado de “diseñar” ni de los apartados de “Sobre Mediaculum” debido a cuestiones de tiempo y a dudas sobre el contenido real y definitivo de esos apartados.

Para el repaso he intentado mantener en todas las páginas un mismo estilo siguiendo algunas “normas de estilo” que me surgían al unificar todos los textos:

- De tú a tú: que la comunicación sea siempre entre un “nosotros” y un “tú”. Es decir, tener un tono amable y distendido pero siempre desde una óptica de colaboración para trabajar juntos. Estamos trabajando juntos pero no somos supercolegas de los usuarios.

- Cuando hay problemas: Los problemas de conexión o de desaparición de datos se enfocan desde perspectiva colaborativa. Expresamos “Tenemos problemas para acceder…” o “Creemos que has borrado ese elemento…”, “por favor, revisa…”.

- Frases hechas y recursos: Se utilizan fórmulas establecidas para definir el tipo de mensaje. Ejemplo: “Recuerda” para mensajes más relevantes, “¿Qué ocurre?” para los casos en que se dan avisos o “¿Seguro que…?” cuando queremos confirmar una decisión de eliminar algún elemento por parte del usuario.

- Lenguaje lo más humano posible: Procurar utilizar un lenguaje apropiado pero tampoco demasiado técnico. Ejemplo: en vez de “insertar datos” poner “introduce tus datos…”

- Corrección lingüística, gramatical, ortográfica: De estas cosas me acuerdo poco… Por poner ejemplos: escribir correctamente “Mediaculum” (siempre con mayúscula). Distinguir las páginas “Mis contenidos” o “Editar” (apartados) de lo que son los contenidos del usuario o a la funcionalidad de editar (acciones).

- Concrección y evitar ambigüedades o confusiones: Por ejemplo, al hablar siempre de “currículum” y no de “portfolio” o evitar residuos de terminologías anteriores como cuando usamos “tracks” en vez de “audios”, etc.

- Economía del lenguaje pero sin pasarnos: evitar los enunciados que se quedan cortos pero también las parrafadas que nadie lee. Ejemplo: en las opciones de eliminar o desativar, en vez de un simple “Si” y “No” enunciar mejor lo que pasa en la cabeza del usuario y poner “Si estoy seguro” y “No, mejor no”.

- Jerarquizar y unificar: procurar que no hubiera párrafos muy lineales y monótonos, destacando las partes más importantes. También procurar que todos los subapartados de un mismo apartado siguieran un mismo patrón común de titular, contenido de explicación, aviso, etc.

- Enlaces bien dichos: No usar adverbios de lugar sino definir las acciones correctamente para establecer el enlace. Ejemplo: en lugar de “puedes cambiarla aquí” poner “puedes cambiarla en editar“.

- Infinitivos para las acciones: usar siempre infinitivos para verbalizar las acciones.

Como todo esto eran patrones que iban surgiendo según encontrabaincoherencias, puede que más de un caso se me haya escapado. Por eso, si alguien ve alguna cuestión descolgada que avise y se corrige.

Por último, aquí lanzo tres sugerencias para que las aprobemos todos juntos ya que no debo ser yo sólo el que tome la decisión ya que son de mayor relevancia o implican temas de diseño:

- Asociar imágenes, audios, videos: En un principio hablamos de “añadir imágenes a un proyecto”, después usamos “asignar imágenes”. Creo que queda más claro todavía si usamos el verbo “asociar” ya que tiene menos connotacciones de restricción que los anteriores y nos interesa que los usuarios entiendan lo antes posible que un contenidos puede estar “asociado” a diferentes proyectos.

- Mensajes de usuario nuevo: al principio teníamos en las páginas de inicio de un usuario nuevo un par de párrafos que repetían prácticamente la misma información. Cambié eso por un gráfico de tres pasos que se fuera “activando” según completaba el usuario las acciones por las que se le guiaba.

- Feedback de elementos eliminados: Yo quitaría las páginas que dan el feedback de haber eliminado algún proyecto o contenido porque creo que si debe haber un feedback pero me parece mejor solución ponerlo en un pop up y que al cerrarlo la página se refresque sin más.

ciclos de centralización de datos Comments Off

Está muy interesante este artículo de Manuel Lima titulado Cycles of Data Centrality.  A partir de la propuesta de revisión de ciclos en la historia de la economía, propone un modelo de ciclos para la centralización de los datos en la tecnología. Distingue tres periodos, en los que los datos se han procesado y almacenado o bien en dispositivos centrales o dispositivos descentralizados. Según esta reflexión, nos encontramos en un ciclo donde los datos van a estar de nuevo centralizados aunque de modo distinto del primero. Este ciclo está muy relacionado con el cloud computing y el netbook. Son interesantes las preguntas finales donde podemos preguntarnos cuánto va a durar este modelo y hacia dónde nos va a llevar. Es difícil saberlo, pero una de las posibilidades sería de nuevo el almacenamiento en dispositivos descentralizados… ¿podemos imaginarnos cómo será ese cuarto ciclo?

modo fácil, normal o difícil Comments Off

Recuerdo cuando era pequeño jugando a la Nintendo cómo a la hora de empezar la partida podías escoger tres modos de juego: fácil, normal o difícil. Estos tres modos definían la complejidad de los retos que tenías que afrontar para poder “pasarte”el videojuego. Era común “pasártelo” primero en modo fácil y acabar “pasándotelo” (no siempre) en modo difícil.

Hace poco leí un artículo en boxesandarrows titulado Design for emotion and flow y escrito por Trevor van Gorp que me recordó mucho estos hechos.

El artículo habla de la experiencia de usuario desde un punto de vista psicológico, centrándose en el aspecto de la atención que el autor llama flow. Flow es la atención del usuario puesto sobre una tarea concreta en una interfaz y que se surge de la relación entre la complejidad de esa interfaz y sus habilidades para manejarse con este tipo de herramientas. Para que el usuario pueda cumplir con su tarea necesita que propiciemos esta atención y eliminemos los agentes distractores externos e internos.

Por otro lado, el desequilibrio entre estos factores puede desembocar en aburrimiento (demasiado fácil) o en ansiedad (demasiado difícil). Por tanto, lo que el autor propone es el diseño controlando estos aspectos para propiciar una experiencia óptima del usuario y ofrecer al propio usuario que decida cómo de compleja quiere / necesita que sea la interfaz.Hay que tener en cuenta que también influye el grado de importancia de esa tarea en concreto o la situación o contexto en que se encuentra el usuario.

Cuando tanto la complejidad como las habilidades son de un alto grado (un usuario experimentado en una interfaz compleja) este experimenta lo que el autor llama arousal. Este estado se caracteriza por su alto grado de concentración, pérdida de noción de paso del tiempo, sensación de control absoluto de la interacción, etc.

¡Dios mio! No recuerdo exactamente una web donde me haya ocurrido pero… ¿por qué videojuego podría empezar?

He encontrado esta imagen en la Web y no podía resistir el incluirla. Se trata del Legend of Zelda para Super Nintendo. Al comienzo del juego te familiarizabas con los botones y con el funcionamiento. A medida que ibas recorriendo cada pantalla, los obstáculos y las pruebas se hacían más difíciles pero seguías intentándolo porque cada vez tenías más destreza para manejarte con los controles. Era en estos casos en que puedo poner la mano en el fuego y afirmar que lo que pasaba por mi cabeza… en fin, decir que era arousal es poco.

Otro ejemplo es el Bubble Bobble. Parecía un juego tremendamente fácil pero en las últimas pantallas no había nadie que lo consiguiera.

Conclusión: Por una parte, apuntar los consejos que aporta el autor para manejarnos con este concepto del flow. Entre otros, propiciar que todos los elementos del diseño, de la arquitectura de la información, de la navegación, etc. hagan el uso lo más sencillo posible. Esto incluye aportar un continuo feedback al usuario de las tareas que va cumpliendo. Y también, saber jugar con cada tipo de usuario y sus habilidades para ofrecerle lo que necesita (de lo más sencillo a lo más complejo).

Por otra parte, todo este camino nos lleva una vez más a reflexionar la importancia de que el usuario pueda tener la capacidad de poder decidir y configurar su interacción con la aplicación o la web. En el proyecto, hemos hablado de ofrecer al usuario la posibilidad o incluso el potencial de decidir cómo quiere que sea la estética y la jerarquización de su perfil o su usuario, así mismo este está decidiendo cómo quiere que sea de sencilla o compleja esta para el visitante.