Diferencia entre revisiones de «Taller de Construcción DG 4 - 2010»

De Casiopea
Línea 396: Línea 396:
El avance individual debería estar en la Wiki también. En el grupo de construcción como una página nueva de cada uno.
El avance individual debería estar en la Wiki también. En el grupo de construcción como una página nueva de cada uno.


<nowiki><pre>[[Nombre Apellido: Sitio Escuela | Sitio Escuela]]</pre></nowiki>
<pre><nowiki>[[Nombre Apellido: Sitio Escuela | Sitio Escuela]]</nowiki>
 
</pre>
Por ejemplo, se pueden ver colecciones de cosas semejantes. Audios y texto, videos y texto en una galería, etc.
Por ejemplo, se pueden ver colecciones de cosas semejantes. Audios y texto, videos y texto en una galería, etc.
Otra idea es que cada alumno tenga su propio portafolio.
Otra idea es que cada alumno tenga su propio portafolio.
Línea 404: Línea 404:


La documentación para la organización de información en fundamental.
La documentación para la organización de información en fundamental.
Cómo se ven las cosas desde dentro para fuera.
Cómo se ven las cosas desde dentro para fuera: eso es lo '''auto-poyético'''. Una estructura auto-poyética. El fin mismo de eso es su propia identidad.  
Eso es lo auto-poyético. Una estructura auto-poyética. El fin mismo de eso es su propia identidad.  


Para todas las clases hay que traer un avance semanal del proyecto que cada uno va a presentar. Lo importante es la continuidad. Poner la hora y fecha con que subimos los archivos.  
Para todas las clases hay que traer un avance semanal del proyecto que cada uno va a presentar. Lo importante es la continuidad. Poner la hora y fecha con que subimos los archivos.  
Línea 422: Línea 421:
Para la próxima semana tener su propio modo de hacer las cosas.  
Para la próxima semana tener su propio modo de hacer las cosas.  
Tener una carpeta mejorada.
Tener una carpeta mejorada.
--[[Usuario:Plopezb|Plopezb]] 04:53 19 jul 2010 (UTC)





Revisión del 09:07 13 jun 2011


Asignatura(s)Construcción de Diseño Gráfico 4
Año2010
Tipo de CursoTaller de Construcción
TalleresDG 4º
ProfesoresHerbert Spencer
Profesor(es) Ayudante(s)Dámaris Sepúlveda
EstudiantesSofía Savoy, Eleonora Aldea, Paula Mancilla, Francisco Vera, Gley Riquelme, Consuelo Miranda, Waldo López, Javiera Albornoz, Javiera Burgos
Palabras ClaveDiseño Centrado en las Personas, Prototipado Rápido, Diseño Front
Carreras RelacionadasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.

Estudiantes



Todos los alumnos deben registrarse en la lista de correo oficial del taller.


Proyectos de Construcción

Clases

Clase 1, Introducción

  • Fecha: Martes 29 de Junio de 2010
  • Palabras Claves: Complejo Editorial Digital, Base de Datos Servidores, ead, Mapas de Navegación,Construcción,Diseño Gráfico

INTRODUCCIÓN AL TALLER DE CONSTRUCCIÓN

Espacio de Trabajo: Complejo Editorial Digital

El Taller de Construcción, define como espacio de trabajo, los servicios web de la Escuela, los cuales se componen por una articulación de distintos servicios que esta otorga, por lo que podríamos decir que contamos con un partido editorial abierto.

En principio, estos sitios, se componen del registro realizado por la gestión única de los usuarios, colaboradores para construir una comunicación efectiva.


Del Usuario: la Base de Datos

Al existir esta gestión única, definimos a un usuario, personas, las cuales deben estar bien modeladas para la creación de la comunicación.

