diff --git a/seed/challenges/04-video-challenges/dom.json b/seed/challenges/04-video-challenges/dom.json
index c124967988..bb9b66c266 100644
--- a/seed/challenges/04-video-challenges/dom.json
+++ b/seed/challenges/04-video-challenges/dom.json
@@ -29,7 +29,16 @@
]
],
"type": "hike",
- "challengeType": 6
+ "challengeType": 6,
+ "nameEs": "El DOM: ¿Qué es el Modelo de objetos del documento?",
+ "descriptionEs": [
+ "El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
+ "Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
+ "De hecho, puedes hacer muchas cosas con el DOM. De hecho, ya lo estás haciendo desde el momento en que estás escribiendo código en JS y jQuery.",
+ "Puedes insertar nuevos elementos, o cambiar el estilo o contenido de los elementos previamente existentes.",
+ "Esto se puede hacer con javascript puro, como: document.getElementById(id), element.getElementsByTagName(name), o document.createElement(name).",
+ "También puedes usar librerías como jQuery para simplificar, estandarizar y automatizar la manipulación del DOM, como por ejemplo: $('#caja2').append('Esto se agregará a caja2!')"
+ ]
},
{
"id": "56b15f15632298c12f31518e",
@@ -56,7 +65,15 @@
]
],
"type": "hike",
- "challengeType": 6
+ "challengeType": 6,
+ "nameEs": "El DOM: Estilo en el encabezado, código al pie de página",
+ "descriptionEs": [
+ "Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (header
) y que los enlaces al código (JS) deben estar incluidos al pie de página (footer
). ¿Alguna vez te preguntaste por qué?",
+ "Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
+ "Esto tiene que ver con la forma en que el navegador decide si ha cargado suficiente información para mostrar. Hay un evento llamado 'DOMContentLoaded', y una vez que ese evento ocurre, lo que sea que se haya cargado hasta entonces será mostrado.",
+ "El DOM le dirá al navegador que está listo una vez que el código HTML ha sido cargado, y a veces el CSS y JS no se han alcanzado a cargar. Si pones el CSS en el encabezado y el JS al pie de página, puedes estar seguro que todo el contenido será cargado antes que el DOM desencadene el evento 'DOMContentLoaded', el cual muestra tu contenido al usuario.",
+ "Esta es una explicación simplificada, al igual que la que encontrarás en el resto de estos videos. Si quieres más información, creo que el siguiente enlace es de bastante ayuda: ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/"
+ ]
}
]
}