diff --git a/challenges/01-front-end-development-certification/basic-ziplines.json b/challenges/01-front-end-development-certification/basic-ziplines.json index 6a0cbbabe9..e04a49ddae 100644 --- a/challenges/01-front-end-development-certification/basic-ziplines.json +++ b/challenges/01-front-end-development-certification/basic-ziplines.json @@ -61,30 +61,48 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Prepárate para los Ziplines", + "nameEs": "Prepárate para los Proyectos de Desarrollo de Interfaces", "descriptionEs": [ + [ + "http://i.imgur.com/OAD6SJz.png", + "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.", + "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.", + "" + ], + [ + "http://i.imgur.com/WBetuBa.jpg", + "Un programador frustado golpeando la pantalla de su computador.", + "Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas.", + "" + ], + [ + "http://i.imgur.com/p2TpOQd.jpg", + "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", + "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar.
No te preocupes - ya lo has entendido.", + "" + ], [ "http://i.imgur.com/6WLULsC.gif", "Un gif que muestra cómo crear una cuenta en Codepen.", - "Para nuestros desafíos de front end, los Ziplines, usaremos un editor muy famoso llamado Codepen, el cual es completamente basado en el navegador. Abre CodePen y pulsa en \"Sign up\" en la esquina superior derecha, luego ve hacia abajo donde se encuentra el plan gratuito (free plan) y pulsa en \"Sign up\". Da clic en el botón que dice \"Use info from GitHub\", luego agrega tu dirección de correo electrónico y crea una contraseña. Pulsa el botón que dice \"Sign up\". Luego, en la esquina superior derecha , da clic en \"New pen\".", + "Para nuestros desafíos de interfaces, usaremos un editor muy famoso llamado Codepen, el cual es completamente basado en el navegador. Abre CodePen y pulsa en \"Sign up\" en la esquina superior derecha, luego ve hacia abajo donde se encuentra el plan gratuito (free plan) y pulsa en \"Sign up\". Da clic en el botón que dice \"Use info from GitHub\", luego agrega tu dirección de correo electrónico y crea una contraseña. Pulsa el botón que dice \"Sign up\". Luego, en la esquina superior derecha , da clic en \"New pen\".", "http://codepen.io" ], [ "http://i.imgur.com/U4y9RJ1.gif", "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.", - "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. Tambiénn puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.", + "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.", "" ], [ "http://i.imgur.com/G9KFQDL.gif", "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.", - "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.", + "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.", "" ], [ "http://i.imgur.com/Gi3aig0.gif", "Un gif que muestra el proceso de agregar Animate.css y jQuery a tu proyecto.", - "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Animate.css. Haz clic en el engrane en la esquina superior izquierda de la ventana de JS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige jQuery. Provemos que Animate.css y jQuery se cargaron propiamente. En la ventana de JS, agrega el siguiente código para hacer tu elemento h1 rebotar: $(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });.", + "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Animate.css. Haz clic en el engrane en la esquina superior izquierda de la ventana de JS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige jQuery. Comprobemos que Animate.css y jQuery se cargaron propiamente. En la ventana de JS, agrega el siguiente código para hacer rebotar tu elemento h1: $(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });.", "" ], [ @@ -115,20 +133,16 @@ "tests": [], "type": "zipline", "challengeType": 3, - "nameEs": "Tribute", + "nameEs": "Construye una página Tributo", "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/pgNRoJ.", + "Objetivo: Crea una aplicación con CodePen.io que funcionalmente sea similar a esta: http://codepen.io/FreeCodeCamp/full/wMQrXV", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Puedes usar cualquier librería o APIs que necesites.", - "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", - "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", - "Historia de usuario: Como usuario, puedo navegar las publicaciones recientes de Camper News.", - "Historia de usuario: Como usuario, puedo pulsar en una publicación y ser llevado al URL original de la historia.", - "Historia de usuario opcional: Como usuario, puedo ver cuántos votos tiene cada historia.", - "Pista: Este es el endpoint del API de Noticias calientes de Camper News: http://www.freecodecamp.com/news/hot.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado.", - "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", - "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo ver una página tributo con una imagen y un texto.", + "Historia de usuario: Puedo pulsar un enlace que me llevará a un sitio web externo con mayor información sobre el tema.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", + "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. ", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true }, @@ -176,25 +190,22 @@ ], "nameEs": "Construye una página web para tu portafolio", "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/VemmoX/.", + "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/VemmoX/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Puedes usar cualquier librería o APIs que necesites.", - "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", - "Pista: Si no quieres iniciar desde cero, puedes bifurcar (fork) la siguiente plantilla simple de Bootstrap en CodePen: http://codepen.io/FreeCodeCamp/pen/mJNqQj.", - "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", - "Historia de usuario: Como usuario, puedo acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.", - "Historia de usuario: Como usuario, puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador.", - "Historia de usuario: Como usuario, puedo ver una imagen de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa placeholders.)", - "Historia de usuario opcional: Como usuario, puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.", + "Historia de usuario: Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.", + "Historia de usuario: Puedo ver una imagen de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa plantillas.)", + "Historia de usuario opcional: Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.", "No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias apps en CodePen, así que puedes regresar luego para actualizar tu portafolio.", "Hay varias buenas plantillas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.", "Ten en mente que CodePen.io ignora la función Window.open(), así que si quieres abrir alguna ventana usando jQuery, necesitarás utilizar como objetivo un elemento de ancla invisible como el siguiente: <a target='_blank'>.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", - "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", - "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" + "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. ", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true, "challengeType": 3 } ] -} \ No newline at end of file +}