Wireframes: Administración Plan Barbacoa Comments Off

Wireframe: helloplan/home (Primera vista) Comments Off

Sobre el proceso Comments Off

Hola a todos!!! Que tal?

Por aquí he hecho una pequeña vista del proceso que seguiremos al realizar nuestro proyecto.Espero que nos sirva como guía. 

De paso les comento que la herramienta con la que lo hice es muy buena, sobretodo para la parte de Wireframes. Se llama Lovely Charts, chequeenlo, puede ser muy útil.

Mucho ánimo y la mejor energía para este proyecto sea de lo mejor.

Web Design: Extensiones para Firefox Comments Off

Hola a todos!
He encontrado este post de Speckyboy Magazine.
Habla de las diferentes extensiones que podemos instalar en Firefox y que pueden ayudarnos en la parte del diseño, como la que enseñó Nacho hoy en clase.
Creo que puede ser útil que las conozcamos y que usemos algunas.
Saludes

Nuevos tiempos, nuevo site Comments Off

¡Hola a todos!

Hace mucho que no escribo en este blog. Han sido meses de trabajo y también de muchos cambios y nuevas expectativas. Para ello, he pasado por transformar y perfilar mi hobbie de escribir en el blog hacia algo más serio y profesional. Eso supuso alejarme un poco de este blog cuyo origen estaba en mi renovada etapa de estudiante y en un marco más concreto. Acabada esta etapa, tocaba evolucionar.

Corren nuevos tiempos y decidí lanzarme a crear mi propio site. Todavía es muy joven, pero tengo muchas ganas de que crezca y vaya tomando forma para englobar todo mi imaginario profesional (intereses, dudas, gustos, inquietudes, descubrimientos, errores…).

Sin más dar las gracias a quien alguna vez me dijo “me gustó tu post” o “me mola lo que sueles poner”, por valorar mi esfuerzo por intentar comprender y explicar las ideas que se me ocurren. A esas personas y al resto les invito a conocer mi site www.javicanalda.com para continuar conectados y compartiendo experiencias y conocimientos.

Un fuerte abrazo!

Javi

Gmail inconformista Comments Off

Me gusta cómo Gmail no se apalanca y continúa tomando acciones para mejorar. Hace unas semanas nos avisó a todos del nuevo sistema de etiquetas para clasificar nuestros mails y de la forma tan cómoda de usarlas (arrastras el mail a la etiqueta o viceversa).

También hace unos días hablaba con lluís mientras que mirábamos un momento para entrar en su correo electrónico. Al estar en catalán, me llamó la atención que su checkbox tradicionalmente llamado “recordar contraseña” en el registro tuviera el mensaje de “permanecer conectado” (en catalán). Lo achaqué a que era la traducción que habían hecho al catalán de ese mensaje y como nos tuvimos que ir se nos olvidó. Hace unos minutos me he dado cuenta de que en mi home de Gmail en castellano también aparece ese mensaje (¿cuándo lo habían cambiado?).

¿Por qué implementar pequeñas funcionalidades cuando la herramienta ya funciona? ¿Por qué cuidar detalles que parecen que no pueden ser más revisados? Creo que la respuesta son tres aspectos: entender de una forma diferente el papel y la actitud de tu empresa (obviamente, por tus propios intereses), dar valor añadido a tu producto y cuidar a tu cliente / usuario.

Para que un formulario funcione Comments Off

Hace unas semanas vimos para clase el siguiente vídeo de Joshua Porter para Webstock 09 “Designing Sign Up Screens & Flows”. Se trata de una conferencia sobre las mejores prácticas que se pueden llevar a cabo para crear un formulario lo más fácil y atractivo posible. De este modo, el usuario puede saltar este escollo (que siempre le resulta molesto o fastidioso) para comenzar a usar nuestra aplicación.

Entre los consejos que aportaba estaban el de ofrecer un alta inmediata u ofrecer el servicio sin ningún tipo de compromiso o el mínimo posible.

Joshua Porter at Webstock 09 from Webstock on Vimeo.

