Bitacora Lista

40
Lenguaje Computacional

Transcript of Bitacora Lista

Page 1: Bitacora Lista

Lenguaje Computacional

Page 2: Bitacora Lista

Lenguaje Computacional

Indice

Page 3: Bitacora Lista

INDICE

Clase Fecha Diapositiva

CLASE 1 27 Junio 2008 d 4

CLASE 2 4 Julio 2008 d 7

CLASE 3 11 Julio 2008 d 10

CLASE 4 18 julio 2008 d 12

CLASE 5 25 Julio 2008 d 14

CLASE 6 1 Agosto 2008 d 18

CLASE 7 8 Agosto 2008 d 20

TAREA 1 Colores en bits d 23

CLASE 8 22 Agosto 2008 d 29

TAREA 2 Cascadas d 31

Page 4: Bitacora Lista

C L A S E 1 27 Junio 2008

Page 5: Bitacora Lista

C L A S E 127 Junio 2008

La mutación del diseño - del ofi cio. A su vez debe mutar el espacio de impacto del ofi cio. Todo debe reinventarse. No se es funcionario del diseño, se vive como tal - quien esta ena-morado del ofi cio no conoce otro modo de vi-vir.

“No sirven tan solo las alas para volar”Charles Darwin

Reinventarse, buscar nuevas fronteras: ¿lo digi-tal? Resultado heredado de un sistema previo y manual. Nuestro ofi cio se alimenta de todo aquello que le pasa al mundo, es una suerte de esponja: No puede haber un diseñador incul-to. El diseñador como traductor, es quien logra una decodifi cación.

La equivocación como parte del aprendizaje “miente ahora y equivocate en el futuro”.

Hacer estrategia para el diseño. Estrategia digi-tal - como ellos pueden digitalizarse.

Requisitos para el Tallerwww.losdigitales.comlenguaje1.wordpress.comwww.slideshare.comwww.twitter.comwww.fl ickr.com

Estrategia

Proceso metodológico del diseño centrado en el usuario.

Set Evocado: construir un espacio para ser recordado en la memoria de los usuarios- coca cola, fanta, sprite.

Metodología

EstrategiaEstudio de UsuariosArquitectura de la InformaciónDiseño VisualDiseño Font (producción)

Acompañamiento Ciclo- supera estadios

transversal

Page 6: Bitacora Lista

C L A S E 127 Junio 2008

BENCHMARK

Analisis comparativo para poder encontrar las ventajas y desventajas comparativas.

Ver que sirve y lo que es un error desde la com-petencia. Obtener información no solo de la competencia, si no que del universo por el cual se mueve mi target.

BRIEF

Catastro - desde quién se quiere hacer para el quién, sus herramientas, etc. Permitiendo la creación del puente, hacerlos dialogar.

El brief es una declaración de intenciones.- pequeñas vinculaciones, a pesar de haber mil cosas similares dentro de las diferencias.- busco el mercado objetivo; a quien le quiero decir lo que busco decir.

BUSQUEDA DEL TARGET

Conversaciones guiadas - como ya tengo el brief, reconozco las necesidades. Y lo analizo capciosamente.

El diseño tiene un componente emocional muy fuerte, y a su vez un componente técnico: para conversar y cautivar al cliente: la fuerza argu-mental.

COACHING

Explico y convenso al cliente que no sabe- suer-te de curso de aclaración y explicación. Educar a los clientes.

Hay una interrelación de uno en el otro.

Page 7: Bitacora Lista

C L A S E 2 4 Julio 2008

Page 8: Bitacora Lista

C L A S E 24 Julio 2008

Estrategia de Diseño Brief Tabla Gantt Entrevistas Modelos y Escenarios Benchmark Wireframes

Un proyecto de diseño gráfi co tiene por tarea construir algo para construir comunicación.

Diseño centrado en el usuario: USER EXPERIENCE.

Las piezas de diseño requieren de una meto-dología.

