08 sw y hw diseño

77

Transcript of 08 sw y hw diseño

Page 1: 08 sw y hw diseño
Page 2: 08 sw y hw diseño

UNIVERSIDAD DE CALDASHERRAMIENTAS DIGITALES

MARIO H. VALENCIA G.Laboratorio de Interfaces

Page 3: 08 sw y hw diseño

INTRODUCCIÓN• Se han puesto sobre la mesa y se ha hecho necesaria la comprensión de ciertas

ideas que quizás no se habían contemplado en mucho tiempo, como la relación oyente-vidente-usuario, o la de creador-diseñador, las relativas al uso de los aparatos digitales, la ruptura de los límites entre el diseño y la creación, los formatos de conservación de la imagen y el sonido, las formas de entender el espacio, la interacción, el diseño de espacios reales y virtuales; en definitiva, los objetivos y medios de los espacios interactivos (espacios mediatizados).

Page 4: 08 sw y hw diseño

MODELOS DE INTERACCIÓN DIGITAL

• En este trabajo de Shefry Shaw, que es uno de los principales pioneros en el desarrollo de la realidad virtual realizando instalaciones interactivas por computador, se hace patente el uso de metáforas diferentes al desktop (escritorio), ofreciendo un recorrido a partir de un objetoLegible City, obra de Jeffrey Shaw. En "Legible City" el visitante tiene la posibilidad de montar una bicicleta estática y recorrer una ciudad construida por grandes letras tridimensionales generadas en un sistema computacional que forman palabras y oraciones a lado y lado de la calle

Page 5: 08 sw y hw diseño

ITOUCH – IPHONE

• iPhone. Teléfono multimedia con conexión a Internet. El iPhone es un teléfono, un ipod, y un dispositivo con acceso a internet, todo en uno; ofrece cientos de aplicaciones diseñadas, desde programas ofimáticos hasta científicos

Page 6: 08 sw y hw diseño

WII

• Consola de videojuego Nintendo wii. Wii es una consola de videojuego de séptima generación cuya característica más importante es su control de mando inalámbrico o Wiimote, que es usado como dispositivo de mano con el que se puede apuntar o detectar aceleración de movimiento en tres dimensiones; adicionalmente su conexión a red WiiConnect24 le permite actualizarse cuando está en modo de espera y le da posibilidades de juego en línea

Page 7: 08 sw y hw diseño

KINECT

• Kinect (originalmente conocido por el nombre en clave «Project Natal») desarrollado por Prime Sense, es «un controlador de juego libre y entretenimiento» creado por Alex Kipman, Kinect permite a los usuarios controlar e interactuar con la consola sin necesidad de tener contacto físico con un controlador de videojuegos tradicional, mediante una interfaz natural de usuario que reconoce gestos, comandos de voz, y objetos e imágenes. El dispositivo tiene como objetivo primordial aumentar el uso de la Xbox 360, más allá de la base de jugadores que posee en la actualidad

Page 8: 08 sw y hw diseño

LEAP MOTION

• El pequeño dispositivo se conecta vía USB, y no requiere de ningún tipo de calibrado o configuración especial. El sistema reconoce manos, dedos, e incluso objetos, dentro de su espacio de trabajo. Llama realmente la atención por la velocidad a la que interpreta los movimientos, sin retraso aparente desde que los hacemos. El nivel de definición de captura de movimientos permite reconocer zoom con dos dedos, dibujar con un lápiz, o girar objetos tridimensionales.

Page 9: 08 sw y hw diseño

MICROSOFT SURFACE

• Pantalla multitáctil Microsoft Surface. Microsoft Surface es una solución completa que incluye hardware y software sobre la que se puede integrar un innumerable abanico de aplicaciones. Basado en Windows Vista, utiliza tecnología multi-táctil sobre una pantalla horizontal de gran formato y 360 grados, haciendo posible que varias personas trabajen simultáneamente tocando la superficie, interactuando con contenido y objetos físicos de un modo tan familiar que parece el mundo real

Page 10: 08 sw y hw diseño

REACTABLE