Curiosamente, he leído hace un rato un artículo que daba la razón a ese último punto. Se trata de “The $300 Million Button” de Jared M. Spool. Es un artículo muy interesante porque (además de tener el título como de una película) cuanta cómo la simple modificación de un botón puede mejorar drásticamente el funcionamiento de un formulario y por tanto el rendimiento y los resultados de una Web. La clave estaba en explicar al usuario y ofrecerle la posibilidad de escoger. ¡leerlo si podéis!

Los momentos difíciles Comments Off

Una vez acabada la recta final del postgrado, voy a escribir un post que llevaba tiempo deseando poner en mi blog. Se trata de un detalle que observé en la página web de la Agencia Tributaria.

Resulta que llega un usuario estándar como yo, con cero de ganas por buscar información sobre la declaración de la renta de este año y que con sólo pensarlo ya le entra dolor de cabeza. Con mi poca predisposición encuentro fácilmente el enlace en la home que me lleva a la Renta 2009. Y allí dentro empiezo a buscar algún enlace que me lleve a la solicitud del borrador.

En el menú comienzo a leer y encuentro el apartado de información… ¡bien! información es lo que yo necesito porque verdaderamente no sé qué para qué estoy buscando exactamente (de un año para otro las cosas se olvidan). Encuentro “borrador de la declaración de la renta”. Y pincho.

Entro y ojeo los enlaces. Miro alguno como “descripción general” para poder sentirme más seguro (sentir que tengo el control de la situación) antes de dar al fatídico enlace de “solícitud”. Por fin me decido y pincho para encontrarme a continuación lo siguiente:

¡Vaya! Creí que iba a poder hacer ya la solicitud… bueno, no importa, me dice los medios a partir de los cuales puedo hacerlo. ¿O no? Un momento… estoy en Internet, estoy en la web de la Agencia Tributiaria, estoy mirando dónde puedo pedir el borrador y… ¿a dónde me indicas? ¡Si ya estoy en www.agenciatributaria.es!

Moraleja: me dió muchísima rabia y encima me sentí más perdido en Spiderman en un desierto! ¿Qué les habría costado poner un enlace más profundo al formulario en cuestión? Es como si llegase al hospital corriendo con mi mujer dando a luz y en el mostrador le digo al enfermero o enfermera “¿A dónde puedo llevar a mi mujer?” y me responden “¡No se preocupe, llévela al hospital!”.

Son pequeños detalles pero tienes que contar que ese pequeño detalle va a ser luego un bache en el usuario que no está mirando en tu web si le ha tocado un premio sino que está con la fastidiosa declaración.

PD: Por cierto, la solución a todo esto estaba en el menú principal. Debajo de la “información” teníamos la “tramitación” pero mis ojos no llegaron a pasar por ahí. Por tanto, es inevitable que vayamos a dar determinadas cosas por sentado al plantear la usabilidad de una web, pero el usuario puede hacer cosas tan “raras” como dejar de leer toda la información cuando cree que ya ha encontrado la que le conviene.

Proyecto Mediaculum - Wireframe_10 Comments Off

Un poco de javascript Comments Off

Gracias a la librería FancyBox, todo parece más sencillo. FancyBox es un plugin para jQuery que sirve para mostrar imágenes, contenido html y recursos multimedia flotando por encima de la página. Como un popup o un mensaje de alerta pero con estilo un poco más maquero.

Y de momento aquí tenemos todos los popUps de Mediaculum.

Mediaculum: plantilla negra Comments Off

visualizar version actualizada

Importar Facebook Comments Off

Modificas del wireframe del apartado de importacion de contenido desde Facebook a Mediaculum.
visualizar

Proyecto Mediaculum - Wireframe_9 Comments Off

Modificaciones:

- Los errores de Crea tu cuenta

Falta:

- Mail de repuesta al pedido de Nueva Contraseña

Para ver el WIREFRAME PINCHA AQUÍ

P R O C E S S I N G: “Qué hora pEZ?” & “RoadTime” Comments Off

Hola chicos!
Finalmente me he emocionado con algo de programación jeje…
Acá les dejo el primer reloj que he hecho en Processing: “Que hora pEZ?”.
Y el segundo: “RoadTime”.
Espero que les gusten!
Besitos

Ejercicio: Reloj en Processing, “Chorando Tempo”. Comments Off

