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.

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

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.

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Í

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.

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.

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>

Todos los wireframes juntos! Comments Off

Bueno, de la famosa y bien aprovechada lanzadera de Isra aqui os va el link donde se pudieron juntar todos los wireframes con las ultimas actualizaciones.

Para ver los 3 en 1…. PINCHA AQUI!!!!

Presentacion demo, escenario de uso y detalles del diseño Comments Off

Presentación demo y +

Para visualizar los contenidos sólo hay que clikar en en la pantalla para activar la presentación, acto seguido, pulsar la tecla siguiente a modo de pasador de diapositivas.

escenario de uso de Mediaculum Comments Off

Después de Laura, vino Miguel…y con Miguel quedaron Juan, Alba, Laura y uno mismo camtasiados…

para verlo pincha aquí.

Proyecto Mediaculum - Wireframe_7 Comments Off

- Cambios en los copys
- Error al entrar el usuario
- Redimensionamento del wireframe

Para ver el wireframe de mediaculum.com PINCHA AQUI!!

Descobrint la API de flickr Comments Off

He aconseguit connectar amb la API de Flickr! Es pot veure aqui o clicant a la imatge.

Gràcies al tutorial de maestrosdelweb i a la paciència del Sr.Google ;)

Demo mediaculum v.2 Comments Off

Aqui está el boceto de la demo.

Proyecto Mediaculum - Wireframe_6 Comments Off

Bueno, ahora lo que se hizo fue:

- Aplicar un poco el diseño de la home a todo el wireframe (asi ya tenemos una pequeña idea de como podría quedar mediaculum.com)

- Colocar el registro en la home tal como está en el diseño

- Hacer un mail para cuando el usuario se olvide de la contraseña

Para ver el wireframe de mediaculum.com PINCHA AQUI!!!!

exercici de WASP Comments Off

Aqui hi ha la proposta presentada pel meu grup a Wasp

per veure’l clica aqui

Grup: Juan, Yolanda i Laia

Versión 20 de Admin_Mediaculum Comments Off

Aquí va la última versión de wireframes de admin.

El grupo está formado por Toni, Jorge, Rolando, Patri, Nuria, Laura, Israel, Arturo, Gina, Alba y Javi.

Diseño gráfico - mediaculum/admin Comments Off

Para ver la propuesta del grupo 3 PINCHA AQUI!