Prospectiva Cultural - links

Estos son algunos links que exponen trabajos variados con el asunto de interaccion bajo los paradigmas de ubicuidad y r.aumentada

+ Las proyecciones como periferico de salida y sus muchas aplicaciones
http://klip.tv/galleries_i.php#

+ Entornos interactivos para la educacion
http://www.creativemachines.net/exhibits/Virtual_Graffiti/VG_1.html

+ Empresas que ya explotan las posibilidades de los entornos interactivos:
http://www.obscuradigital.com/

+ Los ejemplos de aplicacion de la tarjeta arduino:
http://www.eaod.cl/?p=19

Comentarios a la preentrega del ejercicio Prosopectiva Comercial.

Banners interactivos

En esta dirección podemos ver algunos de los mejores banners interactivos segun los prestigiosos premios Webby, sobre esto no hay mucha teoria, lo mejor es verlos.

Webby awards advertising

like.com un buscador visual.

Videos sobre el supermercado del futuro

Metro group future store

Notas Preentrega Portal.

Notas Ejercicio PDA

Inteligencia artificial, generación de partículas y mas...

Ún sitio muy entretenido, donde se pueden ver técnicas de contrucción de objetos y comportamientos en actionscript utilizando la física, matemáticas y estadística.

http://www.liquidjourney.com/flash/lq.html

En la opción "source" se van a encontrar esta maravilla. Y lo mejor, es código abierto como debería serlo con todo.

Ejemplos de audio en web.

Los invito a mirar estos ejemplos de audio en web.

http://del.icio.us/juliana.restrepo/sonido

Mas paginillas!!!

Espero que las visiten pues! ^_^

Buffet Puma

Inventa un Plato con salsita MyAmoy

Get the Glass!!!!! (el de la leche hmmm)

Desahógate con Kah Ra Shin


bobadita...

kill,open and revive the bunny lol

Estrategias de marca online

Compañeros, en esta lista podemos ver algunos ejemplos de diversas estrategias de marca que pretenden lograr una relacion a otro nivel con el usuario final, debemos verlas, entenderlas , traducir si es necesario y sacar conclusiones, el martes hablamos de ellas y lo mas importante: empezar a tener visión estrategica de marca para desarrollar el ejercicio.

http://www.impossiblestory.com/

http://freedominteractivedesign.com/demos/digitas_spring/main.htm

http://www.stainart.com/

http://www.actioncity.la/

Guinnes

http://www.sendyourstyle.com/index.html

http://www.absolut.com/

http://www.mycoke.com/

http://www.the-passenger.com/
(este es mas campaña pero igual es divertido)


Felices pascuas, Eqzitox !

Ejercicio 5: Prospectiva Comercial

Enunciado: A partir de una pagina web existente, desarrollar una estrategia de innovación que involucre medios interactivos.

Valor: 20%

Entrega:Una justificación del proyecto de 1 pagina, documento escrito y visual con el diseño de "personas" y "escenarios", análisis escrito y visual de la estrategia de la marca, aplicación completamente funcional y evaluación de usabilidad.

Referencias web:

Diseño de personajes:
http://www.alzado.org/imgconts/autor_id3/personajes_alzado2.pdf

Foro MIG

Este es el foro que propone Daniel, esperamos comentarios y sugerencias.

http://interfacesgraficas.freeforums.org/

Sitios con noticias de tecnología

http://www.enter.com.co/
http://www.maximopc.org/
http://www.laneros.com/
http://barrapunto.com/
http://www.baquia.com/

Para los artículos del portal

Chicos esta página tiene temas cheveres relacionados con las interfaces.... supongo q la pueden usar para sacar los artículos, espero que les sirva a los respectivos encargados de esta sección... el resto pueden curiosear sobre todo si les gusta la literatura sobre el tema de las interfaces.... http://www.desarrolloweb.com/articulos/2190.php
Besitos!!!

rejillaa de noticias y articulos

entonces que mostros!
aqui esta la imagen del como irian las noticias y los articulos, yo tengo el AI, quien no me tenga en msn aqui va el mail para pasarlo: mateoisaza@hotmail.com

