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 – 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
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 © 2020 </footer> </div> </body> </html>
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 |