De la IDEA al DIBUJO - Contar a otros una idea desde el dibujo.Infografía: permite retratar un proceso- No es solo vender un “mono”.Darle vida a algo que va a estar vivo.

El diseño es capaz de construir una comunica-ción afectiva con el usuario.

Ampliados de los Productosdiseño / publicidad

Objeto de Diseño: ser vivo.

Transformo el soporte - un modo de construir una conversación con el usuario.

Diseño de Interfaz- Helicoide.

ESTRATEGIA

Compromiso del Cliente: el encargo.

BRIEF: El cliente cuenta de modo escrito los ob-jetivos del proyecto; se comienza a crear una relación técnica con el cliente. Busco el respon-sable. Objetivos concretos, recursos, contexto, fi nalidad, usuarios a trabajar - Escrito y DECLA-RADO por el cliente.Rico en información puntual de los targets.

Antes del mono: ESCUCHAMOS.Sutilezas frente al requerimiento.

TABLA GANTT: Asignación de Tareas para en el tiempo y con responsabilidades y respon-sables. Distribución del tiempo, relacionado al proyecto y a las personas responsables. BENCHMARK: Herramienta que hace un levan-tamiento de ventajas y desventajas frente a la competencia.

Analisis de la Competencia.

Page 9: Bitacora Lista

C L A S E 24 Julio 2008

Criterios determinados que se construyen con el cliente.

Criterios TRANSVERSALES

1000 Palta 100 Bencina 50 Hora Hombre 1150 + utilidades Total (oferta)

1800

Desiciones de DiseñoNO para COPIAR algo a alguien.Concluyo debilidades, fortalezas, amenazas: decido en base a lo estudiado.

“Tenemos” ----- tu y yo cliente y yo ------

Page 10: Bitacora Lista

C L A S E 3 11 Julio 2008

Page 11: Bitacora Lista

C L A S E 311 Julio 2008

Imagen Corporativa: generación de identidad amplitud de medios (disponibilidad del logo) coherencia, legibilidad.

Imagen Corporativa distinto de Logotipo

posiciona en la mente del consumidoruna imagen Dialogo

Ser ANFITRION

Un facotr fundamental de la Imagen Corpora-tiva es el logotipo - cómo me ven

Lo primero es lo que quiere escuchar el clien-te; al igual que en un curriculum- la compe-tencia, lo que resulta competente.

ESTUDIO DE COMPORTAMIENTO DEL USUARIO

Subjetividad del gustoEl diseño no es arte, es un puente para que otros conversen.

Entender, motivaciones, necesidades, como hablar mis clientes. FUNDAMENTAR

Evidencias abstractas para construir un proyec-to- fundamentos para decirle a alguien algo.

ADECUO el producto a la necesidad del cliente

Al digitalizarse el diseño se transforma en un investigador de la conducta humana.

Relaciones interdiciplinarias- complementarei-dad.

Necesidad de respuestas- Mantener el foco del proyecto. Generación de puentes. Entiendo al usuario fi nal.

Propuesta de Valor - Agrego VALOR al proyecto

Page 12: Bitacora Lista

C L A S E 3 11 Julio 2008

C L A S E 4 18 Julio 2008

Page 13: Bitacora Lista

C L A S E 418 julio 2008

USABILIDAD ¿cientificar el diseño?

La usabilidad como parte de la estrategia de diseño- COMPROBAR - Test, Pruebas.

La sociedad toma tiempo en adquirir los cam-bios: la problematica de las artes y el diseño- la Bauhaus.

FUTURE DESIGNObservación del usuario para ver como reem-plaza los objetos por objetos de diseño; es de-cir ¿Qué puedo diseñar yo para su vida? Para responder, debo OBSERVAR.

USABILIDAD: RE_DISEÑO

factores de la ciencia: prueba y error.

Diseño / IngenieriaEstetico Emocional / Funcional

(uno por otro)

