SANTIAGO ECHEVERRY

IMAGEN INTERACTIVA MULTIMEDIAL / ESPECIALIZACION EN CREACION MULTIMEDIA

Lunes 22 de Febrero - Viernes 6 de Marzo • 2015

secheverry arroba ut punto edu
•  http://andes.santiago.bz
 
ESTUDIANTES    
Jorge Luis Bandera Martínez link DG
Alejandra Borrás García link DG
Marcela Andrea Díaz Moreno link INFO
Carlos Andrés González Abello link MULT
William Fernando Hernández link MULT
Fernando Moreno López link POLIT
Mónica Páramo Alvarez link COM
Sergio Leonardo Peña Medina link COM
Felipe Quintero Moreno link DG
Giovanny Robayo Rincón link DG
Felipe Vergara Lombana link FILO
Verónica Villegas Cabal link DG

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

TextWrangler editor Mac // Komodo Edit PC


CODIGO PARA COPIAR



Clase Descripción   Proyectos
1
Binario / HTML5

Lunes
Feb 23
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!

Porcentaje: 12.5%

2
HTML5
Canvas

Martes
Feb 24
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: 12.5%
3
HTML5
Canvas
Javascript

Jueves
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: 12.5%
4
HTML5
Imágenes

Viernes
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: 12.5%
5
HTML5
VIDEO

Lunes
Mar 02
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: 12.5%

6
HTML5
CANVASES
MULTIPLES

Martes
Mar 03

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: 12.5%

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: 12.5%


7
IMAGE DATA //
MATH


Jueves
Mar 05
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: 12.5%
8

FINAL

Viernes
Mar 06


 
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