• Superficie y marcadores de la Reactable. La Reactable es un instrumento musical electrónico colaborativo; consta de un tablero semitranslúcido iluminado directamente con dos cámaras situadas al otro lado del tablero que analiza la superficie y sigue los movimientos, la naturaleza, la posición y la orientación de los diferentes objetos físicos y lógicos que están situados sobre el tablero por medio de algoritmos de visión artificial. Desarrollado por el grupo de tecnología musical de la Universidad Pompeu Fabra.

Page 11: 08 sw y hw diseño

REACTABLE

Según sus creadores La Reactable intenta ser :Colaborativo: manipulado por varios ejecutantes (en forma local o remota).Intuitivo: sin manual, sin instrucciones.Con una sonoridad interesante y desafiante.Enseñable y aprendible (incluso por niños).Apto para novatos (instalaciones) y para músicos electrónicos avanzados (conciertos)”

Page 12: 08 sw y hw diseño

TOBII X120

• Sistema de Eye tracking Tobii con iView X. Imagen a: módulo de calibración de iView X, en el cual se hacen lecturas técnicas sobre el tamaño del iris, la velocidad de parpadeo y la cantidad de luz en el espacio. Imagen b: se usa el módulo básico de reconocimiento de patrones por el que se entrena al sistema experto de la aplicación y al usuario de la misma

Page 13: 08 sw y hw diseño

VERICHIP

• Verichip. Dispositivo Intracutáneo. VeriChip es un dispositivo de radiofrecuencia que se implanta en el cuerpo humano con fines médicos y de identificación

Page 14: 08 sw y hw diseño

MINDFLEX

• MindFlex. Juego de Mattel que se controla por ondas cerebrales, y que consiste en que el usuario levante y mueva una pelota dentro de un circuito de obstáculos, sólo y exclusivamente con el poder de su mente. La concentración es la clave: cuando se pierde, la bola cae y el jugador pierde.. Para controlar la bola sólo hay que ajustarse unos auriculares dotados de sensores. Gracias a la tecnología EEG, es posible leer el estado de concentración de cada jugador.

Page 15: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLOShell: En informática, el shell o intérprete de órdenes o intérprete de comandos es el programa informático que provee una interfaz de usuario para acceder a los servicios del sistema operativo.Dependiendo del tipo de interfaz que empleen, los shells pueden ser :

De líneas texto (CLI, Command-Line Interface, interfaz de línea de comandos),

Gráficos (GUI, Graphical User Interface, interfaz gráfica de usuario),

De lenguaje natural (NUI, Natural User Interface, interfaz natural de usuario).

Los shell son necesarios para invocar o ejecutar los distintos programas disponibles en la computadora.

Page 16: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Linea de Comando

La interfaz de línea de comandos o interfaz de línea de órdenes (en inglés, command-line interface, CLI) es un método que permite a los usuarios dar instrucciones a algún programa informático por medio de una línea de texto simple.

Las CLI pueden emplearse interactivamente, escribiendo instrucciones en alguna especie de entrada de texto, o pueden utilizarse de una forma mucho más automatizada (archivo batch), leyendo órdenes desde un archivo de scripts.

Page 17: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Linea de Comando

Por ejemplo, las CLI son parte fundamental de los shells o emuladores de terminal. Aparecen en todas las interfaces de escritorio (GNOME, KDE, Microsoft Windows) como un método para ejecutar aplicaciones rápidamente. Aparecen como interfaz de lenguajes interpretados tales como Java, Python, Ruby o Perl. También se utilizan en aplicaciones cliente-servidor, en gestores de bases de datos, en clientes FTP, etc. Las CLI son un elemento fundamental de aplicaciones de ingeniería tan importantes como MATLAB y AutoCAD.

Page 18: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Interfaz Grafica de Usuario

La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface), es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.

Page 19: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Interfaz Natural de Usuario

La interfaz natural de usuario (en inglés natural user interface, NUI) es el tipo de interfaz de usuario en las que se interactúa con un sistema, aplicación, etcétera, sin utilizar sistemas de mando o dispositivos de entrada (como en las interfaces gráficas de usuarios, sería un ratón, teclado alfanumérico, lápiz óptico, panel táctil, joystick, etcétera), y en su lugar, se hace uso de movimientos gestuales del cuerpo o de alguna de sus partes tales como las manos, sirviendo de mando de control.

