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
Esta clase se dividirá en dos areas principales. La primera se dedicará a entender la lógica de programas utilizados en la publicación electrónica de píxeles y vectores, entendiendo sus particularidades. Se utilizarán páginas locales de html5 para integrar los proyectos y entender las especificidades de la publicación digital. La segunda mitad de la clase se dedicará a entender las herramientas de manejo de tiempo digitales para generar productos y proyectos que 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 las 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 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 weebly.com / wix.com / sites.google.com o su propoio 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!
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. |
|
| Clase |
Descripción |
|
Proyectos |
1
Binario / Pixel
Lunes
02/25 |
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 Personal computer milestones
TextWrangler editor Mac // Komodo Edit PC
Exploren:
http://www.computerhistory.org/timeline
http://seas.upenn.edu/~pws/EMX/before.html
ASCII ART
Binary code / ASCII table (American Standard Code for Information Interchange) / Ascii + HTML
http://www.asciimation.co.nz/
http://www.chris.com/ascii
• CANVAS 5 TUTORIAL
html to download / canvas code to copy / reference
|
|
• 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 vectorial: Utilizando elementos de diseño en el canvas, cren un paisaje abstracto usando solo imágenes vectoriales.
Porcentaje: 5%
|
2
Vectores
Martes
02/26
|
Vectores, Illustrator / InkScape . Exploración de límites de arte vectorial. Transformaciones, efectos, filtros, conversion de imágenes a curvas. Tipografía, fuentes, formato universal. Implicaciones para el diseño, independencia de la resolución. Herramientas, capas. Vectorización de imágenes
Exploren:
http://tv.adobe.com
Learning Illustrator CS y los otros links en LYNDA.COM CS5
History of AI
Chuck Csuri #1 #2 #3 #4 #5
Shapes / Paths / Blob brush #2 / Pen tool #2 / Pathfinder / Shape builder / Swirl / Swirl 2 / 3D Logo / 3D Logo 2 / Clipping mask / Scanner Darkly #2 / Waking Life #2 / Renaissance / Molotov / Pinup / Lichtenstein / Mesh tool / Self Mesh / Live trace #2 /
Exploren:
Propaganda Rusa y WWII American Posters | Yusaku Kamekura | Japanese Industrial Posters | 1920's Japanese GD | Tadanori Yokoo | Design X
|
|
• POEMA VISUAL: Inspirados en los caligramas de Apollinaire, creen un poema visual a partir de manipulación de fuentes sobre guías.
Porcentaje: 10%
• AFICHES: Exploren las galerías de afiches. Inspirados en estos afiches, creen 2 afiches vectorizando sus autoretratos con un mensaje de su elección. Tamaño carta, RGB. Expórtenlos para la red desde Illustrator y súbanlos a sus sitios web, optimizándolos como JPG o PNG a max 800px
Porcentaje: 10% |
3
Pixel
Jueves
02/28
|
El mundo real convertido en píxeles. Adobe Photoshop. Cámaras digitales, scanners. Cómo alterar esa realidad con herramientas digitales. RGB Vs CMYK, resolución, DPI, tamaño de impresión vs. tamaño en píxeles. Capas, herramientas, cortar, copiar, pegar, filtros.
Optimización de archivos, métodos de compresión, diferentes formatos PSD Vs TIFF Vs PNG Vs JPG Vs PIC Vs GIF. particularidades y especificidades de cada formato.
GIMP Open Source
Analicen:
photoshopdisasters.blogspot.com/
Fotoshop by Adobé
Evolution - DOVE
Bruno Metra & Laurence Jeanson
orlan.net
nelsonsullivan.tv
Exploren:
History of Photoshop /
Photomerge Panoramics #1 #2 /
Puppet Warp Tool /
Content Aware Fill /
Bristle Tip Brushes /
8 Bit Vs 16 Bit /
PS 32 Bits Vs 64 Bits / What is RAM?
Smart Objects / Creating an image stack / Stack Mode /
Optimizing your images /
Color sampler / Retouching / Patch tool / History brush tool / Art History Brush tool / Background Eraser / Magic Eraser / Cutout and refine edges / Panoramics #1 #2 / Curves / Pen tool + Filling or Stroke / Timeline animation (3D) / New Mesh from Grayscale / Content aware / Clipping Mask or Path /
http://irinawerning.com/back-to-the-fut/back-to-the-future/
http://irinawerning.com/bttf2/back-to-the-future-2-2011/
• Busquen tutoriales en línea para Photoshop y publiquen los URLs de sus tutoriales favoritos en sus propios sitios web. |
|
• AUTOSCOPIA: alteraciones de autoretratos escaneados. Usando al menos 2 imágenes diferentes de USTEDES MISM@S escaneando sus propios rostros, alteren el resultado usando photoshop, y transfórmense en algo que no son utilizando los efectos de Photoshop. Tamaño carta ( 8.5 x 11 pulgadas ) RGB / 72DPI. Publiquen los resultados OPTIMIZADOS como JPG y GIF en sus sitios web
Porcentaje: 10%
• MORPHING: Inspirados en la obra de Irina Werning y utilizando MorphX creen dos animaciones de 10 segundos cada una, (30fps, 500px de lado mínimo) utilizando 4 imágenes de 4 etapas de su vida radicalmente distintas. Publiquen los videos en sus sitios web.
Porcentaje: 10%
|
4
Animación
Viernes
03/1 |
Herramientas para manejo del tiempo. Animación cuadro a cuadro. Capas. Principios basicos de video digital. Técnicas de animación.
Hedwig: the origin of love
Norman McLaren: Neighbours, Blinkity Blank,
Emile Cohl #1 #2
Winsor McCay Little Nemo / NEMO / Gertie
Walt Disney How did he create Snow White • Steamboat Willie / Skeleton Dance
Felix the Cat History / Feline Folies 19 / Ghost / Skulls / Time / Marcel the shell
BLUBLU / Bottle #2 / Broken Fingaz / Hudson / Eness / Varanese / Japanese Pop Stars / Kinna Grannis / White Stripes / N.A.S.A / Oren Lavie /
Animated gifs: Scifi - Hypnotic - Kevin Weir - Cinemagraphs
Stop Motion 1 // Stop Motion 2 // Time Lapse // HDR Timelapse
• LowMorale Creep
• Supreme Beings of Leisure
|
|
• ANIMACION CUADRO A CUADRO: Creen una animación de 60 segundos, 10 cuadros x seg, 400x300px usando las herramientas de animación de Photoshop. Exporten como 1) QT Animation y 2) QT H.264 y suban este segundo video a sus sitios web y a Youtube. Gócensela!
Porcentaje: 15% |
5
AUDIO
Lunes
03/4 |
Frecuencias: Herzios, Amplitud, harmónicos, teorema de Nyquist, herramientas de audio digital, compresión, formatos.
Norman McLaren Pen Point Percussion //
#1
#2
Concrete
Theremin /
Schaeffer
Chemin de Fer 48 / Varèse Pierre Henry Psyché Rock /
Stockhausen
#2,
#3,
#4
#5 /
Ligeti /
John Cage
Piano
Noise
4'33"
Paik84
27 sounds /
Xenakis,
ScoreLight / Moog ,
Synthesizer
#2
#3 /
Gershon Kingsley - Pop Corn •
Anarchic System /
POST MODERN CRISIS { Cover culture / Satisfaction RS •
DEVO •
BB /
Gloria Jones -
Soft Cell -
Levi's /
ABBA •
Erasure /
Donna Summer •
Bronski Beat
#2 /
Depeche Mode •
Nouvelle Vague }
Kraftwerk MOMA
Robots 74 •
Autobahn 75 /
DISCO:
Patrick Hdez •
Felix DHCat •
Sylvester /
Disco Demolition
//
HOUSE:
DEVO,
Talking Heads
#2,
B52s,
Frankie Knuckles,
Juan Atkins,
Skatt Bros,
Jesse Saunders,
Chip E,
Marshall Jefferson,
Joe Smooth,
Ken Ishii ,
Orbital,
Feedback Max,
DMob Acieed
Cathy Dennis + DMob ,
Black Box,
The Orb,
Happy Mondays,
Joey Beltram,
Goldie,
Lisa Loud,
Leftfield (Johnny Lydon = Rotten),
DJ Pierre Acid,
Daft Punk,
Stone Roses,
Frankie Goes to Hollywood ,
M.A.R.R.S ,
Technotronic ,
Deelite,
EMF,
Stereo MCs,
Soup Dragons,
Hercules and Love Affair
#2
#1
//
DUBSTEP
Stephen Gurley,
Menta,
Benga Vs Scream,
DJ Abstract,
El-B,
Dubstep TV: El-B,
Digital Mystikz,
Mala,
Coki,
Plastician,
Distance,
Skrillex 1
2 /
DUB FX <->
Queen Prophet's song //
HARDCORE
Tom Nijuis
#1
#2
//
INDUSTRIAL 75 & NEW WAVE
Throbbing Gristle •
Cabaret Voltaire
#1 79
#2 •
Einstürzende Neubauten
#2
#3
#4 •
Front 242 •
Nitzer Ebb •
Revolting Cocks •
Atari Teenage Riot /
Cure •
Siouxsie #2 •
Gary Numan /
Fad Gadget /
Palais Schaumburg
#2 /
Liaisons Dangereuses
Bauhaus
Love&Rockets
#2
Joy Division
#2
#3 •
New Order,
New Order (Philippe Decouflé)
Fine Young Cannibals (Philippe Decouflé) , Bizarre <-> String / Eurhythmics •
Culture Club •
DOA •
Smiths •
J&M Chain • Massive Attack •
EBTG -
Deep Dish •
Stereolab
#2 /
Björk
#2 /
Chemical Brothers /
PSB
#2
Village People
/
Underworld •
Fluke /
Faithless •
Robert Miles •
Delerium •
Gorecki /
Opus
ELECTRO - CLASH
Miss Kittin
Miss Kittin •
Fischerspooner •
Felix Da Housecat #2 •
Apoplexie
GIRL POWER Wendy O. Williams & The Plasmatics,
Peaches
#1
#2
#3•
Ladytron #2 • Chicks on Speed
#2
#3,
Leslie Hall
#2
•
Dopplereffekt •
Crystal Castles
#2 •
Crystal Fighters •
Yelle •
DB Blvd
// DJ Culture
DeadMau5
#2 •
Grammys 12 •
Bob Sinclar
(Raffaella Carra)
#2
#3 •
David Guetta •
Infected Mushroom •
Tomorrowland //
Vocaloid
#1
#2
Miku Hatsune
#2
#3
"live",
Gorillaz
|
|
• AUDIO EXPERIMENTAL: Descarguen AUDACITY y creen loops de audio propios para ser usados en Garageband. recomiendo explorar captura y transformación de sus propias voces. Creen con estos loops, y otros sonidos disponibles, la pista de sonido de su propia animación de 60 segundos. Exporten esta versión como QT H.264 y súbanlo a sus sitios web
Porcentaje: 15% |
6
VIDEO
Martes
03/5 |
Definición de Video Digital, herramientas, Quicktime, iMovie y Final Cut. Teoría de montaje, evolución de las herramientas. Tipos de Compresión. Efectos. Teoría de la apropiación. Magnetic recording - H2G2
Kuleshov #1 / #2
• Carolina Zuluaga
• Cold Cut - Timber / Cold Cut - Natural Rhythm
• EBN1 + EBN2 + EBN3 + EBN4
• Historia del Videoarte
Nam June Paik, Peter Campus, Bill Viola #2, Pippilotti Rist, Gary Hill, The Residents, Chris Cunnigham, Michel Gondry, Marco Brambilla, Sculpture,
• http://www.medienkunstnetz.de/
• http://www.ubu.com/film/
• Colombian videoart
• videoartes.com
|
|
• VIDEO PIRATA: Inspirados en Emergency Broadcast Network creen un video pirateado de un minuto reciclando y utilizando videos ajenos. Recontextualicen. 360x240 mínimo / QT H.264 // Suban el video terminado a YouTube y vincúlenlo a su propio sitio web. Mínimo 1 minuto sin créditos, máximo 3 minutos incluyendo créditos.
http://archive.org/ Copyright free films
Porcentaje: 15% |
7
HTML5 / CSS3
Jueves
03/7 |
Evolución del los CSS, creación del HTML5, particularidades de visualización.
Colores,
fuentes, video, audio, transiciones y animaciones. Dreamweaver. Implicaciones del diseño para sitios móviles y apps.
w3schools.com / w3fools.com
Cheat sheet for web design
whatwg
Styling web content with CSS3
caniuse.com = tablas de compatibilidad para HTML5, CSS3, SVG etc.
jimwestergren.com/worst-web-design-ever
webpagesthatsuck.com
GOOGLE FONTS // fontsquirrel // text-wrap: balance;
|
|
• SITIO WEB Creen su sitio web local en HTML5 / CSS3 con todos sus proyectos de la clase.
Porcentaje: 10%
|
8
FINAL
Viernes
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
|
|