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/" + ] } ] }