diff --git a/challenges/jquery.json b/challenges/jquery.json index 004a73c04c..31ef9ba867 100644 --- a/challenges/jquery.json +++ b/challenges/jquery.json @@ -48,7 +48,17 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.", + "descriptionEs": [ + "Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.", + "Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.", + "En primer lugar, añade un elemento de programa script en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ", + "Tu navegador ejecutará todo JavaScript dentro de un elemento script, incluyendo jQuery.", + "Dentro de tu elemento script, agrega este código: $(document).ready(function () { A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento script) con: })", + "Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (function) se ejecutará tan pronto como tu navegador haya cargado la página.", + "Esto es importante porque sin su función de documento listo, su código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores." + ] }, { "id": "bad87fee1348bd9bedc08826", @@ -97,7 +107,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige elementos HTML usando selectores y jQuery", + "descriptionEs": [ + "Ahora tenemos una función de documento listo.", + "Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un $, al que suele referirse como operador de signo de dólar, o simplemente como bling. ", + "jQuery a menudo selecciona un elemento HTML con un selector, y luego hace algo a ese elemento.", + "Por ejemplo, hagamos que todos tus elementos button reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ", + "$(\"button\").addClass(\"animated bounce\")", + "Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase bounce de Animate.css a sus elementos button." + ] }, { "id": "bad87fee1348bd9aedc08826", @@ -147,7 +166,17 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige elementos por su clase usando jQuery", + "descriptionEs": [ + "¿Viste como hicimos rebotar todos tus elementos button? Los seleccionamos con $(\"button\"), y luego les añadimos algunas clases CSS con .addClass(\"animated bounce\");. ", + "Acabas de usar la función addClass() de jQuery, que te permite añadir clases a los elementos.", + "En primer lugar, apuntemos a tus elementos div que tengan la clase well usando el selector $(\".well\").", + "Ten en cuenta que, al igual que con las declaraciones CSS, escribes un . antes del nombre de la clase.", + "A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y shake.", + "Por ejemplo, podrías hacer que todos los elementos con la clase text-primary se sacudieran añadiendo lo siguiente a tu función de documento listo:", + "$(\".text-primary\").addClass(\"animated shake\");" + ] }, { "id": "bad87fee1348bd9aeda08826", @@ -199,7 +228,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige elementos por ID usando jQuery", + "descriptionEs": [ + "También puedes elegir un elemento por su atributo id.", + "Primero selecciona tu elemento button con el id target3 mediante el uso del selector $(\"#target3\").", + "Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un # antes de la identificación.", + "A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y fadeOut.", + "He aquí cómo haces que desaparezca el elemento button con la identificación target6:", + "$(\"#target6\").addClass(\"animated fadeOut\")." + ] }, { "id": "bad87fee1348bd9aeda08726", @@ -250,7 +288,12 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elimina tus funciones jQuery", + "descriptionEs": [ + "Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.", + "Elimina esas tres funciones de jQuery de tu función de documento listo, pero deja intacta la declaración de la función de documento listo." + ] }, { "id": "bad87fee1348bd9aed908626", @@ -303,7 +346,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige un mismo elemento con múltiples selectores jQuery", + "descriptionEs": [ + "Ahora ya sabes tres formas de seleccionar elementos: por tipo: $(\"button\"), por clase: $(\".btn\"), y por identificación $(\"#target1\"). ", + "Aunque es posible agregar varias clases en una sola llamada a .addClass(), vamos a añadirlas al mismo elemento de tres maneras diferentes.", + "Usa cada uno de los selectores jQuery vistos y la función addClass():", + "Agrega la clase animated a todos los elementos con tipo button.", + "Agrega la clase shake a todos los botones con clase .btn.", + "Agrega la clase btn-primary al botón con identificación #target1." + ] }, { "id": "bad87fee1348bd9aed918626", @@ -354,7 +406,14 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elimina clases de un elemento con jQuery", + "descriptionEs": [ + "De la misma manera que puedes agregar clases a un elemento con la función addClass() de jQuery, puedes eliminarlas con la función removeClass().", + "He aquí cómo puedes hacerlo para un botón específico:", + "$(\"#target2\").removeClass(\"btn-default\");", + "Vamos a quitar la clase btn-default de todos nuestros elementos button." + ] }, { "id": "bad87fee1348bd9aed908826", @@ -408,7 +467,17 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Cambia el CSS de un elemento usando jQuery", + "descriptionEs": [ + "También podemos cambiar el CSS de un elemento HTML directamente con jQuery.", + "jQuery tiene una función llamada .css() que te permite cambiar el CSS de un elemento.", + "Así es como cambiaríamos su color a azul:", + "$(\"#target1\").css(\"color\", \"blue\");", + "Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.", + "Elimina tus selectores jQuery, dejando en blanco la función de documento listo.", + "Selecciona target1 y cambia su color a rojo." + ] }, { "id": "bad87fee1348bd9aed808826", @@ -459,7 +528,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Desactiva un elemento usando jQuery", + "descriptionEs": [ + "También puedes cambiar propiedades que no son CSS de los elementos HTML con jQuery. Por ejemplo, puedes desactivar los botones. ", + "Al deshabilitar un botón, se volverá gris y no podrá pulsarse.", + "jQuery tiene una función llamada .prop() que te permite ajustar las propiedades de los elementos.", + "He aquí cómo puedes desactivar todos los botones:", + "$(\"button\").prop(\"disabled\", true);", + "Desactiva sólo el botón target1." + ] }, { "id": "564944c91be2204b269d51e3", @@ -558,7 +636,13 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elimina un elemento usando jQuery", + "descriptionEs": [ + "Ahora quitemos un elemento HTML de tu página usando jQuery.", + "jQuery tiene una función llamada .remove() que eliminará un elemento HTML por completo", + "Elimina el elemento target4 de la página utilizando la función .remove()." + ] }, { "id": "bad87fee1348bd9aed608826", @@ -610,7 +694,15 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Usa appendTo para mover elementos con jQuery", + "descriptionEs": [ + "Ahora intentemos mover elementos de un div a otro.", + "jQuery tiene una función llamada appendTo() que le permite seleccionar elementos HTML y anexarlos a otro elemento.", + "Por ejemplo, si quisiéramos mover target4 de nuestro pozo (well) derecho a nuestro pozo izquierdo, usaríamos:", + "$(\"#target4\").appendTo(\"#left-well\");", + "Mueve tu elemento target2 de tu left-well a tu right-well." + ] }, { "id": "bad87fee1348bd9aed508826", @@ -664,7 +756,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Clona un elemento usando jQuery", + "descriptionEs": [ + "Además de mover elementos, puedes copiarlos de un sitio a otro.", + "jQuery tiene una función llamada clone() que hace una copia de un elemento.", + "Por ejemplo, si quisiéramos copiar target2 de nuestro left-well a nuestro right-well, usaríamos:", + "$(\"#target2\").clone().appendTo(\"#right-well\");", + "¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como encadenamiento y es una manera conveniente de hacer las cosas con jQuery. ", + "Clona tu elemento target5 y añadelo a tu left-well." + ] }, { "id": "bad87fee1348bd9aed308826", @@ -722,7 +823,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige el padre de un elemento usando jQuery", + "descriptionEs": [ + "Cada elemento HTML tiene un elemento padre del cual hereda propiedades.", + "Por ejemplo, tu elemento h3 jQuery Playground tiene el elemento padre <div class=\"container-fluid\">, que a su vez tiene el padre body. ", + "jQuery tiene una función llamada parent() que te permite acceder al padre de cualquier elemento que haya seleccionado.", + "He aquí un ejemplo de cómo se utiliza la función parent() si quisieras darle al elemento padre del elemento left-well un color de fondo azul:", + "$(\"#left-well\").parent().css(\"background-color\", \"blue\")", + "Dale al padre del elemento #target1 un color de fondo (background-color) rojo." + ] }, { "id": "bad87fee1348bd9aed208826", @@ -778,7 +888,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige los hjos de un elemento usando jQuery", + "descriptionEs": [ + "Muchos elementos HTML tienen hijos, los cuales heredan sus propiedades de sus elementos padres", + "Por ejemplo, cada elemento HTML es un hijo de tu elemento body, y tu elemento h3 \"jQuery Playground\" es un hijo de tu elemento <div class=\"container-fluid\">.", + "jQuery tiene una función llamada children() que te permite acceder a los hijos de cualquier elemento que hayas seleccionado.", + "He aquí un ejemplo de cómo se utiliza la función children() para darle a los hijos de tu elemento left-well el color azul:", + "$(\"#left-well\").children().css(\"color\", \"blue\")", + "Da a todos los hijos de tu elemento right-well el color verde." + ] }, { "id": "bad87fee1348bd9aed108826", @@ -835,7 +954,16 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige un hijo específico de un elemento usando jQuery", + "descriptionEs": [ + "Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ", + "Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.", + "jQuery usa selectores CSS para elegir elementos, El selector CSS .clase:nth-child(i) le permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puede usarse un elemento", + "He aquí cómo le asignarás la clase bounce al tercer elemento de cada pozo:", + "$(\".target:nth-child(3)\").addClass(\"animated bounce\");", + "Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos con la clase target." + ] }, { "id": "bad87fee1348bd9aed008826", @@ -892,7 +1020,14 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Elige elementos con numeración par usando jQuery", + "descriptionEs": [ + "También puedes elegir todos los elementos con numeración par.", + "He aquí cómo elegirías todos los elementos impares con clase target y como les agregarías unas clases:", + "$(\".target:odd\").addClass(\"animated shake\");", + "Intenta seleccionar todos los elementos de número par y agrégales las clases animated y shake." + ] }, { "id": "bad87fee1348bd9aecb08826", @@ -948,7 +1083,14 @@ "" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Usa jQuery para modificar la página entera", + "descriptionEs": [ + "Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!", + "jQuery también puede elegir el elemento body.", + "Así es como haríamos que el cuerpo entero desapareciera: $(\"body\").addClass('animated fadeOut')", + "Pero vamos a hacer algo más dramático. Añade las clases animated y hinge a tu elemento body." + ] } ] }