suerte!

Mateo.

Buenas tardes muchachos, acá les subimos Carol y yo el porta,ahora les trataremos de enviar el .ai, mucha suerte, si algo no les parece nos dicen q para eso estamos , en la buena, puro mostrismo urbano

Portal del modulo : Tareas

Hola, estas son las actividades que corresponden a cada uno para continuar con el desarrollo del portal:

Todos deben trabajar primero diagramando y diseñando los elementos necesarios para la seccion que les corresponda y luego la armamos en html.
Flash solo se usara si es realmente necesario.

El home terminado por Camilo Monsalve y Carol debe enviarse a todos en formato fuente como referencia.

Mateo: Debe hacer la plantilla de articulos y noticias (con rejilla, bien diagramada) en ilustrator y enviarla rapidamente para que los demas la usen como referencia.

Mateo y Laurie: Galeria desplegada y vista ampliada de trabajos en el home: Esto es la plantilla de la galeria que aparece cuando el usuario hace una busqueda o decide ver todos los trabajos de alguien o con determinado perfil.

Camilo Rios: Se encarga de hacer la pagina de noticias desplegadas (en el home aparecen resumidas) basado en la plantilla de Mateo, debe cargarla con contenido, proponer temas reales.

Daniel: Debe proponer adaptacion de un foro con los colores y elementos de identidad del portal de interfaces, debe proponer secciones reales para el foro. Pendiente escoger el foro, lo estaremos enviando.

Esteban: Basado en home y en la plantilla de Mateo debe diseñar la seccion: Aula, proponer sus funcionalidades.

Carol: Se encarga de diseñar e implementar el Info Banner, el tema inicial es el concepto de interfaz grafica, pensar en banners con posibilidades de interaccion o seleccion. (ver sitio de Proteccion y australian in front).

Eksitoz.

GIO

Diagrama de contenidos

Aún falta lo que no hicimos en clase en cuanto pueda lo actualizo... disculpen la demora

Un bar muyyyy cool.

Técnicas de simulación increibles...

Benchmark para el portal de interfaces.

El Benchmarking consiste en mirar "competidores" de la propuesta que estamos desarrollando (portal del modulo), para emular y superar sus buenas practicas, estos "competidores" pueden ser directos o indirectos, estos ultimos pueden compartir "alguno o algunos" de nuestros objetivos.

Nota: El enamoramiento no solo se logra graficamente, tambien con los contenidos y su estrategia de tono y lenguaje.

Algunas direcciones para esta actividad:

http://www.australianinfront.com.au/
http://www.designiskinky.net/index_main.html
http://www.experimental.ro/
http://www.scene360.com/
http://www.guigalaxy.com/
http://www.lounge72.com/root/
http://www.nestcollective.com/
http://www.urbancollective.com/
http://www.mg25.com/

web 2.0: el asesino del diseño

Compañeros, encontre una articulo interesante donde se discute el tema de web 2.0 referente al diseño y me parece interesante para el tema que estamos viendo.

aqui esta el link que había olvidado poner: http://www.badboy.ro/articles/2007-04-07/web20_the_killer_of_design/

Leanlo!!

Mateo Isaza

Correcciones definitivas a la aplicación PDA

Carol:

• Incluir un texto o diagrama en ayuda.
• Cambiar de lugar el botón de ayuda, para que no parezca como que la mano de "retroceder" lo está señalando.
  
• Incluir un select con el texto "no volver a mostrar" o uno semejante.
• Desarrollar las secciones de pulseras y aretes.
• Los botones de regresar y adelante no están funcionando bien.
• Pienso que para salir y cerrar debe haber un mismo icono, para favorecer la coherencia interna.
• "Multiplicar" ¿Qué es?
  