Page 20: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programanción

Es un lenguaje formal diseñado para realizar procesos que pueden ser llevados a cabo por máquinas como las computadoras. Pueden usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos con precisión, o como modo de comunicación humana. Está formado por un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones

Page 21: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

Los programas se pueden clasificar por el paradigma del lenguaje que se use para producirlos. Los principales paradigmas son: imperativos, declarativos y orientación a objetos.

La forma en la cual se programa puede ser por medio de texto o de forma visual. En la programación visual los elementos son manipulados gráficamente en vez de especificarse por medio de texto.

Page 22: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

Existen muchos lenguajes de programación de alto nivel con sus diferentes versiones. Por esta razón es difícil su tipificación, pero una clasificación muy extendida desde el punto de vista de su forma de trabajar y la filosofía de su creación es la siguiente:

Lenguajes de programación imperativos: entre ellos tenemos el Cobol, Pascal, C y Ada.Lenguajes de programación declarativos: el Lisp y el Prolog.Lenguajes de programación orientados a objetos: el Smalltalk y el C++.Lenguajes de programación orientados al problema: son aquellos lenguajes específicos para gestión.Lenguajes de programación naturales: son los nuevos lenguajes que pretender aproximar el diseño y la construcción de programas al lenguaje de las personas.

Page 23: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

En lenguajes con tipos estáticos se determina el tipo de todas las expresiones antes de la ejecución del programa (típicamente al compilar).La mayoría de los lenguajes populares con tipos estáticos, tales como C++, C# y Java, manejan tipos explícitos.

Los lenguajes con tipos dinámicos determinan la validez de los tipos involucrados en las operaciones durante la ejecución del programa. En otras palabras, los tipos están asociados con valores en ejecución en lugar de expresiones textuales en lenguajes con tipos dinámicos se suele dejar de lado la depuración en favor de técnicas de desarrollo como por ejemplo BDD y TDD. Ruby, Lisp, JavaScript y Python son lenguajes con tipos dinámicos

Page 24: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

Page 25: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

C++ es un lenguaje de programación diseñado a mediados de los años 1980 por Bjarne Stroustrup. La intención de su creación fue el extender al lenguaje de programación C mecanismos que permiten la manipulación de objetos. En ese sentido, desde el punto de vista de los lenguajes orientados a objetos, el C++ es un lenguaje híbrido. Posteriormente se añadieron facilidades de programación genérica, que se sumaron a los paradigmas de programación estructurada y programación orientada a objetos. Por esto se suele decir que el C++ es un lenguaje de programación multiparadigma.

Page 26: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

Java es un lenguaje de programación de propósito general, concurrente, orientado a objetos que fue diseñado específicamente para tener tan pocas dependencias de implementación como fuera posible. Su intención es permitir que los desarrolladores de aplicaciones escriban el programa una vez y lo ejecuten en cualquier dispositivo (conocido en inglés como WORA, o "write once, run anywhere"), lo que quiere decir que el código que es ejecutado en una plataforma no tiene que ser recompilado para correr en otra. Java es, a partir de 2012, uno de los lenguajes de programación más populares en uso, particularmente para aplicaciones de cliente-servidor de web, con unos 10 millones de usuarios reportados

Page 27: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes.

Page 28: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml)

Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C)

Page 29: 08 sw y hw diseño

HERRAMIENTAS DE DESARROLLO

• Lenguaje de Programación

Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado2 . Es muy usado para establecer el diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales, como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles

Page 30: 08 sw y hw diseño

AMBIENTES DE DESARROLLO Y SISTEMAS DE CONTROL

Ambientes de desarrollo

Processing OpenFramework Adobe Flash

Pure Data Max MSP Eyes Web

Page 31: 08 sw y hw diseño

PROCESSING

• Según sus creadores, Ben Fry y Casey Reas, Processing es “un lenguaje de programación y un entorno creado para las artes electrónicas y las comunidades de diseño visual”, es un Framework que permite relacionar conceptos básicos de programación en un entorno de línea de código con principios de generación de formas 2D y 3D, control de interacción, creación y control de sonido e imagen en movimiento (tanto video como animación).