Esta Base de Datos de Usuario o Single Sing On (SSO), define una tabla de personas que componen con diferentes privilegios de edición, el cuerpo de colaboradores/participantes de este servicio. La Escuela, plantea por diferenciación desde su poética, que el usuario al registrarse pase a ser "persona", como el pueblo de estorninos que conforma el cuerpo de la Escuela; bien esto se grafica en la portada del sitio de Personas.

Las bases de datos convencionales, crean registro de usuario en cada uno de los servicios que esta otorga; por el contrario, acá se crea una base de datos única, sin duplicados ni torpezas, que permite acceso a todos los derivados del sitio "madre" siendo un mismo usuario todo el tiempo, conservando los privilegios estipulados.

Así, definimos un complejo editorial cuyo valor, recae en la participación, definida por límites de permisos en la gestión, por medio de los roles de suscripción, ya sean de administrador, autor, colaborador, seguidor, etc.


Jerarquía de Sitio


El Sitio de la Escuela, se define desde una jerarquía previa PUCV, dando orígen a distintos subsitios provenientes del dominio, como lo son Casiopea, Travesías, Personas, etc.


Encargo

Realizar el Mapa de Navegación de los Sitios y Subsitios de la Escuela, mostrando las relaciones existentes entre ellos.


ENLACES

Jesse James Garret - Elements of User Experience extractos


Clase 2, sitio web de la escuela

  • Fecha: lunes 5 de Julio de 2010
  • Palabras Claves: Complejo Editorial Digital, Base de Datos Servidores, ead, Mapas de Navegación,Construcción,Diseño Gráfico


Navegación

Se entregan las tareas correspondientes a la clase, mapa de navegación del sitio ead.pucv.cl) [1]; se indica que deben ser horizontales y la profundidad son los clicks.

Documentación

Para el ramo se entregan tares y la documentación necesaria para que alguien desarrolle un proyecto digital.


Sitio web de la escuela

Se indica que los mapas de navegación se realizan de forma horizontal, y la profundidad va indicando los números de clicks. Es una situación editorial en que hay diferentes personas a cargo de los contenidos (autores), la idea es encontrarse con esta colección de sitios, darse cuenta de los subconjuntos.

Se debe conocer a las personas (audiencias) y sus patrones mentales para que sea funcional (usable), aunque esto no significa que se pierda "lo poético"

Existen contenidos que sólo la gente de la organización conoce, se hace transparente al público.


Google analitics

Revisamos las estadísticas de navegación del sitio, esta información más el conocimiento del público, es necesario para caracterizar a los usuarios. Según estos datos, el texto de Alberto Cruz, acerca de la observación, es lo más visitado del sitio.

Comportamiento de navegación

Se revisa el número de visitas y su fecha correspondiente; el sitio exige al lector permanecer más tiempo. Diseñar textos que sean "escaneables" (negritas, encadenar ideas, etc).

Público

En general el sitio esta orientado a personas que se "apasionan" por los temas; el público es gente externa a la escuela que desea informarse de las becas, aranceles y planes de estudio, y además gente que pertenece a la escuela, además de diseñadores y arquitectos.

Debemos anotar los públicos y los contenidos, como una teoría de conjuntos; darse cuenta de que contenidos están y no son tan importantes y cuales faltarían.

Los artículos deben ser "encontrables", la gente no llega por la URL a las cosas.

En el sitio web las páginas fijas tienen un traductor de google.

Panel de wordpress

En el sitio de la escuela hay un grupo de editores, no usa el sistema piramidal, la utopía de las cosas "hecha por todos"

La etiqueta / taxonomía / card sorting Existe una estructura de etiquetas piramidal, donde cada cosa tiene un padre, y una no piramidal, con jerarquías traslapadas.

  • Las páginas son: piramidales
  • Los post son: con etiquetas (jerarquías traslapadas)

Navegar de forma semántica

