# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
"Hombre cabeza de televisor"

# data[].attributes.body
Personaje: El transformer de piezas

# data[].attributes.body
Rey sapo

# data[].attributes.body
THE UNMACH POWER OF THE WIND SECTION

# data[].attributes.body
The Adiction Warrior

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

# data[].attributes.body
https://golden-spring-limit.glitch.me

# data[].attributes.body
"traigo paz"

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://brocotex-motorizado.glitch.me

# data[].attributes.body
https://ubiquitous-brass-panama.glitch.me

# data[].attributes.body
https://instinctive-feather-freedom.glitch.me/

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.headline
PLANTILLA El mezclador adaptable con código comentado 

# data[].attributes.subject
PLANTILLA El mezclador adaptable con código comentado 

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://safe-branched-coal.glitch.me/

# data[].attributes.headline
El Mezclador imágenes apiladas por defecto

# data[].attributes.subject
El Mezclador imágenes apiladas por defecto

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.headline
Imágenes ubicadas con relación a una "imagen de fondo"

# data[].attributes.subject
Imágenes ubicadas con relación a una "imagen de fondo"

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://emerald-showy-dolphin.glitch.me

# data[].attributes.body
Rey sapo x2

# data[].attributes.body
Deportista

# data[].attributes.body
Oso Deportivo

# data[].attributes.body
https://mariposas-y-abejas-2.glitch.me

# data[].attributes.body
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.

# data[].attributes.body
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.

# data[].attributes.body
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.

# data[].attributes.body
Code

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

# data[].attributes.body
THE UNMACH POWER OF THE WIND SECTION v2

# data[].attributes.body
https://safe-branched-coal.glitch.me

# data[].attributes.body
@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;
}

# data[].attributes.body
Estás en clase de Narrativa Multimedia, y depronto suena una alarma de emergencia, de evaluación

<p id ="op1">[[Sigues en clase, no me la quiero perder]]</p>

[[Llamas a tu dragón]]

[[Te desmayas]]

[[Sales corriendo]]

<!-- comentario -->

# data[].attributes.body
<h1>huyendo de narrativa multimedia</h1>

[[Inicio]]

# data[].attributes.headline
Ejemplo 2 - Alarma en Narrativa Multimedia con CSS modificados

# data[].attributes.subject
Ejemplo 2 - Alarma en Narrativa Multimedia con CSS modificados

# data[].attributes.attachment_link.title
Alarma en clase de Narrativa Multimedia _estilos CSS modificados

# data[].attributes.headline
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.

# data[].attributes.subject
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.

# data[].attributes.headline
Imágenes organizadas horizontalmente + Sonido con reproducción automática

# data[].attributes.subject
Imágenes organizadas horizontalmente + Sonido con reproducción automática

# data[].attributes.body
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"

# data[].attributes.body
Sergio Forero 201912463
Sofía Baptiste 202020661

# data[].attributes.headline
Historia- Todo lo que puede pasar en un día

# data[].attributes.subject
Historia- Todo lo que puede pasar en un día

# data[].attributes.body
Daniel López 202015177

Diana Clavijo 202024054

# data[].attributes.attachment_link.title
Historia Todo lo que puede pasar en un dia _Archivo de entrega_ - Daniel Lopez 202015177 y Diana Clavijo 202024054_

# data[].attributes.headline
Ejemplo Estructura HTML + CSS +JS - Gabinete de curiosidades

# data[].attributes.subject
Ejemplo Estructura HTML + CSS +JS - Gabinete de curiosidades

# data[].attributes.body
Sergio Forero 201912463
Sofía Baptiste 202020661

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://www.figma.com/file/3PtbFUvxoLZC0hY07dHWrB/Untitled

# data[].attributes.body
https://www.figma.com/file/Ga4uV1iaOy5z0vxJtv5IVR/Untitled?node-id=26%3A3

# data[].attributes.body
Juan David Forero Hernández.

# data[].attributes.body
https://www.figma.com/file/ESOfULUhZPJQ9C8wrnm0Cg/Mi-gabinete?node-id=0%3A1

# data[].attributes.body
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;
}

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.headline
2. Posición interna de las imágenes dentro de su cajón 

# data[].attributes.subject
2. Posición interna de las imágenes dentro de su cajón 

# data[].attributes.body
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 */
}

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.headline
3. Imágenes ubicadas en filas de 4-3-1  

# data[].attributes.subject
3. Imágenes ubicadas en filas de 4-3-1  

# data[].attributes.body
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".

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://www.figma.com/file/mllw3TpNPAzQNQa8rhHW4x/Untitled?node-id=6%3A24

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://glitch.com/edit/#!/mellow-brash-shawl

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://glitch.com/edit/#!/jelly-handy-iberis

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
https://glitch.com/edit/#!/verdant-omniscient-gerbil

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
https://equal-amplified-desert.glitch.me

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

# data[].attributes.attachment_link.description
Esta es la carta que Eiji le escribio la Ash, antes de que este último muriera

# data[].attributes.body
https://www.figma.com/file/4dleiaWLpJT30xbWiNvJNr/Untitled?node-id=0%3A1

# data[].attributes.body
https://glitch.com/edit/#!/nuevo-gabinete-de-curiosidades

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
https://gabinetesufrido.glitch.me
https://glitch.com/edit/#!/gabinetesufrido

