Blog del Master en Diseño de Proyectos Web 2009. Elisava, Escola Superior de Disseny
Proyectos web 2009 » Entradas en la categoria 'Blogs de alumnos'

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. 

Estos serán nuestros pasos a seguir!

Estos serán nuestros pasos a seguir!

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.
:P Saludes

Mediaculum extraviado Comments Off

Hola chicos!
Cuanto tiempo!
Espero que todos estén super! Y trabajando mucho.

Ayer, en el primer día de clases, no encontrabamos por ningun lado donde enseñar Mediaculum. El FTP no funcionaba y por buscador encontramos un par de versiones que no funcionaban bien, ni tenían el video disponible, además de otros errores de programación.
“Aquí” está la versión de prueba “oficial” de Mediaculum. (Por cierto, el video no tiene sonido…y creo que no es la ultima versión?), espero que si hay otra más actualizada me lo digan.
Espero que a alguien le sirva y que yo no sea la única despistada!
Besitos!
Quedamos pendientes con reunirnos.

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.

primer menú para la declaración de la Renta 2009

primer menú para la declaración de la Renta 2009

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.

menú de información sobre la declaración

menú de información sobre la declaración

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:

solicitud de declaración en la información

solicitud de declaración en la información

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

Piezas gráficas: Presentacion de Mediaculum Comments Off

 

Cartel3[Afiche]

 

flyer_castellano_ok[Flyer]

 

banner_castellano

[Banner]

Última versión de cartel Mediaculum 09 Comments Off

Así está de momento la última propuesta corregida por Nacho del cartel. Me falta hablar con los del taller de diseño de Elisava para que me pasen el logo trazado de la universidad ya por el momento no he encontrado a nadie que lo tenga.

Respecto a los cambios he eliminado la carpeta del muñeco para añadir olamente un gran logotipo de mediaculum en el centro. Conceptualmente se entiende y gráficamente nuestro logotipo gana presencia y se situa en el centro del cartel.

También le he añadido cara al muñeco otorgandole personalidad y dotandole de mas dinamismo como algunos compañeros pidieron.

Ya por último he cambiado la fecha por la de Nico que realmente me parece bastante mas clara y mucho menos pesada que la estrella negra.

Proyecto Mediaculum - Wireframe_10 Comments Off

Modificaciones:

- El copy de la Home “Muestra tu trabajo a todo el mundo - Reúne tu contenido online y reinventa tu portfolio”

- reinventa tu portfolio -> link a un imagen de cómo quedaría un portfolio full equiped de plantilla básica + al hacer clic otras plantillas

Aún Falta….

- Mail de repuesta al pedido de Nueva Contraseña

Para ver el WIREFRAME PINCHA AQUÍ

Votación para la gráfica de Mediaculum 09 Comments Off

Aquí están las propuestas gráficas para la promoción de la presntación de Mediaculum 09.

Abrimos votaciones hasta el domingo 21. Votad via mail la propuesta que mas os guste.

Por cierto falta por poner la aula donde se hará la presentación, quien lo sepa porfavor que nos avise.

Saludos Mediaculumeros.

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.

Propuestas de grafica Mediaculum 09 Comments Off

Aquí están las propuestas gráficas para la promoción de la presntación de Mediaculum 09.

Abrimos votaciones hasta el domingo 21. Votad via mail la propuesta que mas os guste.

Por cierto falta por poner la aula donde se hará la presentación, quien lo sepa porfavor que nos avise.

Saludos Mediaculumeros.

Mediaculum: plantilla negra Comments Off

visualizar version actualizada

Refinando las órbitas Comments Off

¡Hola! Perfeccionamos un poco las órbitas de nuestros planetas por aquello de evitar un cataclismo cósmico. De todos modos, algún planeta todavía se resiente a veces de su propia gravedad.

Lluís y JAvi

Importar Facebook Comments Off

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

Un poquito de humor Comments Off