La folcsonomía son las catalogaciones colectivas,[2] y la taxonomía es el lenguaje oficial [3]

  • Extracto: lo que aparece cuando se lista (por ejemplo el extracto de la noticia), en caso de no escribirse, toma por default una cierta cantidad de caracteres.
  • Trackbacks: remite a la fuente, cuando se cita a otro en un artículo.
  • Campo personalizado: pone un valor más a la entrada, tiene que ver con los plug in del sitio.

Encargo

Con el mapa de navegación (en este formato plegable, con espacios), hacer el análisis correspondiente; hacerse las preguntas:

  • ¿quién lee este contenido? (público, para los diferentes contenidos)
  • ¿Dónde hay oportunidades de diseño?

La próxima semana se debe traer una propuesta de diseño de acuerdo a lo inferido, (qué contenidos faltan o están demás), con un argumento, fundamento (estadísticas) que respalden la propuesta.


Enlaces

  • Jesse James Garrett, vocabulario visual [4]
  • "Qué es la observación" de Alberto Cruz [5]es la página más visitada en el sitio de la e.[a.d]
  • Libro "Tienes 5 segundos" de Juan Carlos Camus [6]

--Javieraconstanza 04:15 7 jul 2010 (UTC)


Clase 3 , Semantic Media Wiki

  • Fecha: Lunes 12 de Julio de 2010
  • Palabras Claves: Web Semántica, Media Wiki colaboration, Metalenguaje, Ontología,Construcción,Diseño Gráfico


Como profesor invitado Rodrigo Moya nos presenta conceptos y elementos básicos para comprender las extensiones semánticas de MediaWiki.

¿Semantic Media Wiki?

Semantic MediaWiki (SMW) es una extensión de MediaWiki que incorpora las características de una Web Semántica a una wiki (caracterizada por la libertad de acción que poseen los usuarios tales como editar, crear y borrar páginas). Esta extensión ayuda a buscar, organizar, evaluar y compartir el contenido de manera no tradicional. Mientras las wikis comunes sólo contienen texto que los computadores no pueden entender ni evaluar, SMW utiliza anotaciones semánticas que permiten darle sentido a los textos en base al procesamiento natural de nuestro leguaje.

Sentido de Colaboración

La característica colaborativa de una wiki se basa en una "comunidad de trabajo" compuesta por conceptos, lenguaje, grupos de usuarios y un software. Ward Cunningham, el desarrollador del primer software wiki llamado WikiWikiWeb, lo describe como "the simplest online database that could possibly work".

La efectividad del trabajo colaborativo en wikis desplaza en cierta forma el uso de los emails para realizar tareas en grupo. Esto se debe a que la forma de administrar la información es más ordenada y sencilla cuando muchas personas trabajan sobre una misma plataforma que todas trabajando sobre diferentes archivos.

Email v/s Wiki Collaboration










Una gran desventaja que presenta este sistema es el exceso de libertad, muchas veces mal utilizada por el público produciendo vandalismo, violación a derechos de autor y promoción a ideologías políticas. Además el buscador de conceptos es limitado y el mismo público no participa a la debida descripción semántica de los artículos.

Elementos que necesitamos para instaurar en nuestro pc una wiki: computador, cualquier sistema operativo, softwares (Servidor, PHP y MySQL).

Web Semántica

Una Web semántica se basa en la idea de añadir metadatos semánticos y ontológicos a la red para que las máquinas procesen nuestro lenguaje describiendo contenidos, significados y las relaciones de los datos como lo hacemos habitualmente.

Tecnologías Involucradas

  • XML (Extensible Markup Language): Metalenguaje extensible en base a "etiquetas".

<persona>
   <nombre> </nombre>
</persona>


  • XML Schema: Lenguaje de esquema que da formato, estructura y restricciones a los contenidos de un documento XML de manera muy precisa.

<persona>
   nombre: obligatorio
