SANTIAGO ECHEVERRY

ARTE INTERACTIVO / ESPECIALIZACION EN CREACION MULTIMEDIA

Miércoles 24 de Febrero - Viernes 4 de Marzo • 2016

secheverry arroba ut punto edu
•  http://andes.santiago.bz
 
CODIGO PARA COPIAR


ESTUDIANTES    
Diego Fernando Ardila Galves web DG
Edna Viviana Benavides Troya web ARTE
Maria Elvira Jaramillo Cabanzo web COM
Sandra Carolina Laverde Pereira web DIS IND
Juan Carlos Lozano web DG
Leonardo Peñuela Bernal web DG
Silvia Milena Rendon Siempira web ING IND

TABLA DE NOTAS
  5.0 100 > 98
  4.5 97 > 93
  4.0 92 > 87
  3.5 86 > 83
  3.0 82 > 77
  2.5 76 > 70
  2.0 70 > 60
  1.0 60 > 00

Descripción

Imagen Interactiva Multimedial es un curso destinado a explorar las capacidades creativas de las herramientas digitales a nuestra disposición desde un punto de vista estético y experimental, sin olvidar las implicaciones del diseño interactivo.

En esta clase exploraremos la historia, evolución y teoría de las tecnologías digitales para comprender el potencial creativo y a la vez contextualizar los programas y computadores usados en el mercado contemporáneo.

Estrategia y Proceso

La clase se dedicará a entender la lógica de programas utilizados en la publicación electrónica de píxeles y vectores, entendiendo sus particularidades desde el código mismo. Se utilizarán páginas locales de html5 para integrar los proyectos y entender las especificidades de la publicación digital. Los proyectos serán publicados en el sitio web individual de cada un@ de l@s estudiantes y en el servidor previsto para la clase en andes.santiago.bz

Habrá un proyecto específico para cada clase y dependiendo del tiempo y la cantidad de estudiantes, haremos críticas individuales. De lo contrario, avanzaremos rápidamente y esperaremos a la crítica final para evaluar los resultados de cada estudiante específicamente.

Los proyectos están pensados para motivar a l@s alumn@s a explorar l as herramientas y los programas que utilizarán en sus futuras carreras, pero de ninguna manera el curso se dedicará a estudiar un programa o plataforma únicos. Los estudiantes deberán explorar por su propia cuenta los manuales y los tutoriales disponibles en la red para avanzar en la clase.

Lecturas / Requisitos

Cada alumn@ deberá crear su propio SITIO WEB para esta clase en sites.google.com // weebly.com // wix.com o su propio servidor ( si es posible, mucho mejor ). En este sitio web se publicarán todas las tareas y proyectos para la clase. Además se espera que cada alumno tenga su propia cuenta en YouTube ya que acá estarán publicando sus videos y animaciones (OJO: derechos de autor).

Idealmente, cada alumn@ deberá tener osu propio disco duro externo o su propio mini usb drive de al menos 4GB para guardar sus proyectos. Compartan sus proyectos en folder publico de cada computador para poder estudiar el codigo localmente en el laboraorio de computadores previsto.

¡La asistencia a clase es OBLIGATORIA! ¡Cualquier ausencia es catastrófica! La puntualidad es ESENCIAL.

NOTAS 

Debido a la falta de tiempo, se evaluarán los proyectos en conjunto al final de la clase , cuando se revisen todos los sitios web. Dependiendo del progreso de la clase podrá haber nuevos proyectos o se cambiará la naturaleza de alguna tarea. En la nota final se incluirá la participación en clase, la puntualidad, la asistencia y el tener los trabajos terminados a tiempo.

HTML 5 TUTORIALES

html5canvastutorials.com
html5doctor.com/an-introduction-to-the-canvas-2d-api/
MOZILLA tutorial
canvas cheat sheet
HTML5 elementos
tutorialspoint.com/html5

ILLUSTRATOR TO CANVAS // TOOLS


http://blog.mikeswanson.com/ai2canvas
Tutorials

SVG TUTORIALS

tutorialspoint.com/html5/html5_svg.htm
adobe.com/inspire/2013/09/exporting-svg-illustrator.html

EDITORES DE CODIGO DE FUENTE ABIERTA

TextWrangler Mac // Komodo Edit PC/MAC





Clase Descripción   Proyectos
1
Binario / HTML5

MIE
Feb 24
Presentación de los objetivos de la clase, lecturas requeridas, estadísticas de los estudiantes.

De lo análogo a lo digital. Bit/Bytes. Eniac, tuvos de vacío, transistores. El primer PC. Aproximaciones artísticas al arte digital. ASCII art, Imagen realista vs. imagen vectorial. Evolución del software y el hardware, GUI guidebookgallery.org, APPLE OS. 1984 ASCII ART CGI

Introducción al HTML5 con el objeto Canvas y Javascript. Figuras basicas: Líneas, Rect, colores, trazos, rellenos lineales y gradiales.