• En ceñido al cuello, se vé el collar mediano y en largo, se ven los colores. Corrigelo.
• En "arma tu collar" sí deberían aparecer los colores, pero para cada "piedra" y estos deberían poder arrastrarse a la imagen.
• El select de ciudad debe tener las ciudades.
• Debe haber un enviar al final de la forma, pues el continuar no es intuitivo. Fijate que hasta este punto el usuario navega a través de la interfaz sin hacer uso de estos botones.
• El último pantallazo debería tener un poco más de diseño.
• El boton de "hacer otro diseño", no es sensible.

Laurie:

• Los radio buttons estan funcionando como select. Revisalos.
• La perspectiva de la entrada es aun extraña...
• Si solo hay un botón en la primera pantalla, ¿porque no hacer el área sensible más grande y ahorrarle esfuerzo al usuario?
• Los iconos siguen estando pequeños a comparación con los demás elementos de la interfaz.
• Mejor siguiente que "next" en los botones o elegir si todo está en inglés o en español.
• Es necesario un botón de atrás.
• Bacana la simulación de la transacción.

CamiloM:

• Diagramar mejor los botones "verificar" y "registrarse".
• El texto ingresado en los campos es muy pequeño y de un gris que prácticamente no se vé. Debes solicionar esto.(tambien sucede en el imput de la búsqueda).
  
• Bacano el "loading" y la animación de entrada.
• Sobre la opción de bocetos: no es claro para que son las flechas rosadas, ni de que herramientas dispongo para dibujar...
• ¿Por donde abro un documento de boceto existente?
• El detalle del audio animado, muy bacano animado, pero no se vé.
• En artistas: los botones y los textos están muy pequeños. Sería buana una opción para ampliar la imagen.
• En materiales, ¿qué significan cada uno de los iconos? Al hacer clíck en un icono del mapa debería aparecer una descripción.
• En muros limpios, la direcciòn y la opción para introducir un nuevo muro.

Esteban:

• ¡Esoooo, me diste gusto con lo de la animación! (July).
• Es extraño que el boton de regresar sea el mismo que el de entrar a una aplicación, reemplazalo por una de las flechas azules en el otro sentido, la imagen del icono, puede quedar como imagen.
• En el pantallazo hombre - mujer quitar el área donde no está el icono de la felcha.
• Lo demás ok.
  

Mateo:

• Hacer que los imput sean sensibles.
• La resolucón de las imagenes en el over es muy mala.
• Faltan titulos por sección: "inventario", "venta", "pedidos".
• No es clara la función del botón confirmar en venta.
• En los pedidos ¿como los envio? ¿como veo un consolidado de o que he pedido?, como introoduzco los pedidos que han llegado para que la maquina sepa cuando se está acabando un insumo?
• No se entiende para que es el botón rojo del centro... necesita una descripción.

Rios:

• Premitir al usuario que abra o explore cotizaciones o ordenes de prtoducción ya realizadas. Y que las guarde.
• Desarrollar la orden de producción.
• Incluir un chech button para una alerta web sobre la llegada de la cotización.
  

Tabla de Alcance

Esta es la tabla en la que definiremos el alcance del portal.

Boceto de aplicación para PDA

Ejercicio 4: Portal de interfaces

Enunciado: Diseñar un portal para el módulo de interfaces, teniendo en cuenta los diferentes perfiles de usuario, para una interacción dinámica. El proyecto se hará en una primera etapa en grupo para definir las condiciones generales, y en una segunda etapa, cada estudiante desarrollará una rama independiente del mismo.

Valor: 20%

Entrega:Una justificación escrita del proyecto (1 pg). Cuadro de alcance. Análisis de requerimientos, mapa de navegación. (grupal) / Sección funcional y con contenidos reales y relevantes (individual).

Referencias web:

Web 2.0 (como referencia para proponer funcionalidades):
Mapa Web 2.0
http://www.go2web20.net/

Portales:
http://veerle.duoh.com/
http://www.digitalthread.com/

Entrega Ejercicio 2: Diseño de metáfora

Carol

Camilo M.
Daniel
Laurie
Mateo
Rios
Esteban

Entrega Ejercicio 2: Diseño de metáfora

Laurie Román

Notas Ejercicio 2: Diseño de transacciones.