# data[].attributes.attachment_link.readable_text
"Se trataba, por lo pronto, de realizar un sencillo cotejo. Pero el dactiloscopista, que haía tomado la necrodactilia durante la diligencia de levantamiento, en aquel desorden no aparecía por parte alguna. Y no solamente había desaparecido el dactiloscopista con la necrodactilia, sino que el cadáver del asesino tampoco aparecía. Durante veinte horas o más el cuerpo del criminal permaneció tendido frente a la puerta principal del del Palacio. Después, nadie supo dar razón de él. Con otros cadáveres lo habían recogido en un camión. Bien podía estar en la morgue o en el cementerio. Pero en aquellas dolorosas horas a nadie le importaba saber de los despojos de quien había encendido la mecha de la pavorosa hoguera.

Y aquí de la importancia de las dos corbatas que tenía el cadaver y que el secretario del juzgado permanente no había alcanzado a desnudarle. Al menos, había un punto de referencia para dar con él entre tantos muertos; se trataba de un cadáver que tenía dos corbatas anudadas al cuello."

# data[].attributes.attachment_link.description
"Se trataba, por lo pronto, de realizar un sencillo cotejo. Pero el dactiloscopista, que haía tomado la necrodactilia durante la diligencia de levantamiento, en aquel desorden no aparecía por parte alguna. Y no solamente había desaparecido el dactiloscopista con la necrodactilia, sino que el cadáver del asesino tampoco aparecía.

# data[].attributes.body
https://resisted-wool-moonstone.glitch.me

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
https://glitch.com/edit/#!/lovely-jealous-damselfly

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
https://glitch.com/edit/#!/verdant-omniscient-gerbil

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
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

# data[].attributes.attachment_link.readable_text
"Se trataba, por lo pronto, de realizar un sencillo cotejo. Pero el dactiloscopista, que haía tomado la necrodactilia durante la diligencia de levantamiento, en aquel desorden no aparecía por parte alguna. Y no solamente había desaparecido el dactiloscopista con la necrodactilia, sino que el cadáver del asesino tampoco aparecía. Durante veinte horas o más el cuerpo del criminal permaneció tendido frente a la puerta principal del del Palacio. Después, nadie supo dar razón de él. Con otros cadáveres lo habían recogido en un camión. Bien podía estar en la morgue o en el cementerio. Pero en aquellas dolorosas horas a nadie le importaba saber de los despojos de quien había encendido la mecha de la pavorosa hoguera.

Y aquí de la importancia de las dos corbatas que tenía el cadaver y que el secretario del juzgado permanente no había alcanzado a desnudarle. Al menos, había un punto de referencia para dar con él entre tantos muertos; se trataba de un cadáver que tenía dos corbatas anudadas al cuello."

# data[].attributes.attachment_link.description
"Se trataba, por lo pronto, de realizar un sencillo cotejo. Pero el dactiloscopista, que haía tomado la necrodactilia durante la diligencia de levantamiento, en aquel desorden no aparecía por parte alguna. Y no solamente había desaparecido el dactiloscopista con la necrodactilia, sino que el cadáver del asesino tampoco aparecía.

# data[].attributes.body
https://glitch.com/edit/#!/nuevo-gabinete-de-curiosidades

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
Tada

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
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í.

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
index.html – deserted-nonstop-passenger (glitch.com)

# data[].attributes.attachment_link.description
Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

# data[].attributes.body
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.

# data[].attributes.attachment_link.readable_text
Halo es una de las franquicias de juegos de disparo en primera persona más importante de la industria de los videojuegos. Su universo se situa en un conflicto intergalactico entre la humanidad y un conglomerado de razas alienigenas llamada el Covenant. Todo el conflcito ocurre debido a unos artefactos de destrucción masiva que se les denomina HALOS.

La trilogia original son juegos que marcaron mi infancia y que les tengo cariño. Especialmente por el tercero y su nivel final en el que escapas de una estructura alienígena que esta a punto de explotar.

# data[].attributes.attachment_link.description
Halo es una de las franquicias de juegos de disparo en primera persona más importante de la industria de los videojuegos. Su universo se situa en un conflicto intergalactico entre la humanidad y un conglomerado de razas alienigenas llamada el Covenant. Todo el conflcito ocurre debido a unos artefactos de destrucción masiva que se les denomina HALOS.

# data[].attributes.body
Código.

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.

# data[].attributes.body
https://malachite-jeweled-magnosaurus.glitch.me/

# data[].attributes.attachment_link.readable_text
Esta manilla la compré cuando estaba en el grupo Scout de mi colegio. Tiene varias funcionalidades entre ellas brujula, silbato, cuerda de emergencia y raspador para prender fuego que puede ser usado como cuchilla.

Puede ser muy útil en caso de emergencia.

# data[].attributes.attachment_link.description
Esta manilla la compré cuando estaba en el grupo Scout de mi colegio. Tiene varias funcionalidades entre ellas brujula, silbato, cuerda de emergencia y raspador para prender fuego que puede ser usado como cuchilla. Puede ser muy útil en caso de emergencia.

# data[].attributes.attachment_link.description
Simple, powerful, free tools to create and use millions of apps.