</persona>


  • RDF (Resource Description Framework): Corresponde a una colección de triplas que forman grafos. Se utilizan expresiones con la forma sujeto-predicado-objeto.
  • Ontología: Esquema conceptual muy riguroso, puede expresarse como un vocabulario fijo para referirse al mismo tipo de cosas. Es la base de la Web semántica.
  • OWL (Ontology Web Language): Es un lenguaje de ontología que tiene como objetivo facilitar un modelo de marcado construido sobre RDF y codificado en XML.
  • Semantic Forms: Es una extensión de MediaWiki que permite a los usuarios añadir, editar etiquetas semánticas a los artículos sin necesidad de programar. Los formularios pueden ser creados y editados no sólo por los administradores, sino también por los propios usuarios.
  • Tesauro: Listado de palabras o términos empleados para representar conceptos.

Región

  Capital Regional

      Ciudades

Construir una SMW

  • Tener instalado MediaWiki con SMW.
  • Estructurar la información.
  • Crear propiedades, buscar normas y ontologías.
  • Crear Templates (plantillas).
  • Crear Formularios.

Revisar la sección de Páginas Especiales

Crear una Propiedad

Un ejemplo para crear ordenadamente la propiedad "persona".

Propiedad Persona
Propiedad Tipo Extensión
nombre texto tiene_nombre
apellido texto tiene_apellido
fecha nacimiento date tiene_fec_nac
genero texto tiene_genero
email texto tiene_email


--Jabu 06:21 15 jul 2010 (UTC)

Referencias



Clase 4 , Audiencias, Orden de Contenidos y Revisión de Propuestas


1. Organizar contenidos del sitio.

  1. . Las Audiencias (se identifican)
  2. . Los Contenidos (se organizan)

Cómo uno construye certezas para definir una forma?

Tenemos herramientas para conocer las audiencias y los contenidos.

Una idea es fijarse en el lenguaje con el que se comunica el sitio. Hay veces en que el sitio se dirige más a personas que saben sobre la escuela, y no a gente que quiere saber sobre la escuela. Volviendo al tema del lenguaje, que en el fondo se encuentra entre las audiencias y los contenidos, tiene que tener cierta consistencia. Que no evidencia trizaduras.

Unificar el lenguaje universal: las relaciones del texto con imagen, cierta edición de redacción según los contenidos, etc. El que está encargado de eso es el diseño visual. El diseño web final tiene que ver con la coincidencia de datos, qué tan citado está un texto, etc. Hay contenidos que se ven asociados en una barra lateral, se favorece con que la persona tenga una continuidad en el soporte. ¿Qué herramientas tenemos para conocer las audiencias?

Una buena forma fue haber buscado sobre la escuela para ver de qué habla la gente y qué es lo que busca. El fin es ver qué es lo que la página tiene que no le entrega bien a la gente.

Otra opción es ver los modelos para ver cuál es la idea final para diseñar algo.

La gente que escribe en Internet, que genera contenido, es un porcentaje muy marginal. Tienen un perfil, y toda una forma que demuestra interés.

No se puede generalizar lo que aparece en Internet. Es una situación muy compleja.

Dentro de los sitios hay algo que son los tesauros. Cada post tiene mínimo y como requisito un autor. A veces se crean autores ficticios para poder publicar un documento. Otra herramienta son las entrevistas y las encuestas. Luego se revisan los modelos de personas. A partir de ellas se definen personas y se diseñan partituras de interacción.

¿Qué herramienta conocemos para ordenar los contenidos?

Una opción es el Card Sorting o diagramas de afinidad. Se basa en escribir notas con las palabras claves. Luego se hace un brainstorming, en donde se ordenan esas palabras claves de la manera que más adecuado resulta para cada uno. Entonces se llega a un consenso.

Esto es para ver qué es lo que espera la gente. El espacio de la anticipación. Antes de meterme en algo que reconozco que va a enlazar. El diseño de front es cómo yo construyo algo.

Es necesario identificar qué tipo de proyecto queremos plantear.

Parte de los contenidos son:

  • Textos
  • Fotografías
  • Dibujos
  • Esquemas
  • Mapas