Evaluacion de un producto:a/ Heuristica: criterios de medidab/ Test de Usuarios: probar el producto frente a sus potenciales usuarios.c/ EyeTracking: donde el usuario posa la mira-da (reconocimiento de focos de atención).d/ Accesibilidad: capacidad de los diseños de ser adquiridos por más personase/ ExpertReview: se testea el producto con personas que saben de que se esta habland, criticando con mirada experta.

Usabilidad- ReDiseño

bauhaus

Page 14: Bitacora Lista

C L A S E 5 25 Julio 2008

Page 15: Bitacora Lista

C L A S E 525 Julio 2008

ARQUITECTURA DE LA INFORMACIÓN

Edward Tufte - diseñador y estadisticowww.edwardtufte.com Irrupcion en los medios digitales - el pc es capaz de manejar infinitamente más infor-mación que el cerebro humano.

Batalla de Waterloo- Napoleón falló por no te-ner información. Desde siempre la información es fun-damental para la toma de DECISIONES.

Tafte: Información para decidir cosas.

DATO pasa a informaciónDATO pasa a diseño

Transformó el dato en información, pero para los medios digitales no resulta suficiente; como transforma el diseñador la información en comunicación.

¿Qué sirve? ---- Eso determinó Tafte

Necesito transformar la información en comu-nicación - Nuevas Fronteras.

En base de unidades discretas, elementos de diseño conectados entre si, para construir

datos específi cos que entrecruzados e interac-tuando entre si, crean la comunicación efi caz.

WIDGETS

Información en base a datos que se grafi can e ilustran; existe una asociación iconográfi ca que grafi ca lo comparativo.

Evidencias hermosas que son registro de su información.

No basta con que el diseño sea efi ciente

Relacion emocional del producto y el servicio entregado

Page 16: Bitacora Lista

C L A S E 525 Julio 2008

Metro de Londres <Underground>

Atributo fundamental, es que quien los dise-ñó conocía en cabalidad todos los túneles que lo recorrían. Hay una interpretación de la ex-periencia.

Acercarse a la experiencia de diseño del usua-rio. No puedo exigirle desde el diseño, debo incorporarlo(me) a su diseño.

ARQUITECTOS DE LA INFORMACION

Jesse James Garret“Usar un sitio web que no conoces es tan pe-noso como salir con una niña que no conoces”

La manera de organizar el contenido

Procesode la información desde ñas personas y como construyen relaciones entre los ele-mentos.

Los elementos de la experiencia del usuario.

Protocolo de dibujos para hacer mapas de navegación.

Lo visual tiene un antes bastante trabajoso.

USUARIO: poder gobernar el sistema

No se busca renovar, se busca INNOVAR

Louis Rosenfeld“La arquitectura del diseño es la cola que mue-ve al perro”

Me encuentro con las tecnicas y herramientas, algo importante y valioso por si mismo.

Page 17: Bitacora Lista

C L A S E 525 Julio 2008

Peter Morville“La arquitectura de la información es casi in-visible”

Cuando pasa desapercibida, es que esta bien hecha.

Nathan Shedroffwww.nathan.com

Diseño de la Experiencia

Una buena experiencia ENRIQUECE al diseño.

Richard Saul Wurmanwww.wurman.com

Page 18: Bitacora Lista

C L A S E 3 11 Julio 2008

C L A S E 6 1 Agosto 2008

Page 19: Bitacora Lista

C L A S E 61 Agosto 2008

PDF- Portable Document Format - Formato Portatil de Documento

Formato de Almacenamiento de documentos desarrollado por Adobe-Systems.

Es de tipo compuesto- imagen vectorial, mapa de bits y texto.

Pensado para documentos para ser impresos, ya que especifica toda la información necesa-ria para la presentación final del documento. Como va a quedar- no requiere proce- sos de ajustes o maquetas.

Cada vez s usa más como especificación de vi-sualización, ya que da gran calidad a las fuen-tes usadas; otorga facilidades para el manejo de documentos como búsqueda, hiperenla-ces, etc.