Observaciones:

Camilo M:

• ¿De que sirven los "check boxes" en "Ten en cuenta los siguientes requerimientos: banda ancha si la aplicación no los autoconfigura o si no siven como filtro para evitar usuarios que no los tengan?
• La opción de entrar como jurado no es evidente en el primer pantallazo.
• Tienes errores de ortografía y de gramática.
• En los participantes sería bueno saber a que categoría o genero pertenecen.
• A las imágenes animadas les falta corregir el antialias
• No es claro cuando grabo el karaoke, sería necesario tener una ayuda para estas funciones complejas.
• Al guardar, debería mostrarse al usuario donde quedo guardado el archivo, para que despues, pueda recuperarlo. Un segundo botón de guardar es innecesario.
• Falta un botón para previsualizar la postal.
• Despues de enviar un comentario, debería mostrarse al usuario la confirmación del mismo. Puede ser gráficamente.
• No sobraría un salir en la interfaz.

Esteban:

• Las preguntas deberían estar separadas por criterios (motor, accesorios, manejo etc.)
• Falto exploración en la elección de la tipografía.
• ¿Para que a,b,c en las preguntas?
• En general nos parece muy bueno.
• El tablero no debería haber sido electrónico sino analogo (jajaaj) es decir nos gustaría que se moviera la aguja para saber cuantas faltan y en donde estoy.

Laurie:

• La numeración debería abarcar todo el proceso, o especialmente el cuestionario.
• Hubiera sido bueno que las imagenes fueran tuyas.

Carol:

• En la pagina de inicio no se ven algunas de las imagenes vinculadas.
• Hay varios errores de ortografía y de digitación.
• Muy bacano que el texto no sea imagen.
• Los detalles de la elección de colores y de poder añadir más correos son muy inteligentes.

C. Rios:

• En la primera pantalla cuando le digo que ahora no, me dice ¡que bien! esto resulta extraño.
• Es muy interesate la manera como la aplicación se dirige al usuario.
• La ubicación dentro de la pagina no es la adecuada, pues el pop up oculta el logo.
• El reproductor no funciona.

Mateo:

• Los campos de fecha: dia mes y año deben ser select con las opciones ya ingresadas para que el usuario solo deba elejirlas y no tener que digitarlas.
• La pagina que invoca la pop up se recarga al presionar los botenes, esto era facil de corregir.

Daniel:

• La propuesta es novedosa y pertinente, esta bien planteada pero de nuevo se observa poca antencion a los detalles graficos, debe ser un objetivo mejorar en el manejo de herramientas graficas o en ser mas observador y cuidadoso de los detalles ya que una buena propuesta se viene al piso por esos elementos mal acabados.
• La tabla de permios y puntos necesitan mejor manejo de espacios, se ve apeñuscado y no deberia haber scroll horizontal
• Enterado de la info no es sinonimo de continuar, los botones deben tener textos mas consistentes con toda la aplicacion y muy claros
• El la seccion de registro no hay boton que me permita regresar para ver los premios o simplemente devolverme
• Al inicio de la polla la barra que marca la seccion (goles, alineacion etc) esta bien planteada pero de nuevo el mal acabado grafico daña la idea. El diseño grafico no puede ser tan descuidado. Los botones de atras y adelante con distinto tamaño en las fuentes ademas las figura del simbolo de nacional para un boton es algo gratuito no tiene mucho concepto ni coherencia formal se ve complejo y puede confundir.
• La cancha con la alineacion es muy buena idea pero de nuevo el mal acabado grafico la tumba.
• Al final de la polla la opcion de previsualizar datos deberia ser obligatoria es decir un boton de continuar que me lleve obligado a ver los datos que eleji antes de enviar por si quiero cambiar alguno a ultima hora.
• El enviar debe llevar a una confirmacion de que se ha enviado pero esta apareciendo de nuevo el home de nacional en la pop up lo que parece un error.

Blogger on the go

Resulta que blogger, donde tenemos este blog, ha lanzado en Estados Unidos una opción para enviar fotos y textos directamente desde el celular al blog.

