Narrativa Multimedia by Jaime Andres Rodriguez Gomez

1

jaimea_rodriguezg — 2022-10-14 02:45:35 UTC

2

jaimea_rodriguezg — 2022-10-14 02:47:45 UTC

3

jaimea_rodriguezg — 2022-10-14 02:51:13 UTC

4

jaimea_rodriguezg — 2022-10-14 02:52:49 UTC

5

jaimea_rodriguezg — 2022-10-14 02:53:53 UTC

6

jaimea_rodriguezg — 2022-10-14 02:54:46 UTC

Imágenes

jaimea_rodriguezg — 2022-10-14 03:07:50 UTC

2022-10-14 16:38:31 UTC

2022-10-14 16:38:48 UTC

jaimea_rodriguezg — 2022-10-14 18:20:15 UTC

Ejemplo final

jaimea_rodriguezg — 2022-10-14 18:55:27 UTC

El Mezclador

jaimea_rodriguezg — 2022-10-14 20:02:58 UTC

Carlos Andrés Polanía - 202115632

2022-10-18 01:27:50 UTC

"Hombre cabeza de televisor"

Daniel López - 202015177

dlopezd1 — 2022-10-18 04:20:43 UTC

Personaje: El transformer de piezas

Juan David Forero Hernandez

2022-10-18 14:30:42 UTC

THE UNMACH POWER OF THE WIND SECTION

Sofía Baptiste 202020661

2022-10-18 21:16:24 UTC

Rey sapo

Sergio Forero Rubiano 201912463

2022-10-19 00:57:45 UTC

Pablo Porto 201923798

2022-10-19 03:26:28 UTC

The Adiction Warrior

https://majestic-gainful-moth.glitch.me

Sofia Alvarez 202020561

2022-10-19 04:11:53 UTC

https://golden-spring-limit.glitch.me

Angelica Riascos - 202014744

mriascos1 — 2022-10-19 05:20:11 UTC

"traigo paz"

gj

jaimea_rodriguezg — 2022-10-19 13:14:56 UTC

Diana Clavijo - 202024054

dclavijop3 — 2022-10-19 14:57:48 UTC

jose salamanca 201821905

2022-10-19 16:43:23 UTC

Juan José López 202021400

2022-10-19 16:58:08 UTC

https://brocotex-motorizado.glitch.me

Gabriel Rodríguez

2022-10-19 17:14:21 UTC

https://ubiquitous-brass-panama.glitch.me

Melissa Martelo

2022-10-19 17:48:29 UTC

https://instinctive-feather-freedom.glitch.me/

Divs relative

jaimea_rodriguezg — 2022-10-19 17:56:56 UTC

PLANTILLA El mezclador adaptable con código comentado

jaimea_rodriguezg — 2022-10-19 18:09:40 UTC

Juliana Martínez - 201913179

2022-10-19 18:11:13 UTC

https://safe-branched-coal.glitch.me/

El Mezclador imágenes apiladas por defecto

jaimea_rodriguezg — 2022-10-19 20:40:41 UTC

Imágenes ubicadas con relación a una "imagen de fondo"

jaimea_rodriguezg — 2022-10-20 13:42:37 UTC

Juan José López - 202021400

jjlopezd1_2 — 2022-10-20 16:19:19 UTC

https://emerald-showy-dolphin.glitch.me

Sofía Baptiste 202020661

2022-10-20 23:10:51 UTC

Rey sapo x2

Carlos Andrés Polanía - 202115632

2022-10-20 23:13:51 UTC

Deportista

Pablo Toro Corzo - 202022229

ptoroc2 — 2022-10-21 00:04:21 UTC

Oso Deportivo

Sofia Alvarez - 202020561

2022-10-21 01:53:44 UTC

https://mariposas-y-abejas-2.glitch.me

Daniel López - 202015177

dlopezd1 — 2022-10-21 02:01:19 UTC

Traigo paz adaptable

mriascos1 — 2022-10-21 03:05:47 UTC

Diana Clavijo - 202024054

dclavijop3 — 2022-10-21 05:45:59 UTC

201821905 jose salamanca (adaptable)

2022-10-21 14:23:35 UTC

1. Efímero

jaimea_rodriguezg — 2022-10-21 14:41:15 UTC