PDF: Caracteristicas

a/ Multiplataforma: puede ser usado en los principales sistemas operativos - Windows, Linux/Unix, Mac- sin modificar la estructura original del documento.

b/ Integración: integra cualquier combinación de texto, gráficos, imágenes, incluso música.

c/ Extensión: es de los formatos más usados en internet para el intercambio de documen-tos.

d/Especificación Abierta: se ha generado he-rramientas de Software Libre que permite crear, visualizar o modificar documentos en formato PDF. Por ejemplo, el Open-Office.

e/ Protección: puede cifrarse para protegerlo, incluso firmarlo digitalmente.

f/ Estandar ISO: (ISO 19005-1:2005) para fi-cheros contenedores de documentos elec-trónicos con vistas a su preservación de larga duración.

Page 20: Bitacora Lista

C L A S E 7 8 Agosto 2008

Page 21: Bitacora Lista

C L A S E 78 Agosto 2008

Pingback- enlace de sitios - Vincular

Lenguaje técnicoel lenguaje enriquece las cosas, les da valor y claridad.

http - Protocolo de transmisión de hipertextohttps - Secure/safe

Scanner - reflectante / película Reflectante: 1 luz - libro Película : 2 luces - negativo

OCR: lectura de tipografías el texto puede ser editado

Tipo de imágen - generación del color

a mayor cantidad de bits, más información tie-ne el archivo.

RESOLUCIONppp- puntos por pulgadas (dpi)

Escalar una imagen: 10 20 10 20

Debo escanear a 600 dpi, si quiero que quede en 300- relación proporcional entre las partes para escalar.

Page 22: Bitacora Lista

C L A S E 78 Agosto 2008

la imagen debe siempre ser escalda al minuto de escanear, ya que si despues se hace esto en programas de edición de imagen, por resulta-do dará una imagen desvirtuada en relación a la original.

HISTOGRAMAInformación técnica de los claro/oscuro y me-dios tonos que tiene una imagen.

Scanner - lo más fiel a el original.tramados: líneas por pulgada LPI lines per inchdestramar -deslinear

restauración del color: fotos deslavadas

LPI es el acrónimo de Lines Per Inch, que en inglés significa “líneas por pulgada”.

Las LPI se utilizan como medida de la resolu-ción de un sistema de lentes o de un medio, como la película o el papel. Cuantas más lí-neas puedan discriminarse, mayor será la niti-dez de la imagen, y por tanto la resolución.

Obtenido de “http://es.wikipedia.org/wiki/LPI”

Medida utilizada junto con dpi para determi-nar la resolución de una imagen impresa tra-mada.

Mide el número de líneas por pulgada de la retícula de la trama.

Densitómetro: densidad de carga del color impreso.

FORMATOS GRAFICOSjpg tiff esp gif png ran

dependen de como de va a comportar la ima-gen.jpg/gif: pérdida de información de la imagen

Tif: más fiel y rico en cuanto a información que contiene la imagen. “Para grandes procesos pro-ductivos” usar tif

escaner de cama

Page 23: Bitacora Lista

C L A S E 3 11 Julio 2008

T a r e a 1 colores en bits

Page 24: Bitacora Lista

colores en bits

Page 25: Bitacora Lista

Espectro de color en pantalla. Resolución o profundidad de color La pantalla de los ordenadores utilizan el modelo de color aditivo, es decir, RGB, y transmiten luz de color rojo-verde-azul más luz blanca. El sistema operativo orga-niza la pantalla en una rejilla de coordenadas X-Y como en un tablero de ajedrez. Cada pequeño cuadrado se llama píxel, y la cantidad de píxeles por pulgada en que configuremos la pantalla se llama resolución de pantalla. La resolución de pantalla para la que diseñaremos será 800x600, aunque nuestro ordenador lo tendremos configurado normalmente a 1024x768 o a 1280x1024.