Page 32: 08 sw y hw diseño

PROCESSING

• Este lenguaje, basado en Java, fue gestado con la simplicidad en mente, para que diseñadores, artistas, estudiantes, arquitectos, ingenieros, matemáticos, investigadores o simplemente personas con una gran curiosidad y motivación creativa puedan aprender a programar, sin que esto resulte un dolor de cabeza ni tengamos que lidiar con una alta tecnicidad computacional, y que al mismo tiempo, disfrutemos de la flexibilidad que nos permite comunicarnos con la computadora en su propia lengua, el código. Inicialmente desarrollado como software para crear bocetos de trabajo y enseñar los principios de la programación en un contexto visual, Processing ha evolucionado hacia una herramienta de producción profesional.

Page 33: 08 sw y hw diseño

OPEN FRAMEWORKS

• OpenFrameworks es un conjunto de herramientas C ++ de código abierto diseñado para ayudar al proceso creativo proporcionando un marco simple e intuitivo para la experimentación, es una herramienta de código libre para programación creativa orientada a artistas y diseñadores. Permite trabajar con gráficos, audio, vídeo, visión por ordenador

Page 34: 08 sw y hw diseño

OPENFRAMEWORKS

• Openframeworks es una biblioteca open-source cuyo objetivo inicial es colaborar con artistas y estudiantes en el trabajar con código en c++. Su “filosofía” y propósitos son muy similares a las de processing; sin embargo, openframeworks no es una IDE (Integrated Development Environment) sino una colección coherente de procesos alrededor de unas cuantas bibliotecas útiles, a saber: OpenGL para mostrar gráficos, FreeImage, para manipulación de imágenes, Freetype, para mostrar y manipular fuentes, rtAudio, para audio, Quicktime, (mac o pc), directShow (pc) y Video4Linux (linux), para captura y reproducción de vídeo

Page 35: 08 sw y hw diseño

ADOBE FLASH

• Adobe Flash, o simplemente Flash, es un ambiente de desarrollo que incluye tanto un programa de edición multimedia, Flash program, como un programa de visualización de películas creadas en el ambiente de edición, Flash Player, escrito y distribuido por Adobe. Utiliza gráficos vectoriales e imágenes raster, sonido, flujo de vídeo y audio bidireccional, y una estructura de programación en línea de código tipo script tipificada fuertemente en la metodología orientada a objetos conocido como action script (AS)

Page 36: 08 sw y hw diseño

PUREDATA

• Pure-Data es un ambiente de desarrollo de software que utiliza un paradigma de programación visual basado en eventos y orientado a objetos. En su interfaz gráfica de uso se hace patente la metáfora de la caja negra. Cada caja representa una función con argumentos de entrada (inputs) —datos, sentencias de control o datos procesados (outputs)— y de salida, que son las respuestas como datos procesados en el interior de cada caja. Cada una de esta cajas cumple funciones específicas que son lanzadas o disparadas (triger) a partir de sus inputs, que a su vez pueden ser eventos del usuario o el entorno

Page 37: 08 sw y hw diseño

MAX/ MSP JITTER

• Max es un entorno de desarrollo de software que ofrece una interfaz gráfica modular de interconexión de objetos a partir de la relación de las entradas y salidas de los mismoses bastante modular, y la mayoría de las rutinas forman parte de una biblioteca compartida. La IPA (Interfaz de Programación de Aplicaciones) permite el desarrollo de nuevas rutinas (llamadas «objetos externos») por terceras personas. En consecuencia, muchos de los usuarios de Max son programadores no afiliados a Cycling '74

Page 38: 08 sw y hw diseño

EYE WEB

• EyesWeb es una plataforma desarrollada por el Laboratorio de Informática Musical de la Universidad de Génova (InfoMus Lab, 2008). “Se especializa en la captación de diferentes patrones de movimiento y gestualidad del cuerpo humano y la interpretación musical, y está orientado a la producción de sistemas multimedia interactivos para el análisis de movimientos escénicos en tiempo real y controlar la síntesis de sonido y la ejecución en vivo de instrumentos”

Page 39: 08 sw y hw diseño