Observaba con gran interés las edificaciones de Teusaquillo. De repente un bus de esos azules me cubrió la visión. Estaba enfurecida y golpeé fuertemente la ventana llamando la atención de uno de sus pasajeros. Él volvió su cabeza hacia mi y cruzamos la mirada. Sus ojos oscuros se postraron en los míos, penetrando un velo en mi alma. Moví mi cabello tímidamente sin perderlo de vista. Me saludó con la mano y se golpeó torpemente. Lo amé en ese instante. Nos sonreímos con nostalgia al mismo tiempo, el semáforo cambió a verde y los buses tomaron caminos separados, nosotros también.

Daniela del Pila Rodríguez Rodrigo, 22 años, Kennedy.

2. Un clarividente en la ciudad

jaimea_rodriguezg — 2022-10-21 14:41:40 UTC

Durante años, cientos de curiosos han llegado a San Victorino con la intención de conocer el futuro por medio de la lectura de sus zapatos. Este clarividente ha tenido tanto éxito, que en una ocasión le pronosticó cáncer de garganta a un tinterillo con sólo validar el desgaste de lengüeta de sus botines. El mismo hombre que pasa sus días en una caseta atestada de zapatos, es quien ahora descifra las vidas que inevitablemente comienzan a desvanecerse en las huellas de la indiferencia y la soledad; así lo interpreta, con la mirada inmóvil en el pie de un mendigo.

Jorge Andrés Rodríguez Pulido, 31 años, Barrios Unidos.

3. La caída

jaimea_rodriguezg — 2022-10-21 14:42:05 UTC

Sáenz quería saltar, acabar con su vida. El dinero ahorrado para la universidad de los hijos, para su retiro, el viaje a Europa, tantos años de esfuerzo, todo había desaparecido. Titubeó antes de lanzarse, chilló cuando sus manos se aferraron al aire. Con un pie todavía en el alféizar escuchó que su mujer entraba, -¿Qué pasa, querido?- le oyó decir, pero Sáenz ya iniciaba su caída, se precipitaba gritando, quedándose sin aliento. Sintió el golpe, el dolor en la nariz. Su mujer lo miraba desde el borde de la cama, sonriendo.

Julián Alfredo Reyna Karkomés, 35 años, Usaquén.

criatura digital Emilio Davila

2022-10-21 15:24:51 UTC

Code

https://glitch.com/edit/#!/tangy-spicy-limburger

Juan David Forero Hernandez - 202012104

2022-10-21 17:33:46 UTC

THE UNMACH POWER OF THE WIND SECTION v2

Juliana Martínez - 201913179

2022-10-22 00:34:25 UTC

https://safe-branched-coal.glitch.me

Ejemplo 1 - Stylesheet

jaimea_rodriguezg — 2022-10-26 18:10:05 UTC

@import url(//fonts.googleapis.com/css?family=Fasthand);

body{
font-family: 'Fasthand';
}

#imagen{
width: 50%;
margin-left: 20px;
}

h1{
font-size: 30px;
color: red;
}

#op1 a{
color: blue;
}

Ejemplo 1 - Passage html

jaimea_rodriguezg — 2022-10-26 18:11:11 UTC

Estás en clase de Narrativa Multimedia, y depronto suena una alarma de emergencia, de evaluación

[[Sigues en clase, no me la quiero perder]]

[[Llamas a tu dragón]]

[[Te desmayas]]

[[Sales corriendo]]

Ejemplo 1 - Portada html

jaimea_rodriguezg — 2022-10-26 18:11:36 UTC

huyendo de narrativa multimedia

[[Inicio]]

Ejemplo 2 - Alarma en Narrativa Multimedia con CSS modificados

jaimea_rodriguezg — 2022-10-26 18:14:58 UTC

Ejemplo 3 - Archivo Twine con las dos maneras de agregar imágenes. Ubicación existente en la web o usando Glitch como banco de imágenes.

jaimea_rodriguezg — 2022-10-26 20:59:10 UTC

Imágenes organizadas horizontalmente + Sonido con reproducción automática

jaimea_rodriguezg — 2022-10-28 21:20:50 UTC

En este archivo html que pueden abrir como proyecto en Twine, pueden ver el menú de imágenes en el pasaje "Menu de imágenes" y pueden ver el sonido con reproducción automática en el pasaje "Nadar en el río"

Efímero

2022-11-01 01:09:29 UTC

