Visualizacin e Interfaces de usuario e Interaccin TUPAR

Visualización e Interfaces de usuario e Interacción TUPAR - TUDAI

Docentes Cristian García Bauza Marcos Lazo Luis Javier Romero Fabricio Defelippe Juan Pablo D’Amato E-mail de contacto: visualiz-interf-tupar@alumnos. exa. unicen. edu. ar

Contenidos del curso Manejo de colores e imágenes Figuras, polígonos y formas de colorear Animación e interacción Diseño de páginas WEB Uso de APIs de desarrollo Estructura de Datos Instrucciones de Control Interacción con el Usuario Principios de buen Diseño Responsivo, Principios de Usabilidad

¿Cómo se aprueba? 1 ejercicio entregable obligatorio por cada práctico. Aprobación con más de 5 y promocionable con más de 7 en cada práctico. Sin parcial. En caso de no promocionar el final se aprueba realizando un trabajo.

HTML 5+ CSS 3 = Styles & presentation ◦ Transformaciones Rotación Traslación Escala ◦ Animaciones

Ejemplos de HTML 5 Sketchpad

Ejemplos de HTML 5 World of Tweets http: //www. chromeexperiments. com/detail/world-oftweets/? f=

Ejemplos de HTML 5 Games http: //www. sinuousgame. com/ http: //www. cuttherope. net/ http: //www. angrybirdsgames. com/ games/angry-birds-space

Herramientas de desarrollo Navegadores (Chrome o Firefox) Javascript Notepad / Notepad++ / Sublime / Atom http: //www. w 3 schools. com http: //caniuse. com/ http: //liveweave. com/ http: //validator. w 3. org/ http: //www. colorzilla. com/gradient-editor/

Colores

Colores � � Distintos sistemas de representación (RGB, YUV, HSL, CMYK) RGBA utiliza 4 componentes ◦ Red ◦ Green ◦ Blue ◦ Alpha (Transparencia) Un pixel de una imagen se representa con el modelo RGB con 3 bytes (0. . 255) Se puede definir de dos formas: ◦ Máscara hexadecimal: � int color = RED << 16 || GREEN << 8 || BLUE � Puede escribirse como “#RRGGBB” valores Hexa ◦ Función de javascript � ‘rgba(v. Red, v. Green, v. Blue, v. Alpha)’

Colores

Dibujando en HTML 5 • • • Canvas es el elemento donde se dibuja en HTML 5 Context provee la funcionalidad para dibujar Cada elemento visual de la página tiene asociado un Context.

Ejemplo de uso de Canvas

Imágenes Una imagen Digital es una matriz 2 D (ancho x alto) de pixeles. Escala grises Color

Imágenes

Representar imágenes HTML 5 provee un “Image. Data” La imagen se recorre en Ancho y Alto “Image. Data” almacena los pixeles en un arreglo de 1 d Los colores se almacenan en un Array de enteros y pueden acceder como si fueran una matriz Para dibujar la Imagen en Pantalla ◦ ctx. put. Image. Data ( Imagen, x, y) ; Para convertir de matriz a arreglo? indice = (x + y * image. Data. width) * 4;

Generar una imagen ……. .

Cómo cargar una Imagen La carga de imágenes es asincrónica El script se ejecuta secuencialmente línea por línea El tiempo de demora depende del tamaño de la imagen y de la latencia del servidor que la tiene Puede que la imagen no esté cargada en memoria al momento de dibujarla

Cargar una imagen y dibujarla Ubicación del recurso Evento de finalización de la carga del recurso Dibujo la imagen usando el contexto del HTML 5

Por qué se usa. onload() ? 5 6 7 onload() 10 8 11 2 12 15 onload() 16 17 8 18 2

Ejercicio Cargar una imagen almacenada en la PC Dibujar la imagen sobre el canvas

Acceder a los pixeles Image. Data almacena los pixeles en un arreglo de 1 D El Context provee métodos para acceder a los pixeles que ya se dibujaron en el contexto: Entonces, para acceder a los pixeles de una imagen… ¡Primero tengo que dibujar la imagen!

Acceder a los pixeles IMPORTANTE: Por políticas de seguridad, Chrome NO permite acceder directamente a los datos de la imagen.

Acceder a los pixeles ¿Cómo accedo a cada pixel? ¿Cómo obtengo las componentes R, G y B?

Acceder a los pixeles ¿Cómo accedo a cada pixel? ¿Cómo obtengo las componentes R, G y B?

Filtros Modifica el valor de un pixel dado una ecuación matemática Este valor puede ser simplemente un coeficiente Blanco y Negro = (R + G + B) / 3