PUJ – FMX 311 ONLINE PRODUCTION

Nombre: Intermedia Redes
Profesor: Santiago Echeverry [ echeverry_s ]
Intensidad: 3 horas semanales
Horario: viernes de 2:00 a 5:00 pm hora Colombia
Inicio semestre: 3 de agosto
terminación del semestre: 4 de diciembre
Número de semanas: 18
Componente: Teórico-Práctico
Modo de enseñanza: Tele-presencia vía MS Teams usando los correos oficiales de la PUJ. El profesor dará las instrucciones de conexión cada semana.
Archivo: https://art311.santiago.bz/FA20/

Estudiantes Agosto – Diciembre de 2020

Abril Luengas, Paula Andrea	paula.abril
Galindo Van Strahlen, Laura	galindovlaura
Gómez Garzón, Juliana	gomezg.juliana
Lozano Chaparro, Valeria	valeria_lozano
Martínez Bueno, Fabio Augusto	martinez.fabio
Mateus Rojas, Natalia	mateus.natalia
Núñez Orozco, Vanessa	nunezvanessa
Pinzón Herrera, Luna Lucía	pinzon-luna
Rangel Acevedo, Silvia Juliana	silvia.rangel
Rocha Carrillo, Gabriela	gabriela.rocha
Rodríguez Blanco, Daniel Felipe	ro-daniel
Ruiz Cortes, Angela Maria	angela_ruiz
Silva Carriazo, Daniela Sofía	danielasilva
Tellez Moreno, Diana Milena	d_tellez

Objetivo de Formación

Desarrollar propuestas visuales que dialoguen en forma y contenido con las ideas y herramientas de redes de comunicación y tecnologías de comunicación aplicadas a la investigación en artes.

Resultados de aprendizaje esperados

Crear proyectos artísticos que dialoguen con la relación entre arte y tecnología explorando críticamente los contextos de producción y difusión de dispositivos tecnológicos.
Adquirir herramientas conceptuales y de creación que permitan aproximarse de una manera crítica a la actualidad de los medios.
Comprender los nuevos medios de comunicación como fuente de posibilidades de creación artística.
Identificar críticamente las posibilidades sociales y las implicaciones éticas de las tecnologías de comunicación.

Contenidos temáticos

Protocolo
Dispositivo
Redes
Net Art
Hipermedia y términos asociados
Interactividad
Herramientas básicas para programar

Presentación Específica

En nuestra clase de Intermedia Redes vamos a explorar la creación y autoexpresión personal utilizando HTML5 / CSS3 / Javacript / JQuery para desarrollar proyectos experimentales que exploren:
• Nociones de Interactividad desde la perspectiva de
Motivación > Acción > Reacción > Satisfacción
• Tipografía kinética avanzada utilizando CSS3
• Manipulación de hipermedios fusionando CSS3 / JQuery y Javascript
• Las diferencias de la creación para el cliente vs el servidor
• Implementación de diseño parallax
• Diseño de sitios universales para múltiples plataformas
• Autopromoción creando un portafolio personal

Proyectos en orden cronológico

1) 10% Tipografía Kinética (CSS3)
Crear un poema interactivo usando solo tipografía kinética en HTML5 usando CSS3 únicamente

2) 10% Imagen Interactiva (CSS3)
Crear un poema interactivo usando solo imágenes en HTML5 usando CSS3 únicamente
FILTROS https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Rocha | Galindo | Lozano | Mateus | Nuñes | Silva

3) 10% Texto e Imagen Interactivos ( CSS3 + Javascript)
Crear un poema interactivo usando solo tipografía kinética e imágenes en HTML5 usando CSS3 únicamente VER ANEXO AL FINAL
Animación: w3schools.com/css/css3_animations.asp

4) 10% Multimedios Interactivos ( HTML5 Video+Audio, Javascript)
Crear un poema interactivo usando tipografía kinética, imágenes, video y audio en HTML5 usando CSS3 y Javascript AUDACITY
https://fmx311.santiago.bz/html5-css3/

5) 10% Hoja de Vida Interactiva ( CSS3 avanzado )
Crear su Hoja de Vida interactiva usando elementos de multimedios y Javascript / CSS3
https://fmx311.santiago.bz/resume/

6) 10% Fan Page (Parallax)
Crear una página para su artista favorito usando las nociones de Parallax Design
https://fmx311.santiago.bz/fan-page/
http://www.santiago.bz/js/parallax/

7) 10% Participación en clase