Sergio Forero 201912463
Sofía Baptiste 202020661

Historia- Todo lo que puede pasar en un día

dlopezd1 — 2022-11-01 02:33:51 UTC

Daniel López 202015177

Diana Clavijo 202024054

Ejemplo Estructura HTML + CSS +JS - Gabinete de curiosidades

jaimea_rodriguezg — 2022-11-02 18:25:57 UTC

Efímero

2022-11-04 01:00:41 UTC

Sergio Forero 201912463
Sofía Baptiste 202020661

jaimea_rodriguezg — 2022-11-04 17:15:27 UTC

Gabinete ejemplo

jaimea_rodriguezg — 2022-11-04 17:28:02 UTC

jaimea_rodriguezg — 2022-11-04 17:30:41 UTC

jose salamanca

2022-11-04 17:31:12 UTC

Pablo Toro Corzo - 202022229

2022-11-04 17:31:33 UTC

Juan José López Delgado - 202021400

2022-11-04 17:32:35 UTC

https://www.figma.com/file/3PtbFUvxoLZC0hY07dHWrB/Untitled

Sergio Forero Rubiano

2022-11-04 17:34:10 UTC

https://www.figma.com/file/Ga4uV1iaOy5z0vxJtv5IVR/Untitled?node-id=26%3A3

Daniel Lopez - 202015177

2022-11-04 17:34:13 UTC

Gabinete.

2022-11-04 17:34:59 UTC

Juan David Forero Hernández.

Angelica Riascos

2022-11-04 17:35:10 UTC

Gabriel Jacob Rodríguez

2022-11-04 17:40:14 UTC

https://www.figma.com/file/ESOfULUhZPJQ9C8wrnm0Cg/Mi-gabinete?node-id=0%3A1

Sofía Baptiste 202020661

2022-11-05 15:39:04 UTC

1. Cuadrícula de 4 columnas

jaimea_rodriguezg — 2022-11-05 17:46:49 UTC

El cambio principal para que eso ocurra está en los estilos del contenedor #gabinete. El ejemplo original de la clase tenía display: flex. Para este caso se requiere usar display: grid. Y en los .cajones que contienen las imágenes del gabinete (.cajon-s), toca omitir la asignación de un ancho y alto determinado.

#gabinete {
background-color: blue;
width: 80%;
margin-left: 10%;
margin-right: 10%;
display: grid; /* para que los elementos hijos se organicen formando una cuadrícula*/
grid-template-columns: auto auto auto auto; /* genera 4 columnas con un ancho automático */
}

.cajon-S {
position: relative; /* para que se vayan apilando en el orden en el que están en el HTMl */
/* para que el display: grid (que es una propiedad asignada a su padre #gabinete) funcione de manera proporcional, no debe asignarse ningún tamaño */
/*
width: 150px;
height: 150px;
*/
outline-style: solid;
outline-color: white;
margin: 5px;
}

2. Posición interna de las imágenes dentro de su cajón

jaimea_rodriguezg — 2022-11-05 19:18:39 UTC

Para esto hay que usar la propiedad 'object.position' en los estilos de la imagen y asignarle qué tanto queremos que se desplace horizontal y verticalmente

#elemento1{
/*object-position: 0px 0px;*/
object-position: 0% 0px; /* el 0% de la imagen (el limite izquierdo o su origen), coincide con el límite izquierdo del cajón padre */
}

#elemento2{
/*object-position: -10px 0px;*/
object-position: 25% 0px;
}

#elemento3{
/*object-position: -25px 0px;*/
object-position: 50% 0px; /* se mueve hasta que la mitad horizontal de la imagen quede en la mitad de su padre */
}

#elemento4{
/*object-position: -40px 0px;*/
object-position: 100% 0px; /* se mueve hacia la izquierda hasta que el límite derecho de la imagen (el 100% de la imagen) entra en el cajon padre */
}

3. Ventana dentro de otra ventana

jaimea_rodriguezg — 2022-11-05 21:00:35 UTC

Diana Clavijo 202024054

dclavijop3 — 2022-11-06 17:22:58 UTC

3. Imágenes ubicadas en filas de 4-3-1

jaimea_rodriguezg — 2022-11-07 18:53:11 UTC

Para obtener un resultado que permita un nivel de control adecuado es necesario crear dentro del div 'gabinete' una fila en un div distinto: un contenedor para la fila de 4 elementos, otro contenedor para 3 elementos y un último contenedor para el elemento que está solo.