CANVAS TUTORIAL
• Publiquen sus primeras impresiones sobre el arte digital y una breve introducción sobre ustedes mism@s.

• Envíenme un email ANTES DE LA CLASE SIGUIENTE desde su correo personal dándome el URL de sus sitios web.

HTML5 Canvas / IMAGEN ABSTRACTA: Utilizando elementos de diseño en el canvas, cren un paisaje abstracto usando líneas, rectángulos, arcos y rellenos lineales y radiales de color.
NO SE PUEDE USAR ILLUSTRATOR, TODO EL CODIGO DEBE SER A MANO!



2
HTML5
Canvas

JUE
Feb 25
Arcos, Circulos, Curvas Cuadráticas y Bezier; Figuras complejas, Fuentes, texto, manipulación del canvas a traves de CSS

W3.org
• W3S getContext("2d")
• HTML5 Canvas / CURVAS: utilizando curvas vectoriales en el Canvas generen un retrato experimental al estilo comic o cartoon.
NO SE PUEDE USAR ILLUSTRATOR, TODO EL CODIGO DEBE SER A MANO!

Porcentaje: 14%
3
HTML5
Canvas
Javascript

VIE
Feb 26
mouseX, mouseY, counter. Funciones de tiempo, introducción a la programación interactiva con Javascript. Iteraciones, condiciones, variables, manipulación en tiempo real, aleatoriedad

JS Reference - MOZILLA // Functions / functions2 //Mathematical operations // JS Comments // JS Variables // JS Operators // JS Comparisons // JS If...Else //
JS Switch
HTML5 Canvas / IMAGEN INTERACTIVA: Utilizando iteraciones, variables y las coordenadas del mouse, creen tres aplicaciones experimentales distintas de imágenes que respondan a las acciones del usuario. Al menos uno de estos proyectos debe tener elementos aleatorios.
NO SE PUEDE USAR ILLUSTRATOR, TODO EL CODIGO DEBE SER A MANO!

Porcentaje: 14%
4
HTML5
Imágenes

SAB
Feb 27
Utilizacióny optimización de imágenes, reflexiones, rotaciones, ángulos, context.save() y context.restore(), context.translate(), context.rotate(), context.scale(); • HTML5 Canvas / imágenes: Creen un canvas con 5 imágenes tomadas por y/o de ustedes mismos en transparencia PNG, agregándolos a traves de iteraciones / repeat loops

Porcentaje: 14%
5
HTML5
VIDEO

LUN
FEB 29
Formatos de video en HTML5, edición básica, manipulación, transformación, optimización. Streaming video, propiedades geométricas.

Miro Video Converter
MPEG Streamclip
Miro
• HTML5 / VIDEO: utilizando al menos 3 videos personales de máximo 180 px de ancho/alto y 10 segundos en loop, creen un canvas manipulando las propiedades visuales de estos clips

Porcentaje: 15%

6
HTML5
CANVASES
MULTIPLES

MAR
Mar 01

Duplicación de canvases, el canvas como un objeto externo, exportación de vectores como canvas en Illustrator. Canvases externos como capas y como clases. Vectores. Cuadrantes. Tipografía básica. Manipulación de Texto. El texto como imagen.

• HTML 5 / MANDALAS:

1)
VISUAL: Inspirados en las mandalas tibetanas, creen una mandala interactiva en el canvas, diseñando los cuadrantes y elementos esenciales bien sea usando Illustrator y exportándolo como HTML5 o bien escribiendo el código ustedes mism@s. SI SE PUEDE USAR ILLUSTRATOR

Porcentaje: 14%

2) POEMA: Inspirados en ejemplos de Tipografía Kinética,seleccionen un poema de no mas de 20 lineas y creen un canvas interactivo en donde todos los elementos visuales provienen de caracteres y fuentes disponibles en el computador del usuario, SIN vectorizar las fuentes en Illustrator. El texto no debe ser necesariamente legible o inteligible

Porcentaje: 14%


7
IMAGE DATA //
MATH


JUE
Mar 03
Matrices e iteraciones de pixeles, context.getImageData, descomposición interactiva de la imagen. Fragmentación en píxeles. Fragmentación de video. El poder de la grilla. Funciones matemáticas: Sin, Cos, Modulus.
http://www.santiago.bz/html5/getImageData/
imageData_1.html
imageData_2.html
imageData_3.html
imageData_4.html
vidData_01.html
vidData_02.html
• IMAGEDATA: fragmenten una imagen de ustedes mismos y manipúlenla de manera interactiva usando funciones matemáticas. Exploren múltiples combinaciones de fórmulas matemáticas.

Porcentaje: 15%
8

FINAL

VIE
Mar 04


 
Evaluación general de todos los proyectos de los alumnos. Apertura de temas sobre el futuro de la Hipermedia.

Nota final: todos los proyectos para esta clase deben ser publicados, activos e integrados en su sitio web, con vínculos de retorno a www.santiago.bz