AMBIENTES DE DESARROLLO SDG TOOLKIT

• Framework desarrollado por el GroupLab de la Universidad de Calgary. Es usado para el diseño de aplicaciones groupware que da la posibilidad de utilizar diferentes ratones, teclados, cursores y orientaciones desde un mismo dispositivo; está implementado como una aplicación para .NET.

Page 40: 08 sw y hw diseño

AMBIENTES DE DESARROLLO SDG TOOLKIT

• Hay que conocer las ventajas y desventajas que nos ofrece. Por ejemplo, si vas a hacer un efecto de audio, te recomiendo que vayas a hacerlo con PureData o Max, si quieres hacer una página web interactiva con gráficos generativos, me iría a por Processing. Si lo que quieres es crear una app con un uso de computer vision o una aplicación que corra en OSX, en Linux, en iOS, en Android, en Windows y en la RaspberryPi al mismo tiempo, openframeworks

Page 42: 08 sw y hw diseño

AMBIENTES DE DESARROLLO Y SISTEMAS DE CONTROL

Sistemas de Control

Wiring Raspberry Pi

Basic Stamp Arduino

Page 43: 08 sw y hw diseño

WIRING

• Wiring comprende un ambiente de programación y una tarjeta electrónica de entrada y salida (i/o input/output) de datos, usada inicialmente para la exploración de arte electrónico, medios tangibles, enseñanza y aprendizaje de programación computacional. Se ha convertido en una tarjeta de diseño de prototipos electrónicos que trabaja sobre los aspectos de interacción física, usa una interfaz de programación similar a processing, como lenguaje de programación, usa “un C basado en las AVRLIB de Pascal Stang, que también esta javadizado para no tener que usar apuntadores” (Reyes, 2008), posee en su tarjeta de hardware un microcontrolador que puede ser programado por el ambiente de wiring para controlar dispositivos externos como sensores y actuadores; “usa un micro ATMEL atmega128”

Page 44: 08 sw y hw diseño

RASPBERRY PI

• Raspberry Pi es un computador de placa reducida, computador de placa única o computador de placa simple (SBC) de bajo coste desarrollado en Reino Unido por la Fundación Raspberry Pi, con el objetivo de estimular la enseñanza de ciencias de la computación en las escuelas.

Page 45: 08 sw y hw diseño

ARDUINO

• Arduino es una plataforma de código libre de computación física formada por una simple placa de entrada-salida y un entorno de desarrollo para escribir el software que se ejecutará en él. Su lenguaje de programación es una implementación de Wiring desarrollado en un C basado en las AVRLIB. Arduino es una plataforma basada en una tarjeta o circuito impreso y un entorno de desarrollo o IDE basado en el lenguaje de Wiring y Processing. En su versión Duemilanove cuenta con 14 pines digitales i/o, 6 entradas análogas y 6 pines para salida análoga PWM (estos pines se comparten con los de entrada y salida digital)

Page 46: 08 sw y hw diseño

BASIC STAMP

• Basic Stamp 2 es un kit de desarrollo y un modulo de microcontrolador enfocado al desarrollo y aprendizaje de diseños de interfaces computacionales físicas, facilitando, a partir de sus diferentes kits, el trabajo sencilla en el diseño y construcción de circuitos robóticos y módulos microcontrolados; su lenguaje de desarrollo es una versión simplificada de Basic llamado Basic stamp; consta de 16 pines de entrada y salida digital, 2 puertos de salida análoga de 8 bits y 1 puerto PWM de 10bits; usa un procesador BS2 de Parallax.

Page 47: 08 sw y hw diseño

PHIDGETS

• Phidgets es un conjunto de bloques interconectables sobre la estructura “plug and play” que se caracteriza por su bajo costo. Permite tener control de los sensores y actuadores desde un computador a través de múltiples puertos usb; cada bloque es controlado por un puerto para el cual se han desarrollado o se pueden desarrollar sus API (aplicaciones) en diversos lenguajes de programación, lo cual la hace muy flexible y útil al momento de conectar nuevos módulos; cuenta con gran cantidad de dispositivos para su conexión (sensores de distancia, fuerza, presión, toque, movimiento, motores, infrarrojos…) y tarjetas de entrada-salida que funcionan como los kists de ensamblaje; dependiendo del kit se tienen mayores posibilidades de entradas y salidas; el kit medio consta de 8 entradas análogas, 8 entradas digitales y 8 salidas digitales

