SANTIAGO ECHEVERRY

IMAGEN INTERACTIVA MULTIMEDIAL / ESPECIALIZACION EN CREACION MULTIMEDIA


Jueves 27 de Febrero - Sábado 8 de Marzo • 2014

secheverry arroba ut punto edu
 
ANDRADE LAGOS, CARLOS ENRIQUE link DG
BUITRAGO RONDON, LUIS HERNANDO link DI
CASTELLANOS CARDONA, JUAN MANUEL link DI
GONZALEZ FAJARDO, MARIA PAULA link ART
MOLANO ARDILA, MARIA MARGARITA link ART
MORA DIAZ, JUAN CARLOS link DTec
OCHOA GAEVSKA, LAISVIE ANDREA link PSI
OSPINA GARZON, LADY CAROLINA link COM
RODRIGUEZ RINCON, KATHERIN MARCELA link DG
SAENZ MORENO, JUAN PABLO link ING
SANCHEZ DIAZ, MARTHA MARIANA link PSI
SUSA CASTRO, JENNY CAROLINA link DG
VALENCIA VALENCIA, NATALIA link DI
ZABALA GARCIA, DIANA MARCELA link DI

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.

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.

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

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

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

CODIGOS

referencia / HTML5

canvas básico / canvas funciones / coords mouse / canvas anim+coords



Clase Descripción   Proyectos
1
Binario / HTML5

Jueves
Feb 27
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 (CT) 1.1 -> 1.6.2
• 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 y rellenos de color.

Porcentaje: 15%

2
HTML5
Canvas

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

CT 1.6.3 -> 1.7.4
W3.org
• W3S getContext("2d")
• HTML5 Canvas / CURVAS: utilizando curvas vectoriales en el Canvas generen un retrato experimental al estilo comic o cartoon.

Porcentaje: 15%
3
HTML5
Canvas
Javascript

Sábado
Mar 01
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
JS Statements
Mathematical operations
JS Comments
JS Variables
JS Operators
JS Comparisons
JS If...Else
JS Switch
HTML5 Canvas / IMAGEN INTERACTIVA: Utilizando repeat loops, variables y las coordenadas del mouse, creen tres aplicaciones experimentales distintas de imagenes que respondan a las acciones del usuario. Al menos uno de estos proyectos debe tener elementos aleatorios.

Porcentaje: 15%
4
HTML5
Canvas
Javascript
Imágenes

Lunes
Mar 03
Duplicación de canvases, utilización de imagenes, reflexiones, rotaciones, angulos, cuadrantes, context.createImage, context.save() y context.restore(), context.translate() y context.rotate(); Canvas externos como CLASES, no objetos. • HTML5 Canvas / CANVAS VIRTUAL: Creen dos canvases uno con cuadrantes vectoriales, y el otro con imagenes de ustedes mismos en transparencia PNG utilizando los canvases virtuales y agregandolos a traves de iteraciones. Pueden inspirarse en las mandalas tibetanas o pueden utilizar varios canvas externos para generar paisajes - pueden ser abstractos pero controlados.

Porcentaje: 15%
5

IMAGE
DATA


Martes
Mar 04
Matrices e iteraciones de pixeles, context.getImageData, descomposición interactiva de la imagen. Formatos de video para HTML5, integración con CSS, manipulación de la imagen, Audio. Fragmentación del pixel.

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

Porcentaje: 15%



6

Vectores

Miercoles
Mar 05

Funciones matemáticas, Math.sin / Math.cos / Math.atan / Distancias, ángulos, repeticiones cíclicas, contadores vs iteraciones.
MATH : creen un canvas en donde exploran propiedades geométricas usando ángulos, senos, cosenos, arcttangentes y otras funciones matemáticas, estudiando la visualización de elementos numéricos.

Porcentaje: 15%
7

HTML5 / CSS


Viernes
Mar 07
Cascading Style Sheets, principios esenciales de diseño interactivo usando CSS3, transiciones, rotaciones, elementos visuales. Propiedades visuales de una página en html. HTML5 / CSS3: creen una página local de HTML5 en donde exploran las propiedades de publicación y control de imágenes, canvas y texto usando CSS3. Todas las imágenes deben ser de ustedes.

Porcentaje: 10%
8

FINAL

Sábado
03/8


 
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