En los estilos de cada contenedor ('fila1', 'fila2' y 'fila3') se asigna la propiedad "display: flex".

Pablo Porto y Carlos Polania

2022-11-09 17:24:35 UTC

https://www.figma.com/file/mllw3TpNPAzQNQa8rhHW4x/Untitled?node-id=6%3A24

Angelik

2022-11-09 18:23:15 UTC

Jacob Rodriguez

2022-11-09 18:23:41 UTC

https://glitch.com/edit/#!/mellow-brash-shawl

Diana Clavijo

2022-11-09 18:25:44 UTC

Melissa Martelo

2022-11-09 18:27:39 UTC

https://glitch.com/edit/#!/jelly-handy-iberis

Jose Salamanca

2022-11-09 18:35:22 UTC

Melissa Martelo 2

2022-11-09 18:46:45 UTC

https://glitch.com/edit/#!/verdant-omniscient-gerbil

Sofía Baptiste

2022-11-09 18:48:05 UTC

https://equal-amplified-desert.glitch.me

https://glitch.com/edit/#!/equal-amplified-desert

Sofia Alvarez Aristizabal - 202020561

2022-11-10 04:12:59 UTC

https://www.figma.com/file/4dleiaWLpJT30xbWiNvJNr/Untitled?node-id=0%3A1

Sofia Alvarez Aristizabal -202020561

2022-11-10 16:42:48 UTC

https://glitch.com/edit/#!/nuevo-gabinete-de-curiosidades

Sergio Forero Rubiano - 201912463

2022-11-10 19:18:10 UTC

https://gabinetesufrido.glitch.me
https://glitch.com/edit/#!/gabinetesufrido

Pablo Toro Corzo - 202022229

ptoroc2 — 2022-11-11 01:20:41 UTC

https://resisted-wool-moonstone.glitch.me

Pablo Porto 201923798

2022-11-11 01:54:35 UTC

https://glitch.com/edit/#!/lovely-jealous-damselfly

Carlos Andrés Polanía - 202115632

2022-11-11 17:21:39 UTC

Melissa Martelo 201913158

2022-11-11 18:17:26 UTC

https://glitch.com/edit/#!/verdant-omniscient-gerbil

Carlos Andrés Polanía - 202115632

2022-11-11 18:17:58 UTC

Jose salamanca

2022-11-11 18:46:35 UTC

Sergio Forero Rubiano - 201912463

2022-11-11 18:47:36 UTC

https://gabinetesufrido.glitch.me
https://glitch.com/edit/#!/gabinetesufrido

Le luché mucho al zoom de la imagen pero no se logró (parece que la imagen está movida del div del zoom y el resultado del zoom aparece estático) :c

Sofia Alvarez Aristizabal - 202020561

2022-11-11 18:47:39 UTC

https://glitch.com/edit/#!/nuevo-gabinete-de-curiosidades

Pablo Toro Corzo - 202022229

2022-11-11 18:48:32 UTC

Juan Forero

2022-11-11 23:39:22 UTC

Tada

Gabriel Rodríguez

grodriguezp1 — 2022-11-12 00:54:20 UTC

https://glitch.com/edit/#!/mellow-brash-shawl

Quería que se pudiera volver a reproducir el video y el audio una vez cerrada sus respectivas ventanas: no lo conseguí.

Pablo Porto 201923798

2022-11-12 02:04:08 UTC

index.html – deserted-nonstop-passenger (glitch.com)

Daniel Lopez - 202015177

dlopezd1 — 2022-11-12 02:54:49 UTC

Página live cite.

Uno de los retos que no pude lograr con la página fue que quería que cada ventana, cuando se le diera click y abriera, reproducirá automáticamente música del universo correspondiente. También, otro elemento que no logre por más de que lo intente fue la idea de hacer que los hipervínculos en algunas ventanas me abrieran una nueva pestaña en el navegador. En vez de abrir el link en la misma página.

Daniel Lopez - 202015177

dlopezd1 — 2022-11-12 02:55:28 UTC

Código.

Juan José López Delgado 202021400

2022-11-12 03:05:37 UTC

https://malachite-jeweled-magnosaurus.glitch.me/

Juan José López 202021400

2022-11-12 03:10:49 UTC