Los textos también son una superficie de comunicación. Dentro de una oficina tiene que haber alguien que sea muy bueno generando contenido. Alguien que sea bueno en lo que dice y cómo lo dice. Volvemos a recordar las capas del diseño. Hay que saber cómo organizamos cosas, de repente con empresas y el público de la empresa.

La usabilidad es para la gente que entra a un sitio por primera vez.

Hay herramientas digitales para construir los contenidos. Websort.net Construye un estudio, hace una lista de todas las cosas y manda un correo electrónico a sus usuarios y te puede organizar las cosas en un árbol. Automatiza las cosas. El mapa de la estructura ha pasado por todo eso.

(jQuery)

java script es un lenguaje que permite tenr un lenguaje

Cascadas de estilo es un lenguaje de marcado. Al hacer javascript se está empezando a programar. Se parece a processing.

Creately.com es para hacer url, mapas de línea, etc.

El avance individual debería estar en la Wiki también. En el grupo de construcción como una página nueva de cada uno.

[[Nombre Apellido: Sitio Escuela | Sitio Escuela]]

Por ejemplo, se pueden ver colecciones de cosas semejantes. Audios y texto, videos y texto en una galería, etc. Otra idea es que cada alumno tenga su propio portafolio.

Contenido y presentación visual son las consonantes que mandan hoy.

La documentación para la organización de información en fundamental. Cómo se ven las cosas desde dentro para fuera: eso es lo auto-poyético. Una estructura auto-poyética. El fin mismo de eso es su propia identidad.

Para todas las clases hay que traer un avance semanal del proyecto que cada uno va a presentar. Lo importante es la continuidad. Poner la hora y fecha con que subimos los archivos.

Primero tener antecedentes, tablas de contenido, etc. Luego hacer el ejercicio con los usuarios.

Cómo tomar las cosas, hacer un abstract o los links, etc. Ver cómo se puede generar un rediseño del sitio, pero cómo se toman las cosas desde otro sitio para llevarlo al sitio de la escuela.

Hay cosas que implican arquitectura de información. Ordenar los contenidos. Las categorías son ordenadas por tags.

Mandar un mail con username de Personas, para dar acceso de administrador al sitio alfa. Ese username es el mismo de todo. Para la próxima semana tener su propio modo de hacer las cosas. Tener una carpeta mejorada.


Clase 5m, Sitio e[ad]Alfa

  • Fecha: Lunes 19 de Julio de 2010
  • Palabras Claves: e[ad]α, Wiki, ead.

Construcción,Diseño Gráfico

ENCARGO

Documentación

Es importante tener el registro en la wiki para ver el avance de cada proyecto. Para esto, cada alumno debe nombrar su proyecto en la lista del Taller de Construcción(nombre del proyecto, por Nombre del alumno).

Seminario: Espacio, Lenguaje y Forma

Se quiere llegar a crear instancias de Seminarios en cuanto a la Arquitectura y el Diseño como un solo oficio (como un programa de doctorado). Este seminario se iniciará dentro de un mes, comenzando con el dueño de la Oficida DDO, oficina que trabaja con mapas conceptuales. Esta es una oportunidad como taller para generar instancias de esta índole.

e[ad]α

Trabajaremos en el sitio alfa de la escuela para los proyectos, e[adα], enviando nuestro nombre de usuario en la wiki a herbert, nos hará administradores del sitio. A partir de esto haremos pruebas de diseño.