La idea inicial era hacer una linea del tiempo. Algo muy minimalista. Pero una linea del tiempo en el sentido histórico pasandola para las horas. Reduciendo la classica linea en que vemos periodos históricos de millones de años para cada hora del dia.
… y asi nació el NoLoHagasEnElMetro

Por fin la Home Comments Off

Hola a todos/as

Os paso el link de la Home definitiva, siempre que no se proponga algún cambio más… ‘O_o
De algún modo he conseguido que en todos los navegadores se vea bien, en especial Explorer 6
(increible verdad xD). Falta por solucionar el tema PHP “errores” que, aunque con Xavi vimos que estaba bien escrito el código, algo pasa que no conecta bien con la base de datos (sigo con ello).

Por cierto!! Al final con la peli FLASH que hacemos??

Si alguien necesita ver la CSS está todo colgado en el FTP en mi carpeta.

ver: Home Mediaculum

A por la recta final ^_^ chicos/as

El tiempo en bolas :P Comments Off

La verdad es que de todo lo visto, este senzillo reloj sea quizás el menos original jejeje… pero eso si, funciona xD

Se trata de unas bolitas de distintos tamaños que nos indican horas, minutos y segundos. Espero que sea inteligible. Se aceptan críticas ^_^

Saludos a todos/as

Ver reloj: El tiempo en bolas

Reloj de globos!! Comments Off

Imprimir
[pincha la imagen para visualizar el reloj]

La idea principal de este reloj fue conceptualizar el tiempo como algo que simplemente se nos va con cada minuto que pasa, como los globos que se nos escapan al cielo, no sabemos a donde se van… solo que se van…

en esta visualización el movimiento ascendete de los globos marca el paso del tiempo. El globo más pequeño, ubicado al extremo derecho de la pantalla marca los segundos, teniendo como ciclo un minuto completo desde que entra hasta que sale de la pantalla. El globo del centro marca el paso de los minutos, de esta manera en una hora entra y sale de la pantalla. Finalmente el globo más grande, ubicado al extremo izquierdo de la pantalla refleja el transcurso de las horas de un día completo, es decir, demora todo un día en aparecer y desaparecer de la escena.
Bueno, basicamente esta es la idea principal de mi trabajo, pero a medida que lo he ido desarrollando han surgido muchas ideas y a medida que se va entendiendo el funcionamiento de porcessing te das cuenta de que cada proyecto da para mucho más…

nos vemos, xau! :)

Reloj tetris Comments Off

Cuando se planteó el ejercicio, de concebir un reloj pensamos que la hora es una medición en base a la construcción de un día, y por tanto nos propusimos hacer un reloj que fuera mostrando el paso del tiempo, a medida que las partes se fueran uniendo, de tal manera de mostrar también el pulso marcado por este paso temporal. Por otro lado decidimos mostrar el tiempo a través de la imagen del Tetris, para generar una visión más lúdica, de algo tan matemático y mecánico. Y también para hacer una reminiscencia de un elemento icónico de nuestra infancia.
Nuestro reloj se compone principalmente de tres instancias que generan esta medición de tiempo en forma dinámica. La primera a través de las piezas, que van cayendo o bajando un espacio por cada segundo, hasta que se posicionan en la base. Cada pieza demora 10 segundos en caer y una vez que han caído y se han unido las 6 piezas estas desaparecen dando paso a una nueva sucesión. En segundo lugar los minutos mostrados a través de una barra de energía, la cual se va llenando a medida que las piezas se unen y generan cada minuto. Por último todo juego posee niveles, es por esto que decidimos poner la hora representada a través del nivel de dificultad del juego, ya que la hora es un espacio de tiempo más prolongado y en un juego cuando avanzas cada nivel, aumenta la dificultad y por tanto aumenta el tiempo en que tardas en pasar al siguiente nivel.

Para verlo pincha aqui

Pensando en como Visualizar el Tiempo. Comments Off