Page 26: Bitacora Lista

Cada píxel está representado por un bit de memoria (0 o 1) en el caso de los monito-res en blanco y negro. Cuando cada píxel utiliza 8 bits de memoria cada uno de ellos puede ser de uno de los 256 colores que es el número máximo de combinaciones de ceros y unos para 8 bits (2 elevado a la octava potencia=256). La tabla de color para web utiliza 256 colores. La profundidad de color para monitores puede ser de miles (16 bit) o millones (24 bit /true-color) de colores.

Page 27: Bitacora Lista

Modo de color. Tipos de archivos gráficos El modo de color puede ser RGB (red-green-blue) o indexado. Una imagen RGB pue-de indexarse para reducir el número de colores hasta un máximo de 256, el número de colores que utilizan los archivos gráficos GIF y PNG. El archivo GIF (Graphics Inter-change Format) es el más utilizado en la web por su reducido peso en Kb. El archivo de imagen GIF puede mantener píxeles transparentes que sean innecesarios para reducir el peso de la imagen aún más. Este tipo de archivo también puede contener una secuencia de imágenes de modo que sea un GIF animado. El archivo de imagen PNG (Portable Network Graphics) también puede tener píxeles transparentes. El ar-chivo de imagen JPEG (Joint Photographic Experts Group) se utiliza para comprimir imágenes de calidad fotográfica para la web en modo de color RGB. Un alto nivel de compresión de imagen producirá una imagen de menor calidad y una compresión menor dará una calidad de imagen mayor.

16 bits

8 bits

Page 28: Bitacora Lista
Page 29: Bitacora Lista

C L A S E 3 11 Julio 2008

C L A S E 8 22 Agosto 2008

Page 30: Bitacora Lista

C L A S E 822 Agosto 2008

PRE_PRENSA DIGITAL No utilizamos .jpg ya que es un forma-to que hace que la imagen pierda informa-ción, bajando así su calidad.

¿Qué es Pre-Prensa Digital? Todo lo que se hace previamente a la impresión- se utilizan diferentes formatos, ta-les como TIF y EPS - aunque en mucha menor medida el jpg.

RAW - crudo

Perfección del orignal.Son gruesas capas de la imagen y permite te-ner mas información. Una suerte de negativo de la foto que no tiene compresión. Tiene mas información en el registro de bits y mayor profundidad de color, las imágnes son mas ricas en información. NEGATIVO DIGITAL

RIQUEZA EN INFORMACION

EPS - encapsulado post script

Formato de archivos gráficos. Un <rchivo EPS es un archivo postscript, que satisface algunas

restricciones adicionales; restricciones que buscan hacer más sencillo a programas de software el incluir una rchivo EPS dentro de otro en postscript.

.jpgPost.ScriptMuchas veces usado como transporte de ar-chivos gráficos en talleres de impresión pro-fesional.El concepto PostScript se diferenció, funda-mentalmente, por utilizar un lenguaje de pro-gramación completo, para describir una ima-gen de impresión. Imagen que más tarde sería impresa en una impresora láser o algún otro dispositivo de salida de gran calidad, en lugar de una serie de secuencias de escapes de bajo nivel.

post.script

raw

Page 31: Bitacora Lista

C L A S E 3 11 Julio 2008

T a r e a 2 cascadas

Page 32: Bitacora Lista

c a s c a d a s

Page 33: Bitacora Lista

Hojas de Estilo en Cascada (Cascading Style Sheets): CSS

¿Qué es CSS?

Estas siglas hacen referencia al término “hojas de estilo en cascada”, y es un formato de instrucciones con el que se puede controlar el aspecto visual de un sitio web.Algunos de los navegadores que soportan este estandar son: Firefox, Internet Explorer 3 o superior, Nestcape4 y superior. Algunos de estos, sinembargo no lo soportan por com-pleto.