Sofía Baptiste

2022-11-12 04:19:56 UTC

https://glitch.com/edit/#!/equal-amplified-desert

Angelica Riascos-202014744

mriascos1 — 2022-11-12 04:49:20 UTC

Aunque le puse las márgenes en porcentaje a cada ventana que tenía el error de correrse hacia un lado por defecto, en dispositivos móviles sigue ocurriendo el error, como si se ignorara por completo la instrucción de la margen si no es en un PC.

Diana Clavijo_ 202024054

dclavijop3 — 2022-11-12 06:05:25 UTC

Extrañamente los videos aparecen del tamaño que les asigné por individual, pero a veces, después de la primera vista los videos cambian de tamaño. Revisé todo y está aparentemente bien. Traté de colocar una escalera grande al lado de todas las imágenes, pero no logré colocarla donde deseaba. Quizás sea un problema de glitch.

Criterios gabinete

jaimea_rodriguezg — 2022-11-16 17:00:41 UTC

jaimea_rodriguezg — 2022-11-18 17:11:11 UTC

Juliana Martínez - 201913179

2022-11-21 04:41:07 UTC

https://glitch.com/edit/#!/lime-striped-mine

Links entre archivos html dentro de un mismo sitio web

jaimea_rodriguezg — 2022-11-22 18:21:07 UTC

2022-11-23 18:14:24 UTC

2022-11-23 18:40:48 UTC

Menú fijo en la parte superior de la página

jaimea_rodriguezg — 2022-11-25 15:03:15 UTC

Relato hipertextual

2022-11-25 15:03:20 UTC

Carlos Polanía
Pablo Porto
Melissa Martelo

pre entrega

2022-11-30 16:36:32 UTC

Hotel Cecil

jaimea_rodriguezg — 2022-11-30 17:20:21 UTC

Gorila en la Morgue

2022-11-30 18:38:04 UTC

https://nam10.safelinks.protection.outlook.com/ap/w-59584e83/?url=https%3A%2F%2Funiandes-my.sharepoint.com%2F%3Aw%3A%2Fg%2Fpersonal%2Fc_polaniar_uniandes_edu_co%2FEfYCBBzk8mJHilsp0ZYRQVIBp2oOPb_cM6gI1UWug3u8sA%3Fe%3D4%253a1M6lgA%26at%3D9&data=05%7C01%7Cm.martelo%40uniandes.edu.co%7C84a204b54a7748c987a908dacf0fa8b6%7Cfabd047cff48492a8bbb8f98b9fb9cca%7C0%7C0%7C638049963449006949%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Ey%2FXAWwX2vXHMRUpX%2FxQM%2FmAjhYF1EcK0Rc4OhxRpEE%3D&reserved=0
https://we.tl/t-JA9NsQffpX

Pre entrega Uniandina

2022-11-30 19:09:06 UTC

Boo, fantasmas

2022-12-01 22:40:01 UTC

https://recorrido-fantasmal.glitch.me

https://glitch.com/edit/#!/recorrido-fantasmal

El gorila en la calle Morgue

2022-12-02 03:58:15 UTC

Pablo Porto
Melissa Martelo
Carlos Polanía

Hotel Cecil

2022-12-02 16:46:39 UTC

Sofia Alvarez
Pablo Toro
Juan jose Lopez
Jose andres Salamanca

Melissa Martelo

2022-12-02 16:47:13 UTC

https://glitch.com/edit/#!/instinctive-feather-freedom

Indicaciones para la presentación

jaimea_rodriguezg — 2022-12-02 17:05:20 UTC

Cada equipo tendrá un espacio de 10 minutos para mostrar y explicar el proyecto, describiendo de qué manera están implemendando los temas vistos (tanto a nivel técnico como conceptual), mientras hacen un recorrido guiado y comentado del sitio. Lo que me interesa saber, más allá de que haya componentes que funcionen o no, es ¿por qué el sitio es cómo es? ¿qué decisiones hubo detrás a nivel conceptual y narrativo?

Universidad de los Andes

mriascos1 — 2022-12-02 17:33:04 UTC

Recorrido fantasmal

2022-12-02 18:09:38 UTC

https://recorrido-fantasmal.glitch.me
Juliana Martinez
Sofia Baptiste
Diana Clavijo
Sergio Forero

Gartic

2022-12-02 18:39:28 UTC