Por: Oriol Blas y Patricia Posada.

De la arena al sol, del sol al cosmos. En un primer momento de la conceptualizaciòn de la propuesta,  pensamos en hacer un reloj de arena, pero no teníamos muy claro como modificar la función del mismo, para que tuviese un aporte especial, por lo que cambiamos de concepto para hacer  un  Reloj que fuese una especie de sol noctrno, donde los datos del tiempo se visualizaban en la sombra que se proyectaba sobre  el el mismo, pero vimos que era demasiado simple, y era bastante abstracta, así que intentamos concretar como mostrar los datos del tiempo, con una propuesta con cierta poética y lógica, estética y datos, que es lo relevante de trabajar en Processing. Esta es nuestra propuesta:

Un reloj “Cósmico” donde los segundos aparecen simulando ser estrellas y  estas forman una hermosa constelación, los minutos a su vez giran simulando ser el sol y las horas cambian de posición como un planeta afectado por el  transcurrir del tiempo.

Para viajar atraves de un Reloj Còsmico… Pincha Aquì

Estudios previos de Diseño:

 

 

 

Plantillas usuario corregidas Comments Off

hola, aqui se puede ver mi plantilla corregida. las dos primeras paginas presenta el usuario, con foto e sin foto, despues si q va a pagina normal del usuario, y luego al player, q ya no tenemos tiempo de hacerlo..

Processing clock’s Comments Off

Descargar reloj

Teniendo en la figura del reloj “normal” como paradigma de usabilidad a la hora de medir el tiempo. En este ejercició quisimos crear algo distinto, algo visualmente atractivo y sencillamente diferente.

Dicho esto, lo único que hay que decir es que a parte de las bolitas que simbolizan horas, minutos y segundos, añadimos también las bolitas representantes de las decenas de dichos segundos/minutos, por una simple cuestión de comodidad a la hora de leer y evitar así tener que contar 58 bolitas para saber que son las x:58 minutos.

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

Processing - Ejercicio Comments Off

Para ver el ejercicio PINCHA AQUÍ

<!- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  PROCESSING - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ->

Processing es un lenguaje y entorno de programación de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Fue iniciado por Ben Fry y Casey Reas a partir de reflexiones en el Aesthetics and Computation Group del MIT Media Lab.

Processing es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario. Puede ser utilizado tanto para aplicaciones locales así como aplicaciones para la web (Applets).

Alcances
Al estar basado en Java, puede heredar todas sus funcionalidades, convirtiéndose en una herramienta poderosa a la hora de encarar proyectos complejos.

http://es.wikipedia.org/wiki/Processing

Metropolis Comments Off

visualizar

A partir de la luz y el color intentamos manejar y medir las tres variables del tiempo determinadas en el ejercicio, con un fondo que sugiere el día y la noche, pasando por el alba y el atardecer que fijan las medias horarias, y degradando en su nivel de oscuridad, luces y sombras.

El horizonte se torna más oscuro a medida que la franja horaria contenida en medio día aumenta, pero de nuevo se vuelve a iluminar con el paso de las 12 horas que le prosiguen, generando así el ciclo de las 24 horas.

La luz avanza de prisa y sin descanso, los cuerpos de día y de noche generan oposiciones entre oscuridad y luz, y cada minuto de cada hora y de cada día se ve reflejado en torno a la construcción, con 60 ventanas intermitentes que anuncian secuencialmente la llegada de cada uno de los 60 segundos.

La sombra refleja durante el día y la noche los distintos cambios de luz en el edificio, y entre negros y grises contrasta la tonalidad que sugiere la luz total enmarcada en las ventanas.

Una secuencia rítmica que nos acerca a la relación íntima y cercana entre tiempo y luz, con un avance vertiginoso que en nuestra vida diaria nunca nos llevaría a pensar que aquellos haces de luz generados por una medida racional, dejarán algún día de ser infinitos.

trabajo de: Rolando Medina y Chiara Lera