¿Qué se puede hacer con CSS?Puedes, entre otras cosas, construir tus capas, ajustar el color y el tamaño de un texto, posicionar con precisión imágines en la página web,etc.La ventaja principal de CSS es que no se necesita programar todos estos aspectos para cada página una y otra vez, sino que se escribe una sola vez y enlazar todas esas página al código CSS.

¿Dónde se pone el código CSS?Hay tres lugares en donde se puede escribir código CSS:En primer lugar en la cabecera de la página web, en segundo lugar en una etiqueta indi-vidual del código HTML, y la tercera en un archivo externo.Cuando solo queremos dar diseño a una sola página es conveniente escribir el código CSS en la cabecera de la página. En cambio, cuando queremos diseñar todo un sitio web, necesitamos usar un archivo CSS externo.

lo básico

Page 34: Bitacora Lista

Dentro de los CSS existen 3 modos diferentes para aplicar las reglas de estilo a un sitio web:

1/ Hoja de Estilo Externa: hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.

2/ Hoja de Estilo Interna: hoja incrustada dentro de un documento HTML. De este modo se separala información de estilo del código HTML.

3/ Estilo en Linea: método que permite insertar el lenguaje de estilo de la página dentro de una etiqueta HTML directamente.

lo básico

Page 35: Bitacora Lista

Dar estilos a los titulares de los sitios web es similar a hacerlo a los párrafos. Esto quiere decir que se utilizan propiedades comunes y declaraciones similares. Esta similitud radica en que un párrafo y un titular consta de texto solamente.

Por ejemplo, con la propiedad color le daremos color al texto; podemos también cambiar la fuente con fint-family, el tamaño con font-size, etc. Exsite también el widht, propiedad que permite dar un ancho máximo al titular.

Una regla puede ser utilizada para trabjar el diseño de cada titular uno a uno, por ejemplo, una regla para h1, otra para h2, y así... Aun que también exsite la opción de aplicar un mismo estilo de una sola vez para varios elementos: para esto se debe escribir el primer elemento, seguido por el segundo separados por una coma (ver dibujo).

El ejemplo de arriba muestra una aplicación de color verde para ambos títulos, el h1 y h2.

estilo de titular

Page 36: Bitacora Lista

Lo primero es presentar el código:

Se ha utilizado una sola regla, ya que solo se dará diseño a los párrafos.Por lo que, elegimos el selector p, que es el que apunta a la etiqueta <p> de los párrafos.

Ya entre llaves tenemos las declaraciones. La primera propiedad es para darle co-lor al texto, y simplemente esta propiedad es color; así pondremos el texto de los párrafos en verde.

La propiedad siguiente es font-family, la que sirve para elegir un tipo de letra para el texto. Se ha elegido más de un tipo de letra separando los valores con comas; de esta forma, si el ordenador del usuario no tiene instalada dicha tipografía, el navegador mostrará la siguiente.

estilo de párrafo

Page 37: Bitacora Lista

Line-height controla la separación entre los renglones del texto. Esta técnica es útil usarla para hacer los párrafos más cómodos de leer. Por ahora decir que el valor se expresa en pixeles (px).

Por último, la propiedad text-align está destinada para la alineación del texto. Dispone de cuatro valores: left (el texto se alinea a la izquierda), right (se alinea a la derecha), center (el texto se centra) y justify (el texto ocupa todo el ancho de la ventana).

estilo de párrafo

Page 38: Bitacora Lista

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

a/ el tener un control centralizado de la presentación del sitio completo; por lo que se agiliza su modo de actualización.

b/ aumenta la accesibilidad al usuario, ya que los navegadores permiten al usua-rio especificar su propia hoja de estilo, localmente, que se aplicará al sitio (por ejemplo, agrandar las fuentes para alguien con problemas de vista).

c/ una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mos-trada en un dispositivo móvil, o ser “leída” por un sintetizador de voz. d/ el documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).

Ventajas de CSS

Page 39: Bitacora Lista
Page 40: Bitacora Lista