Al iniciar sesión como administrador, se tiene acceso al escritorio del sitio. Consta de un menú principal que se desglosa en:

  • Entradas: son artículos escritos por distintos usuarios del sitio pertenecientes a la escuela. Se les añade categorías y etiquetas.
  • Muldimedia: son los archivos subidos (trabajos en conjunto)
  • Enlaces
  • Páginas
  • Comentarios
  • Apariencia
  • Pluggins: Necesitan siempre ser actualizados. Algunos pluggins son:
    • Akismet: revisa spams y bloquea.
    • All in One SEO Pack: optimiza el sitio para estar mejor rankeado en los buscadores.
    • authorSearch: para buscar autores. Búsqueda de contenidos o artículos de un autor.
    • Co-Authors: añade autores
    • HTML Page Sitemap: genera un mapa a través de todas las páginas. Es el árbol del sitio.
    • Lightbox Plus: se anima a través de las fotos.
    • Login LockDown: evita que la gente por fuerza bruta entre al sitio.
    • Redirection: contenido que se redirecta.
    • Regenerate Thumbnails: regenera miniaturas.
    • rsThumbs4post: crea miniaturas a las páginas. Selecciona una imagen que representa al post. (acaba de quedar obsoleto).
  • Usuarios
  • Herramientas
  • Opciones
  • Contact
  • Gallery
  • Gallery(Smooth)
  • StatPress

Encargo

A partir de este sitio α tomaremos un tema (que tenga que ver con cada proyecto) y lo modificaremos. Otro tema importante es el rediseño de la Wiki y generar catastros semánticos y categorizar la información.

Los contenidos digitales son presentados a través de fuentes que son dinámicas. Es bueno de que en una portada florezcan contenidos que calcen armónicamente. Cada alumno debe tener un grado alto de autonomía. Se debe investigar y construir perfiles del usuario.

--paulamancilla


Clase 6 , Revisión de Propuestas

  • Fecha: Jueves 22 de Julio de 2010
  • Palabras Claves: Desarrollo de prototipos, Comunicación y la web, Herramientas de comunicación en la web, Construcción,Diseño Gráfico

desarrollo del proyecto

Se habla del propósito del rediseño del sitio, que tiene como finalidad ser una herramienta para generar comunicación con la comunidad. Para que esto suceda se debe plantear una estrategia, ya que el rediseño de la cáscara o interfaz visual del sitio es el reflejo de un proceso.

Este proceso se ve desarrollado a través de una metodología de trabajo, que implica por un lado el estudio de la audiencia y el medio y esto lleva al desarrollo de prototipos.

Teniendo que nosotros somos los usuarios del sitio, poseemos un grado de conocimiento de la audiencia y de cómo esta se comunica con el medio.

Al desarrollar el proyecto tomar en cuenta:

  • Se debe construir un discurso.
  • Un rigor metodológico que no requiere de un pasado en limpio va afinando este prototipo.
  • Tener en cuenta que hay cosas que ya tienen nombre.
  • Hay que tomar en cuenta la grilla y las proporciones, ver los patrones que sigue la estructura del sitio y sus categorías.

Referencia:

Rediseño de la BBC:

descripción proceso

sitio BBC

  • Uno de los errores que se cometen habitualmente es la duplicación de la información.Por lo tanto, debemos revisar que es lo que hay para poder evitar esta situación.
  • Todas las fallas del sistema deben estar consideradas.

Avanzar diseñando inmediatamente e ir afinando. Mientras más largo el proceso más fino puede llegar a ser el resultado.

Nuestro proyecto cuenta con una dimensión digital (wiki) y una dimensión impresa, y la importancia de esto es que la dimensión impresa actúa como evidencia del trabajo realizado y da cuenta física de un término, ya que la wiki no alcanza un término puesto que siempre se puede continuar editando.

Desarrollar el proceso de prototipado con Fireworks. Este programa cuenta con una serie de ventajas y desventajas:

Desventajas:

  • Es muy pesado
  • Trabaja con pixeles
  • Problemas con suavizado de texto

Ventajas:

  • Tiene control simultáneo de vectores y pixeles
  • Renderiza los vectores en bitmaps.
  • Útil para desarrollar gráficos de pantalla
  • Inteligente para optimizar visualización en formatos pequeños
  • Tiene sensibilidad con los pixeles.