Page 48: 08 sw y hw diseño

BUG

• Según sus creadores bugbase es “un computador linux con cuatro ranuras de expansión” (Dispositivo de prototipazo rápido, 2009). Bugbase trabaja con un microcontrolador ARM1136JF-s, a cuya placa se le pueden insertar cuatro de seis módulos disponibles, entre los que están BugMotion, que es un módulo de detección de movimiento que contiene un sensor infrarojo pasivo, o PIR, y un acelerómetro de tres ejes; BugLocate, receptor GPS; BugView, una pantalla LCD sensible al tacto, BugvonHippel, módulo que funciona como un conector al cual se pueden añadir sensores, efectores, dispositivos inalámbricos y aparatos USB

Page 49: 08 sw y hw diseño

SUNSPOT

• Fue desarrollado por el famoso laboratorio de SUN LABs. SunSPOT (Small Programable Object Technology) busca, según sus creadores, “permitir que todos los nuevos tipos de dispositivos se conecten e intercambien en la red; la tecnología SunSPOT coloca la visión de la “Internet de cosas” mucho más cerca de la realidad”

Page 50: 08 sw y hw diseño

MODELOS HIC ANALISIS ESTRUCTURAL DE LAS INTERFACES DIGITALES

En este modelo conceptual encontramos tres entornos básicos: uno físico humano, otro físico de

hardware y software, y un último entorno de trabajo o interacción y representación.

Page 51: 08 sw y hw diseño

MODELOS HIC ANALISIS ESTRUCTURAL DE LAS INTERFACES DIGITALES

Entorno físico humano: representa al usuario operador del sistema,

en este ámbito se encuentran los elementos de entrada y los de

salida.

Entorno físico de hardware y software: en este módulo se

adquiere, por una parte, la información que el operador humano

envía al sistema, y por otra se toma la información de respuesta

del sistema y se traduce en acciones e información para que sea

reconocida por el ser humano.

Entorno de trabajo: en este ambiente se desarrollan o despachan

los requerimientos del operador humano a partir de programas

de computador o del diseño de dispositivos electrónicos

específicos; se puede ver como el motor detrás de la interface

Page 52: 08 sw y hw diseño

MODELOS HIC

ANALISIS ESTRUCTURAL DE LAS INTERFACES DIGITALES

Page 53: 08 sw y hw diseño
Page 54: 08 sw y hw diseño

PROCESSINGIntroducción

Page 55: 08 sw y hw diseño

POR QUE P55Permite 3 formas de programar: básica, procedural/estructurada y orientada a objetos• Las primeras pruebas y ‘sketches’ sencillos se pueden desarrollar en el modo básico (sin funciones, código directo)• ‘sketches’ y programas más ambiciosos pueden hacer uso de funciones (programación a la ‘C’)• Programas más complejos pueden desarrollarse aplicando orientación a objetos (clases de Java)• Finalmente, se puede desarrollar en java ‘puro’ y usar librerías de processing y otros entornos(eclipse, netbeans etc.)

Page 56: 08 sw y hw diseño

POR QUE P55

Genera aplicaciones listas para ser ejecutadas en las tres principales plataformas: Mac OS, Linux y