8) 30% Portafolio Personal con todos los proyectos del semestre, además de un área de autopromoción de su propio gusto.

Herramientas

• Dreamweaver o Visual Studio Code
• Google Chrome o Mozilla Firefox ( NO Safari ni Internet Explorer)
• Miro Video Converter
• Photoshop / Illustrator <•> Gimp / Inkscape

Todos los tutoriales están en Inglés, así como todos los recursos y guías. El código y la programación requieren un conocimiento técnico del inglés.

AUSENCIAS

• La asistencia a clase es MUY IMPORTANTE.
• Los proyectos deben ser entregados en la mañana de cada clase, para ser evaluados en la crítica colectiva por la tarde. Máximo al medio día.
• Todxs lxs alumnxs deben estar presentes y participar activamente en la clase para beneficio colectivo.
• La puntualidad es esencial: llegar a clase tarde o sin preparación adecuada quitará puntos en la nota de participación

100 – 95	5.0
94 – 90	4.5
89 – 85	4.0
84 – 80	3.5
79 – 75	3.0
74 – 70	2.5
69 – 65	2.0
64 – 60	1.5
59 – 55	1.0
54 – 50	0.5
49 – 0	0.0

Importante: debido a las circunstancias inusuales que estamos experimentando a nivel global, este programa puede tener cambios inesperados. Por lo tanto tenemos que mantener una mente abierta si. llegan a suceder eventos extraordinarios.

RECURSOS ADICIONALES Y BIBLIOGRAFÍA

Mozilla Developers: https://developer.mozilla.org/en-US/docs/Web/CSS

CSS3: http://www.santiago.bz/css/

Javascript: http://www.santiago.bz/js/

JQuery: http://www.santiago.bz/jquery/

Christiane Paul • Digital Art
https://www.thamesandhudsonusa.com/books/digital-art-softcover-third-edition

Rachel Greene • Internet Art
https://thamesandhudsonusa.com/books/internet-art-softcover

Scott McCloud – Understanding Comics
http://scottmccloud.com/2-print/1-uc/

Donald A. Norman • The Design of Everyday Things
https://mitpress.mit.edu/books/design-everyday-things

Andrew Bonime & Ken C. Pohlman: Writing for New Media
amazon.com/Writing-New-Media-Essential-Interactive/dp/0471170305

JAVASCRIPT:
blog.udemy.com/javascript-tutorial-learn-the-basics

udemy.com

codecademy.com

w3schools.com -> HTML5 + Javascript + JQuery + JSON

TIPOGRAFIA KINETICA

Visual Poem
https://youtu.be/wWpMB6gmBYA

Kinetic Typography

Fight Club
https://vimeo.com/35717352

Seven
https://vimeo.com/36157868

Pulp Fiction
https://vimeo.com/81900537

Helvetica
https://vimeo.com/4232821

Curiosity
https://youtu.be/8fsH8qxDDY4

Concrete Poetry Collection – Excellent reference
http://movingpoems.com/category/videopoems/concrete-poetry/

Design
https://youtu.be/Dsv9pl8znPA

OTTARAS: Long Rong Song
https://vimeo.com/143451232

Liberté
https://vimeo.com/116259758

Mesostic Poem
https://vimeo.com/75220414

Words by VIV G
http://movingpoems.com/2012/10/words-by-viv-g/

Written in my dream
https://vimeo.com/39698481

Interactive / Digital Typography
MESOSTIC GENERATOR http://mesostics.sas.upenn.edu/

FORMATO PARA HTML5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> TITULO VA ACA </title>
<style type="text/css">
    body,td,th {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    color: rgba(255,255,255,1);
 }
 body {
    background-color: rgba(0,0,0,1);
 }
 a:link {
    color: rgba(0,255,0,1);
    text-decoration: none;
 }
 a:visited {
    text-decoration: none;
    color: rgba(0,255,255,1);
 }
 a:hover {
    text-decoration: underline;
    color: rgba(255,255,0,1);
 }
 a:active {
    text-decoration: none;
    color: rgba(255,0,0,1);
 }
 header, footer {
    position: relative;
 }
 #contenedor {
    position: relative;
    max-width: 1200px;
    min-height: 700px;
    width: 90%;
 }
</style>
</head>
 
<body>
  <div align="center">
  <header>
    ENCABEZADO
    </header>
  <div id="contenedor">
   
   
   
  </div>
  <footer>
    Intermedia Redes &copy; 2020
    </footer>
  </div>
</body>
</html>