Complementos para Firefox para deserrollo web:

  • Firebug: Permite visualizar el código html y css de los sitios, seleccionar secciones y modificar el código para hacer pruebas de visualización.
  • Web developer: Toolbar que permite activar y desactivar css, verlo por separado, etc.

Comunicación y la Web

Mediafranca es un proyecto que responde a la situación que aparece con la web, la proliferación de conectividad pero no de colectividad.

Esta proliferación de la conectividad genera una distancia epistemológica, esto significa que aquello que nos interesa modifica nuestra percepción del mundo. A esto hace referencia el concepto de postmodernidad, que nos dice que hay miles de relatos, no sólo uno.

La noción histórica nos habla que lo más próximo al final de la historia tiene mayor relevancia.

  • INFOCLOUD: Siendo esta una reunión de RSS su formalización es en archivo OPML. Este archivo (Outline Processor Markup Language) es de formato XML para esquemas

Estar informado es un tema crítico, por lo que se debe llevar a cabo una estrategia para mantenerse informado, a esto responde la aparición de herramientas:

Alltop (proyecto de Lowi Kawasaki)

netvibes

google reader

delicious

Al utilizar estas herramientas me vuelvo me vuelvo un generador de contenido por ser lector o receptor de la información y recomendarla a terceros.

Debemos tomar en consideración que las herramientas y plataformas son generacionales, ya que cada generación cuenta con sus propios códigos comunicacionales, es por esto que se debe tener una consciencia de las tendencias.

--Consuelo.miranda


Clase 7, Corrección de Propuestas


Proyectos para internet deben ser pensados para diferentes soportes. La información no solo está en los computadores, si no que la llevamos con nosotros en diversos soportes, los cuales cada vez son mas y diferentes. Por lo tanto hay:

  • Mas soportes
  • Nuevos contextos
  • soportes cada vez mas elásticos.

Tomamos como ejemplo, el IPAD, el cual es un nuevo soporte extremadamente elástico el cual cambia dependiendo de la situación del usuario. Para ver esto, entramos a la aplicación Flipboard. Esta consiste en una especie de revista que muestra noticias y páginas, las cuales se hojean y el contenido se distribuye en la pantalla dependiendo de como sea usado el IPAD, vertical o horizontalmente. En este nuevo soporte, se pierden los parametros del arriba y el abajo, lo cual nos pone en un nuevo contexto del uso de la pantalla.

El IPad trabaja con una grilla versátil para la distribución del contenido en diferentes situaciones

Diseñar para internet es mas crítico ya que debemos pensar en todas las condiciones a las que se somete un sitio. Nos encontramos con resoluciones y formatos.

En el caso del IPAD, todo está bajo la grilla que permite la versatilidad de la distribución del contenido. Debemos pensar en ella como algo que nos permita comportarse diferente en diferentes soportes. Ya hay patrones para esto, por ejemplo; hay un ancho máximo y siempre centrado.

Antes de diseñar debemos tener claro como funcionará todo y responderse preguntas como ¿qué pasará con los encabezados, las columnas y el contenido?

Esto es lo que proponemos y pensamos en la construcción de los wireframe.

También hay otros parametros establecidos como la ubicación de elementos como el buscador, el log-in, título y encabezados.

A comienzos del los 2000 aparece el sitio CSS Zen Garden. Éste es un proyecto de la W3C donde se trabaja un mismo HTML, lo que cambia solamente son las cascadas de estilo, de manera que demuestra lo que se puede lograr hacer con el trabajo de las cascadas. Fue un modo de evangelización para dar cuenta de la importancia de este trabajo. Podemos se trabaja el código y los mapas de divs con el complemento para Firefox, Firebug.

Imagencondigosbug.jpg
Esquema de divs