Windows• Las aplicaciones processing también pueden generarse para su ejecución en internet (como un applet de Java)• Es posible desarrollar aplicaciones para dispositivos.• Conexión con dispositivos y prototiposelectrónicos: proyectos Arduino y Wiring (http://hardware.processing.org)

Page 57: 08 sw y hw diseño

IDE

Page 58: 08 sw y hw diseño

print("hello world!");

Primer programa

Page 59: 08 sw y hw diseño

Versión 1

print("Hello World!”);print("Hola Clase!");

Page 60: 08 sw y hw diseño

Versión 1I

println("Hello World!”);println("Hola Clase!");

Page 61: 08 sw y hw diseño

Graficos

line(20,20,80,80);

Page 62: 08 sw y hw diseño

Versión 1I

line(40,15,90,95);

Page 63: 08 sw y hw diseño

Ejercicio 1

Hacer una X en el canvas

Page 64: 08 sw y hw diseño

otros objetos gráficos

line() p.e.: line(30, 20, 85, 75);rect() p.e.: rect(30, 20, 55, 55);ellipse() p.e.: ellipse(56, 46, 55, 55);triangle() p.e.: triangle(30, 75, 58, 20, 86, 75);

Page 65: 08 sw y hw diseño

Manejo de color

El valor de un color en Processing se expresa así: color(255,0,0) para un rojo puro, por ejemplo.para un verde con alfa (transparencia) del 50%: color(0,255,0,127). Si no se especifica el parámetro alfa, se entiende que su valor es máximo, 255, y que por lo tanto no hay transparencia (la opacidad es total).

Para ver estos valores de color, el color picker de la interfaz de Processing puede ser muy útil.

Cuando un color está en la escala de grises (y por consiguiente sus valores R, G y B son iguales entre sí), se puede expresar con un solo valor : color(127);

Page 66: 08 sw y hw diseño

Manejo de color

Hay varias maneras de utilizar el color. De momento, veremos las funciones background(), stroke() y fill(). Dentro de sus paréntesis (es decir, como parámetros), pondremos el valor de color (en forma de uno, tres, o cuatro números de 0 a 255), para cambiar, respectivamente, el color de fondo de una ventana, el color del trazo en una forma geométrica, o su color de relleno.

Page 67: 08 sw y hw diseño

Color para un rectángulo

fill(0,255,0);stroke(255,0,0);rect(30, 20, 55, 55);

Page 68: 08 sw y hw diseño

Combinando

size(600,400); background(0); fill(255,0,0); strokeWeight(5);stroke(255);ellipse(250,150,200,180);noStroke();fill(0,255,0,127); rect(250,150,200,120);stroke(255,200);line(100,100,350,210);

Page 69: 08 sw y hw diseño

Tipos de datos Numéricosy operaciones básicas

int a,b,e; float c,d,f;a = 10;b = 3;c = 40.0;d = 6.0;println( a / b ); //imprime 3 println( c / d ); //imprime 6.66666666...e = a + b * 8;f = c - d * 2.0;

Page 70: 08 sw y hw diseño

operaciones abreviadas

int x,b;x = 100;b = 5;x++; // esto equivale a x=x+1x--; // esto equivale a x=x-1 x+=b; // esto equivale a x=x+b x-=b; // esto equivale a x=x-b x*=b; // esto equivale a x=x*b x/=b; // esto equivale a x=x/b

Page 71: 08 sw y hw diseño

Variables

int x = 0;println(x);x=x+1;println(x);x=x+1;println(x);

Page 72: 08 sw y hw diseño

if then-else

int a = 1;int b = 2;

if(a==b){ println("igual");}else{ println("diferente");}

Page 73: 08 sw y hw diseño

Bucles - repeticiones

for(int i=0 ; i<5 ; i++){ println(i);}

Page 74: 08 sw y hw diseño

Combinando lo aprendido

int x = 0;

void setup( ){ noStroke( );}

void draw( ){ background(190); rect(x, 0, 5, 100); x=x+1;}

Page 75: 08 sw y hw diseño

caracteres

char miVar;miVar = 'b';println(miVar); //imprime una b

Page 76: 08 sw y hw diseño

Control con mousemi primera interacción

String a,b,c;a = "hola ";b = "mundo!!!!";c = a + b; println(a); //imprime holaprintln(c); //imprime hola mundo!!!!

int x,y; void setup(){ background(230); size(200,200); } void draw(){ x=mouseX-25; y=mouseY-25; rect(x,y,50,50); }

Page 77: 08 sw y hw diseño

Control con mouseversion I sin rastro

String a,b,c;a = "hola ";b = "mundo!!!!";c = a + b; println(a); //imprime holaprintln(c); //imprime hola mundo!!!!

int x,y; void setup(){ size(200,200); } void draw(){ background(230); x=mouseX-25; y=mouseY-25; rect(x,y,50,50); }