La idea principal de esta visualización de la hora radica en su comparación con las acciones de un ojo. Si bien en el post anterior, dichas acciones se referenciaron de una determinada manera; finalmente, y en busca de una mayor lógica en la visualización, se establece la relación entre:

- La dilatación de la pupila como segundero: cada amplliación es un segundo.

- El movimiento del iris como minutos: cuando la pupila llega a su tamaño máximo, incrementa la posición en el movimiento giratorio.

- La caída de la lágrima como horas: cuando el iris realiza todo su recorrido, se precipita una lágrima al mismo tiempo que crece el nivel de líquido.

Para ver el ejemplo pinche aquí

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).

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!

Nova Plantilla Mediaculum v.I Comments Off

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

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.

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.

esquema de CSS de admin Mediaculum Comments Off

Este es un esquema explicativo de la disposición de los elementos en el CSS de admin. Si exploráis la web con el Firebug podréis ver qué hay dentro de cada div (representados con cada caja). El gráfico os ayudará a visualizarlo globalmente. La parte que nos toca a todos es el macro div de “contenidos”.

arquitectura de contenidos de Mediaculum revisada Comments Off

Hemos hablado muchas veces que la arquitectura de la información de un proyecto Web puede cambiar a medida que se desarrolla el proyecto debido a que surgen o desaparecen funcionalidades, se testea si es entendible por el usuario o incluso por una cuestión de etiquetado.

Para los que no la vieron. aquí va la arquitectura original que si hizo junto con una versión de la arquitectura actualizada para que podamos tener todos las ideas más claras (no es un diagrama perfecto, pero mientras sea usable…).

¡Por cierto! La original se hizo con el programa Inspiration y el actualizado está realizado con Gliffy. El segundo tiene la ventaja de que es online y permite además de hacer diagramas, crear prototipos o incluso el plano de una casa.

Apis! Comments Off

Ai, que al final amb l’entrega i tot, se’m va oblidar penjar la moguda de les Apis. Al final, tres! Flickr, Youtube i Vimeo!

Es pot veure aquí.

Encara s’ha de trastejar bastant el codi, però funciona :)

Mashup: está bien saberlo Comments Off

Leyendo un post me he enterado de que nuestro proyecto Mediaculum es lo que se conoce como un Mashup (Aplicación Web Híbrida). En Wikipedia lo definen como

sitio web o aplicación web que usa contenido de otras aplicaciones Web para crear un nuevo contenido completo, consumiendo servicios directamente siempre a través de protocolo http.

Está bien familiarizarnos con el término porque probablemente no paremos de oirlo en los próximos meses jeje

Abrazos!

PD: echarle un vistacillo al post que os decía que leía, porque habla de otro mashup que se ha lanzado hace poco y que resulta interesante!

escenario de uso para presentación final Comments Off

Para verlo, pincha aquí.

QBN: otra referencia Comments Off

Esta es la misma gente de Krop, pero lo que se me hace interesante es cómo han conformado un formato de “familia” en el que incluyen diferentes aplicaciones y funcionalidades complementarias. Me parece interesante considerarlo a la hora de planificar la evolución de Mediaculum. Pensando a futuro.

Aquí el link

Proyecto Mediaculum - Wireframe_8 Comments Off

De esta vez cambiamos:

- Los copies
- El “Iniciar sesión”
- Aplicación de la imagen principal de la animación.
- La página “Ayuda”, volviendo un poco a lo que ya se tenia. Se eliminó el link “Trucos”, ya que por ahora no tenemos trucos a ofrecer al usuario.
-Se adicionó al footer el link “Cómo funciona” ya por ahora no va haber botón en la home a la demo devido a que esta está hecha con los wireframes.

Por ahora es todo! a ver si os gusta…

Para ver el Wireframe de Mediaculum.com PINCHA AQUI!!!

seleccionar todos con javascript Comments Off

he probado y parece que funciona, el javascript para seleccionar todos los checkbox de un dado formulario: <script> function ChequearTodos(chkbox) { for (var i=0;i < document.forms["form1"].elements.length;i++) { var elemento = document.forms[0].elements[i]; if (elemento.type == “checkbox”) { elemento.checked = chkbox.checked } } } </script>