Términos:

  • body: elementos brutos que no tiene el HTML
  • Doc type: es cómo el browser va a interpretar la tipografía, si le decimos que la tipografía es Helvética, el browser lo entenderá así si el computador tiene ésta tipografía. Después ponemos Arial, de manera que si el computador no tiene Helvética, usará Arial, y si no tiene ninguna de las dos, pues le podemos decir que elija cualquier Sans Serif. Si no especificamos, el browser elegirá la que tiene determinada.
  • # conteiner: div que quiere decir "para todo esto"
  • # pageheader h2 span: cuando tenemos un título, pero en vez aparece su imagen.

En Quirks mode, podemos encontrar referencia de cascadas de estilo.

Para la construcción del diseño, primero debemos dibujar en papel, ya poder salirnos un poco de la estructura rígida de los sitios y crear cosas mas flexibles, nuestras propuestas están "arrinconadas". Luego, trabajar en Fireworks. En un principio tenemos el standard para diseñar en un espacio de 4:3, pero como vemos, esto está cambiando.

En el wireframe debemos mostrar las jerarquías visuales.


--Valentinaperez 20:00 30 jul 2010 (UTC)



Clase 8, Calendario de entregas,

Programación fin de Trimestre

El Contenido y la Forma tienen que llegar a un redefinición, para esto se tiene que poner a prueba los diseños de cada uno. Los wireframes y sus elementos deben estar enumerados. Cada número indica las diferentes funciones, para definir esto se deben hacer varias pruebas de wireframes y así lograr hacer maquetas de baja intensidad para llegar finalmente a diseño front

Al momento de tener definidos, mapas de navegación, wireframes, se tienen que poner a prueba. Para esto se deben crear diferentes tareas, fijar al menos tres, las cuales se "testearan" con diferentes usuarios y así ver el comportamiento de este y además ver en que se puede mejorar el diseño.

En cuanto a la grilla para los wireframes hay que salir de lo convencional, tratar de quebrar lo muy estructurado. Como también los elementos que constituyen el sitio evitar esquinarlos debido a que por lo general quedan algunas cosas que quedan "flotando".

--Diego Reyes Vielma



Clase 9,

Usuario:Alejandrasalinas

Clase 10,

Usuario:Javieraconstanza

Clase 11,

  • Fecha:Lunes 9 de Agosto de 2010
  • Palabras Claves: Javascript, Diseño de Interacción, Diseño de 4to orden, Diseño, Elisa Giaccardi, Educación,Construcción,Diseño Gráfico

Eleonora Aldea

Existen 4 niveles del Diseño. A partir del siglo XX, creció exponencialmente el Diseño y se encontraron dos problemas principales: la comunicación en masa, y la producción en serie. La comunicación en masa generó el nacimiento del Diseño Gráfico, y la producción en serie generó el nacimiendo del Diseño de Objetos. Con esta problemática parte el siglo XX. Se hace necesario una construcción de signosy símbolos, para la comunicación, ésto sería el Diseño de Primer Orden, diseñar la comunicación. El Diseño de Segundo Orden, sería no solamente diseñar el objeto, sino que el comportamiento que genera el objeto. El Diseño de Tercer Orden, vendría siendo el diseño de servicios, requiere una profunda comprensión de los dos primeros órdenes del Diseño.

¿Cuál es el sentido que tiene un diseño de interacción? Existen interacciones individuales con el objeto por parte de las personas.

Luego, existe el diseño del espacio donde esas interacciones ocurren, cuando se diseña en ese espacio ocurre la comunicación. Ése es el Diseño de 4to Orden.

En nuestra escuela partimos con el Diseño de ese cuarto orden, porque partimos con Arquitectura, con el gesto, con el habitar, y ese modo permeó cómo enfrentamos los diseños hacia abajo. Sin embargo en la escuela hay un eslabón perdido, el Diseño de Interacción, el cual no se enseña.

El problema del Diseño no parte por necesitar una solución, el problema es generar la COMUNICACIÓN, no se puede sólo generar una SOLUCIÓN.

Referencias