http://help.blogger.com/bin/answer.py?answer=42448

Pixel Fonts

Recuerden que pueden usar pixel fonts en flash en caso de necesitar textos pequeños o medianos con muy buena legibilidad porque las fuentes estan sin antialias.

http://www.photoshopsupport.com/tutorials/jennifer/pixel-fonts.html
http://www.dafont.com/bitmap.php

Videos sobre PDA prospectivos

Reactee. PDA + Camiseta = Mensaje de texto.

En que consiste:

1. Creas tu camiseta con el texto reactivo.
2. Te la envian por correo.
3. Si alguien te escribe un mensaje de texto, "reactee" le responde.

http://reactee.com/

Concurso 2008 para las mejores aplicaciones moviles de Nokia.

A ver quien se le mide...
http://www.mobilerules.org/

Links bacanos pora el ejercicio de prospectiva cultural.

Por favor, vallan mirando estos links, les van a servir cuando empecemos el ejercicio.
Prendas inteligentes y divertidas
Este otro también puede servirles para el ejercicio en curso.
Teléfonos revelan arte invisible

Poquet Pc para la que vamos a diseñar la aplicación

Hola, este es el modelo para el que vamos a diseñar la aplicación: Pogan especial atención a la resolución y a los dispositivos de entrada.

Representación Visual de una Oficina (Tema Metáfora)

Bueno muchachos aqui les mando la paginita que me encargó juli.

Ejercicio 3: "Diseño de metáfora"

Enunciado: Identificar en un espacio físico donde se desarrolle alguna labor artesanal, los indices, iconos, acciones, usuarios y procedimientos que en el se llevan a cabo, para construir a partir de ellos una metáfora para pda.

Valor: 10%

Entrega:Una justificación escrita del proyecto (1 pg). Presentación corta de la investigación (5 diapositivas). Sistema de iconos y aplicación funcional del celular en flash.

Referencias web:

Iconos:
http://jimmac.musichall.cz/icons.php (Cortesía de Roylan Galeano).
http://www.pixelgirlpresents.com/icons.php?cat=pc

Funcionalidades de PDA:
Gráficamente son muy limitadas pero sus funcionalidades son interesantes.
http://mobile.ask.com/index.jsp
http://travelosa.mobi/
http://co.m.yahoo.com/
http://www.thumbplay.com/
http://www.oursites.co.nz/rubbishfilmfest/home_old.asp
http://wap.projectrunway.mlogic3g.com/
http://mobile.reuters.com/

Entrega Ejercicio 2:

Nosotras online, Carol
Last-Fm, Camilo M.
Nacional, Daniel
Spectrum Nexus, Laurie
Soho, Mateo
Alex Sintec, C. Rios
Coin Tunning, Esteban

Notas ejercicio 1

Nos cuentan si hay dudas con respecto a las categorías de evaluación o las notas.

Sobre las Formas

Las formas permiten que el usuario:

• Realice selecciones complejas para enviar el resultado de su selección hacia una base de datos u otros usuarios que usarán esta información.

• Envíe datos, información y archivos desde la página web o aplicación hacia una base de datos u otros usuarios.

• Como elementos de navegación.

Estos elementos (formas) le añaden mucha interactividad funcional a los sitios web y pueden ser usados de diversas maneras: Para seleccionar productos, llenar datos para una compra, realizar inscripciones, elegir opciones con múltiples variantes, enviar un archivo etc.

Las más usadas son:

Características:

Radio button: Permite realizar selecciones excluyentes (si o no) no permite dudas o términos medios.

Check Box: Casilla de verificación. Permite selecciones alternativas. Puede o no activarse.

Cuadro de texto de una línea: Sirve para ingresar textos

Carga de archivos: Es usado para seleccionar un archivo y enviarlo o cargarlo

Campo de texto multilínea: Permite ingresar una mayor cantidad de texto. Su área se puede limitar y si el texto supera en tamaño al área definida aparece scroll

