# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-0

# data[].attributes.headline
[1] h1, h4, background-color, color, margin, display

# data[].attributes.subject
[1] h1, h4, background-color, color, margin, display

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-1

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-2

Mover elementos en html

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-3

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-4

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-5

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-6

# data[].attributes.body
bit.ly/3kD4FuM

# data[].attributes.body
Julian Esteban Duque Muñoz. 201912298
Link: https://uploads.knightlab.com/storymapjs/f2b11d580b354dc4a6604bf4a60d8525/los-lugares-que-visite-estas-vacaciones/index.html

# data[].attributes.body
Laura Coral
202111197

# data[].attributes.body
Yael Salcedo - 201923130

# data[].attributes.body
https://uploads.knightlab.com/storymapjs/4883fed2c602c4e03b4d68f8455c3086/vacaciones-diciembre-2022/index.html

# data[].attributes.body
https://glitch.com/edit/#!/even-cloudy-acapella

# 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
Ejemplo position: relative vs. position: absolute

# data[].attributes.subject
Ejemplo position: relative vs. position: absolute

# data[].attributes.body
https://glitch.com/edit/#!/2023nm1-uso-de-imagenes

# data[].attributes.body
https://glitch.com/edit/#!/uso-de-imagen

# data[].attributes.body
https://uploads.knightlab.com/storymapjs/454d0a5cfb7cd4be3efe7990ff58a85a/vacaciones-2022/index.html

# data[].attributes.headline
El mezclador - Adaptable, position: relative

# data[].attributes.subject
El mezclador - Adaptable, position: relative

# data[].attributes.body
https://glitch.com/edit/#!/el-mezclador-v2-adaptable

# data[].attributes.headline
El mezclador - Tamaño fijo, position: absolute

# data[].attributes.subject
El mezclador - Tamaño fijo, position: absolute

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

# data[].attributes.headline
El mezclador - Imágenes apiladas por defecto, position: relative

# data[].attributes.subject
El mezclador - Imágenes apiladas por defecto, position: relative

# data[].attributes.body
https://glitch.com/edit/#!/el-mezclador-v2---imagenes-apiladas-por-defecto

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

# 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/#!/seasoned-spiritual-heliotrope

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

# data[].attributes.body
https://glitch.com/edit/#!/efficacious-rounded-august

# 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/#!/steep-universal-process

# 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/#!/narrativa-multimedia

# 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
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
https://glitch.com/edit/#!/big-spiral-rhythm

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

# data[].attributes.body
https://glitch.com/edit/#!/collage-multimedia-2

# 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/#!/nm2023-davidlobo-collage

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-camilamoreno-collagev2

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-mariapaula

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-ana-collage

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-julianduque-collage

# data[].attributes.body
https://glitch.com/edit/#!/el-mezclador-recuadro

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

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-1

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

# 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
Descargar archivo "Escapando de Narrativa Multimedia.html"

# data[].attributes.body
Descargar archivo "Contenido.html"

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-2

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

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

# data[].attributes.body
Descargar archivo "Imágenes organizadas horizontalmente + sonido.html"

# data[].attributes.body
https://docs.google.com/presentation/d/1L33QCPw2IPKiLjfaLRwOzYPojW6MZqKkYRQHAxuXB8g/edit?usp=sharing

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-0

# data[].attributes.attachment_link.title
Efimero - Maria Jose Rodriguez y Julian D. Silva - copia

# data[].attributes.headline
Paula Romano 201622941 y Natalia Márquez Reyes - 202025147

# data[].attributes.subject
Paula Romano 201622941 y Natalia Márquez Reyes - 202025147

# data[].attributes.attachment_link.description
A simple yet astute way for developers and designers to discover the size of their browser window

# data[].attributes.body
https://glitch.com/edit/#!/gabinete-paso-1

# data[].attributes.body
https://glitch.com/edit/#!/gabinete-paso-2

# data[].attributes.body
https://glitch.com/edit/#!/gabinete-paso-3

# data[].attributes.body
https://glitch.com/edit/#!/gabinete-paso-4

# data[].attributes.body
https://glitch.com/edit/#!/gabinete-paso-5

# data[].attributes.body
https://glitch.com/edit/#!/steep-universal-process

# 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/#!/nm2023-1-sesion8-3

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-4

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-5

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-6

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-7

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-9

# data[].attributes.body
https://glitch.com/edit/#!/nm2023-1-sesion8-10

# data[].attributes.body
@import url(//fonts.googleapis.com/css?family=Epilogue);

# data[].attributes.body
Para compartir el prototipo de Figma deben hacer lo siguiente:

1. Hacer clic en el botón azul [Share], ubicado en la esquina superior derecha.
2. Hacer clic en [Copy link], ubicado en la esquina inferior izquierda de la ventana emergente.
3. Pegar ese link en un post aquí con su nombre.

# 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.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/proto/rUK35NiVp2nxoTgdSagJXI/Untitled?node-id=20%3A52&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1

# data[].attributes.body
https://glitch.com/edit/#!/interesting-mixed-index

# 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/#!/gabinete-criaturas-medievales

# 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/#!/suave-ubiquitous-clove

# 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/#!/gabineteeee

# 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