PUJ

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: 29 de enero, 2021
terminación del semestre: 4 de junio, 2021
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.
Archivos:
https://fmx311.santiago.bz/FMX311/PS21
https://fmx311.santiago.bz/FMX311/FA20/

Estudiantes • 1er Trimestre 2021
Ana Maria Garcia Herrera
Brayan Alexander Carpio Espinel
Catalina Alvarez Rozo
Daniela Alejandra Villacres Afonso
Juan David Sicard Garnica
Juan Pablo Forero Velandia
Juliana Osuna Rivera
Laura Viatela Echeverri
Luisa Isabel Restrepo Ospina
Mateo Romero Ospina
Monica Maria Duarte Almonacid
Nathalie Rocio Baquiro Guerrero
Nicolas Lopez Avella
Sebastian Vega Camargo
Sergio Camilo Salazar Sierra
Tania Fernanda Lopez Burgos

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
Rocha | Galindo | Lozano | Mateus | Nuñes | Silva

2) 10% Imagen Interactiva (CSS3)
Crear un poema interactivo usando solo imágenes en HTML5 usando CSS3 únicamente: mínimo 9 imágenes transparentes PNG 24 de máximo 300px de ancho o alto, me voy a fijar muy bien en la limpieza del corte alrededor de cada imagen, y una imagen de fondo, del tamaño del contenedor. Todas las imágenes tienen que ser 100% propias.
IMAGENES: https://www.w3schools.com/css/css3_images.asp
TRANSFORMACIONES:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
https://www.w3schools.com/cssref/css3_pr_transform.asp
PREFIJOS: http://shouldiprefix.com/
FILTROS https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Galindo / Silva / Ruiz / Rocha / Pinzon / Mateus / Bernardini

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
Mateus / Lozano / Mateus / Nuñez / Pinzon / Rocha / Barnett / Bernardini / Nordhagen

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% Trabajo final que integre todo lo aprendido en el semestre, con todos los bombos y platillos

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 – 955.0
94 – 904.5
89 – 854.0
84 – 803.5
79 – 753.0
74 – 702.5
69 – 652.0
64 – 601.5
59 – 551.0
54 – 500.5
49 – 00.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>

Estudiantes Agosto – Diciembre de 2020

Abril Luengas, Paula Andreapaula.abril
Galindo Van Strahlen, Lauragalindovlaura
Gómez Garzón, Julianagomezg.juliana
Lozano Chaparro, Valeriavaleria_lozano
Martínez Bueno, Fabio Augustomartinez.fabio
Mateus Rojas, Nataliamateus.natalia
Núñez Orozco, Vanessanunezvanessa
Pinzón Herrera, Luna Lucíapinzon-luna
Rangel Acevedo, Silvia Julianasilvia.rangel
Rocha Carrillo, Gabrielagabriela.rocha
Rodríguez Blanco, Daniel Felipero-daniel
Ruiz Cortes, Angela Mariaangela_ruiz
Silva Carriazo, Daniela Sofíadanielasilva
Tellez Moreno, Diana Milenad_tellez