Botón: Realiza una acción: Enviar, guardar, cancelar etc

Menú desplegable: Presenta un listado de elementos y permite la selección de uno o varios de ellos

Menú desplegado: Igual que el anterior pero permite visualizar varias de las opciones que contiene.

Otro ejemplo de diagrama de flujo...

Muchachos, siguiendo lo que vimos hoy de diagramas de flujo, aqui les dejo una imagencita de otro ejemplo (sobre daños del pc) para que lo tengan como "guía" asi como el del cajero que vimos en clase de teoría. Vere si encuentro mas ^^

Necesidad de Reparar el Pc

Comentarios de Roylan al ejercicio.

En el siguiente ejemplo pueden ver un formulario "disfrazado" para motivar alusuario a llenar sus datos.
En este ejemplo en vez de "denos sus datos para darle un premio",dijimos" usted se gano un premio, para dárselo denos sus datos"http://aligma.robinssondivision.com/01.html (prototipo funcional).

• Tengan en cuenta facilitar esta tarea al usuario agrupando la info que vana solicitar por categorias logicas y subdividirlo en caso de ser necesario en pasos o secciones logicas tambien.
• El lenguaje usado es importante para crear familiaridad, de esta manera el usuario no se sentira en un interrogatorio de la fiscalia.
• Recuerden que pueden innnovar con el tema tal y como sucede en este ejemplo.
• Piensen en desarrollar alternativas es decir: si el usuario escoge esto pasa esto pero si escoge esto otro pasa esto otro.
• Recuerden que el formulario debe llevar a unresultado, es decir algo tangible como una suscripcion, una compra, una personalizacion etc.
• Por ùltimo, pero no menos importante, les pedimos mantener confidencial esta propuesta, porfavor no se la reenvien a nadie por fuera del módulo, ni la muestren a quien pueda desarrollar algo similar.

Ejercicio 2: "Diseño de Transacciones"

Enunciado: A partir de un sitio existente en la red elegido por cada estudiante, desarrollar una aplicación transaccional a manera de "pop up".

Valor: 5%

Entrega:Una justificación escrita del proyecto (1 pg). Diagrama de flujo y aplicación pop up funcional.

Referencias web:
Documento sobre diagramas de flujo en: http://www.jjg.net/ia/visvocab/spanish.html

Entrega ejercicio 1

Estos son los url resultantes del ejercicio 1, el martes 1 de agosto estaremos publicando las notas en el blog de cada uno.

Kinetoscopio digital, Camilo
Buen Vivir, Carol
Mecánica Popular, Esteban
National Geographic, Laurie
Cicuta, Mateo
How, Rios
Cambio, Daniel

Correcciones al ejercicio 1:

Kinetoscopio digital, Camilo
Buen Vivir, Carol
Mecánica Popular, Esteban
National Geographic, Laurie
Cicuta, Mateo
How, Rios
Cambio, Daniel

¡Vínculos obligados para todos!
Color: http://www.colourlovers.com/

¡Bienvenidos!

Los invito para que comentemos todo lo que quieran sobre este primer ejercicio, para que compartamos links, ideas sobre el documento o dificultades en el desarrollo del ejercicio. No olviden llenar su perfil. Estamos conectados :-)

Ejercicio 1: "De lo impreso a lo digital"

Enunciado: A partir de una revista impresa, (escogida por cada estudiante) desarrollar una propuesta para esta publicación en la red. Dicha propuesta debe hacerse enteramente con texto a excepción de los encabezados y el cabezote.

Valor: 10%

Entrega:Una justificación escrita del proyecto (1 pg). Desarrollo de una de las ramas del mismo (tres niveles completamente funcionales) montados en la web.

Referencias web:
http://www.alistapart.com/
http://www.8020publishing.com/
http://www.academycastle.com/
http://www.acceptancerock.com/
http://applestooranges.com/
http://www.badboy.ro/
http://www.markboultondesign.com/
http://www.onetwentysix.com/
http://www.pre-voce.com/
http://www.pre-voce.com/ /* es flash pero el layout funciona