From a11e95e53e81b2900b6138f239e901a2ba49e33a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladimir=20T=C3=A1mara=20Pati=C3=B1o?= Date: Sun, 21 Feb 2016 21:43:51 -0500 Subject: [PATCH 01/10] Translation to spanish of api-projects. Thanks for initial translation to @josectello (see https://github.com/FreeCodeCamp/FreeCodeCamp/pull/7016/ ) Closes #6513 --- .../api-projects.json | 66 +++++++++++++++++-- 1 file changed, 60 insertions(+), 6 deletions(-) diff --git a/challenges/03-back-end-development-certification/api-projects.json b/challenges/03-back-end-development-certification/api-projects.json index f5d0722932..83686f2717 100644 --- a/challenges/03-back-end-development-certification/api-projects.json +++ b/challenges/03-back-end-development-certification/api-projects.json @@ -98,7 +98,7 @@ "type": "Waypoint", "challengeType": 7, "isRequired": false, - "nameEs": "Prepárate para los Basejumps", + "nameEs": "Prepárate para nuestros Proyectos de Desarrollo al lado del servidor", "descriptionEs": [ [ "http://i.imgur.com/4IZjWZ3.gif", @@ -206,7 +206,18 @@ "tests": [], "type": "basejump", "challengeType": 4, - "isRequired": true + "isRequired": true, + "nameEs": "Microservicio de Marca de Tiempo", + "descriptionEs": [ + "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://timestamp-ms.herokuapp.com/ y despliegala en Heroku.", + "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", + "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", + "Historia de Usuario: Puedo pasar una cadena como parámetro y comprobará si contiene o no una marca de tiempo para Unix o una fecha en lenguaje natural en inglés (Ejemplo: January 1, 2016).", + "Historia de Usuario: Si tiene una marca de tiempo para Unix, devuelve tanto la marca de tiempo de Unix como la fecha en lenguaje natural.", + "Historia de Usuario: Si no contiene una fecha ni una marca de tiempo para Unix, devolverá esas propiedades en null.", + "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo 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)." + ] }, { "id": "bd7158d8c443edefaeb5bdff", @@ -226,7 +237,16 @@ "tests": [], "type": "basejump", "challengeType": 4, - "isRequired": true + "isRequired": true, + "nameEs": "Microservicio para analizar el encabezado de una petición", + "description": [ + "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://cryptic-ridge-9197.herokuapp.com/api/whoami/ y despliegala en Heroku.", + "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", + "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", + "Historia de Usuario: Puedo obtener la dirección IP, idioma y sistema operativo de mi navegador.", + "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo 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)." + ] }, { "id": "bd7158d8c443edefaeb5bd0e", @@ -248,7 +268,19 @@ "tests": [], "type": "basejump", "challengeType": 4, - "isRequired": true + "isRequired": true, + "nameEs": "Microservicio para acortar URLs", + "descriptionEs": [ + "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://shurli.herokuapp.com/ y despliegala en Heroku.", + "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", + "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", + "Historia de Usuario: Puedo pasar una URL como parámetro y recibiré una URL acortada en la respuesta JSON.", + "Historia de Usuario: Si paso una URL inválido que no siga el formato válido http://www.exmaple.com, en cambio la respuesta JSON contendrá un mensaje de error.", + "Historia de Usuario: Cuando visite el URL acortado, me redirigirá a mi enlace original.", + "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo 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)." + ] + }, { "id": "bd7158d8c443edefaeb5bdee", @@ -270,7 +302,18 @@ "tests": [], "type": "basejump", "challengeType": 4, - "isRequired": true + "isRequired": true, + "nameEs": "Capa de abstracción para buscar imágenes", + "descriptionEs": [ + "Objetivo: Arma una aplicación de Pila Completa en JavaScript que te permite buscar imágenes como esta: https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10 y examinar las búsquedas recientes como esta: https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/. Después, despliegala en Heroku.", + "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", + "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", + "Historia de Usuario: Puedo obtener la URL de una imagen, texto alternativo y URLs de las páginas de un conjunto de imágenes que se relacionen con una cadena de texto dada.", + "Historia de Usuario: Puedo examinar página a página las respuestas añadiendo un parámetro del estilo ?offset=2 al URL.", + "Historia de Usuario: Puedo obtener una lista de las cadenas búscadas que se enviaron más recientemente.", + "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo 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)." + ] }, { "id": "bd7158d8c443edefaeb5bd0f", @@ -292,7 +335,18 @@ "tests": [], "type": "basejump", "challengeType": 4, - "isRequired": true + "isRequired": true, + "nameEs": "Microservicio de metadatos de archivos", + "descriptionEs": [ + "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://cryptic-ridge-9197.herokuapp.com/ y despliegala en Heroku.", + "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", + "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", + "Historia de Usuario: Puedo enviar un objeto FormData que incluya una subida de un archivo.", + "Historia de Usuario: Cuando envío algo, recibiré el tamao del archivo en bytes en la respuesta JSON.", + "Pista: Puede servirte este paquete: https://www.npmjs.com/package/multer", + "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo 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)." + ] } ] } From e027bd045079f734d286677fc3fb6ce768d89d7f Mon Sep 17 00:00:00 2001 From: lerning Date: Tue, 23 Feb 2016 08:03:12 -0600 Subject: [PATCH 02/10] fix grammar --- .../03-back-end-development-certification/api-projects.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/03-back-end-development-certification/api-projects.json b/challenges/03-back-end-development-certification/api-projects.json index f5d0722932..a36fb4ae7b 100644 --- a/challenges/03-back-end-development-certification/api-projects.json +++ b/challenges/03-back-end-development-certification/api-projects.json @@ -11,7 +11,7 @@ [ "http://i.imgur.com/4IZjWZ3.gif", "A gif showing how to create a c9.io account.", - "We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.
Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.", + "We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.
Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.", "http://c9.io" ], [ From 3cd4a50abc4d3d0c4c59e163e10b1298f789050c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladimir=20T=C3=A1mara=20Pati=C3=B1o?= Date: Tue, 23 Feb 2016 05:02:47 -0500 Subject: [PATCH 03/10] Translation to spanish of chromedevtools.json Closes #6997 Thanks for corrections to @justinian336 Deleting temporary files, introduced by mistake. --- .../04-video-challenges/chromedevtools.json | 104 ++++++++++++++++-- 1 file changed, 95 insertions(+), 9 deletions(-) diff --git a/challenges/04-video-challenges/chromedevtools.json b/challenges/04-video-challenges/chromedevtools.json index bd8ad2029d..3f37946b34 100644 --- a/challenges/04-video-challenges/chromedevtools.json +++ b/challenges/04-video-challenges/chromedevtools.json @@ -31,7 +31,18 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Elementos", + "descriptionEs": [ + "Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: developers.google.com/web/tools/iterate/inspect-styles/basics ", + "Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.", + "Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!", + "Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.", + "Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ", + "También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.", + "El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.", + "Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en developers.google.com/web/tools/chrome-devtools/" + ] }, { "id": "56b15f15632298c12f315183", @@ -59,7 +70,17 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: red", + "descriptionEs": [ + "La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'", + "El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.", + "Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.", + "Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ", + "Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.", + "Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.", + "Consulta más documentación detallada aquí: developers.google.com/web/tools/profile-performance/network-performance/resource-loading" + ] }, { "id": "56b15f15632298c12f315182", @@ -89,7 +110,18 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Fuentes", + "descriptionEs": [ + "La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ", + "Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ", + "Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.", + "Cuando estableces un punto de interrupción, el navegador detiene todo cuando llega a interpretar esa línea de código o evento.", + "Al reducir la velocidad de todo y darte la oportunidad de examinar lo que está sucediendo en cada punto que hayas configurado, podrás controlar exactamente lo que está sucediendo en la página o aplicación.", + "Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.", + "Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.", + "Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/breakpoints/" + ] }, { "id": "56b15f15632298c12f315181", @@ -119,7 +151,20 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Línea de tiempo", + "descriptionEs": [ + "El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ", + "Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.", + "En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ", + "Al grabarlos (capturalos), quedan en pequeños y detallados registros que puedes organizar de muchas maneras para que se adapten a tus necesidades.", + "Todo esto te ayudará a entender mejor lo que está pasando en el navegador, en particular cuáles eventos requieren más memoria del navegador.", + "Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.", + "Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ", + "Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool" + ] + + }, { "id": "56b15f15632298c12f315180", @@ -146,7 +191,15 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Perfiles", + "descriptionEs": [ + "El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ", + "Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ", + "Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.", + "Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ", + "Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/rendering-tools/js-execution" + ] }, { "id": "56b15f15632298c12f31517f", @@ -167,7 +220,14 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Recursos", + "descriptionEs": [ + "El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.", + "Puedes ver y editar toda esta información dentro del navegador.", + "A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.", + "Revisa documentación más detallada aquí: developers.google.com/web/tools/iterate/manage-data/index" + ] }, { "id": "56b15f15632298c12f31517e", @@ -195,7 +255,16 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Las auditorías", + "descriptionEs": [ + "La herramienta de auditoría te guía para mejorar tu página paso a paso.", + "En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.", + "Las sugerencias que se ven, se generan automáticamente con la función de auditoría.", + "Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.", + "A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.", + "Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar." + ] }, { "id": "56b15f15632298c12f31517d", @@ -224,7 +293,17 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Consola", + "descriptionEs": [ + "El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo", + "Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.", + "Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.", + "Debes saber que los mensajes se apilan y que puedes limpiarlos escribiendo clear(). También puedes guardar la bitácora seleccionando 'Preserve Log'. ", + "Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.", + "La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ", + "Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/console/" + ] }, { "id": "56b15f15632298c12f31517c", @@ -244,7 +323,14 @@ ] ], "type": "hike", - "challengeType": 6 + "challengeType": 6, + "nameEs": "Herramientas de desarrollo de Chrome: Resumen", + "descriptionEs": [ + ", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ", + ", Utiliza la documentación, incluso si nunca has leído documentación antes: developers.google.com/web/tools/chrome-devtools/ ", + ", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort." + ] } ] } + From c8dc7986228e2cec9a54797cd5e39d7b1a2f88de Mon Sep 17 00:00:00 2001 From: justinian336 Date: Tue, 23 Feb 2016 14:49:27 +0000 Subject: [PATCH 04/10] Audit ES Translation of html5-and-css.json. Thanks to @vtamara for the corrections. --- .../html5-and-css.json | 234 ++++++++---------- 1 file changed, 99 insertions(+), 135 deletions(-) diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 5baa909e72..2de7c02f51 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -32,9 +32,14 @@ "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", "Puedes editar tu código en tu editor de texto, que hemos incrustado en esta página web.", "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", - "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Las etiquetas de apertura se ven como: <h1>. Las etiquetas de cierre se ven como: </h1>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", - "Cada desafio tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Ejecutar pruebas\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafio.", - "Para pasar la prueba en este desafio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." + "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", + "Las etiquetas de apertura se ven como:", + "<h1>", + " Las etiquetas de cierre se ven como:", + "</h1>", + "Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", + "Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.", + "Para pasar la prueba en este desafío, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." ], "nameDe": "Waypoint: Begrüße die HTML Elemente", "descriptionDe": [ @@ -71,7 +76,7 @@ "challengeType": 0, "nameEs": "Encabezado con el elemento h2", "descriptionEs": [ - "Durante los siguientes desafios, construiremos una aplicación HTML que lucirá como la siguiente:", + "Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:", "\"Pantallazo", "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", "Este elemento le dice al navegador cómo mostrar el texto que contiene.", @@ -109,7 +114,8 @@ "nameEs": "Informa con el Elemento Párrafo", "descriptionEs": [ "Los elementos p son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".", - "Tú puedes crear un elemento párrafo como éste: <p>¡Soy una etiqueta p!</p>", + "Tú puedes crear un elemento párrafo de esta forma:", + "<p>¡Soy una etiqueta p!</p>", "Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"." ], "nameDe": "Waypoint: Informiere mit dem Paragraph Element", @@ -223,8 +229,8 @@ "descriptionEs": [ "Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.", "El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.", - "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", - "Remplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado Kitty Ipsum!", + "Reemplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", "descriptionDe": [ @@ -340,13 +346,12 @@ "Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.", "Cuando ingresaste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando al elemento h2 un estilo en línea", "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).", - "Al principio de tu código, crea un elemento style como este: <style></style>", + "Al principio de tu código, crea un elemento style como este:", + "
<style>
</style>
", "Dentro de ese elemento style, puedes crear un selector CSS para todos los elementos h2. Por ejemplo, si quisieras que todos los elementos h2 fueran rojos, tu elemento style se vería así:", - "<style>", - "  h2 {color: red;}", - "</style>", + "
<style>
  h2 {color: red;}
</style>
", "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.", - "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrea el CSS necesario para hacer todos los elementos h2 de color azul." + "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrega el CSS necesario para hacer todos los elementos h2 de color azul." ], "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", "descriptionDe": [ @@ -396,17 +401,13 @@ "descriptionEs": [ "Las clases son estilos reutilizables que pueden añadirse a elementos HTML.", "Aquí esta un ejemplo de una declaración de una clase CSS:", - "<style>", - "  .blue-text {", - "    color: blue;", - "  }", - "</style>", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <style>", "Puedes aplicar una clase a un elemento HTML de esta manera:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Nota que en tu elemento style CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ", - "En vez de de crear un nuevo elemento style, intenta eliminar la declaración de estilo de h2 de tus elementos de estilo existentes y reemplazala por la declaración de clase .red-text.", - "Crea una clase CSS llamada red-text y aplicala a tu elemento h2" + "Dentro de tu elemento style, cambia el selector h2 por .red-text y cambia el valor del color de blue a red.", + "Dale a tu elemento h2 el atributo class con el valor de 'red-text'." ], "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", "descriptionDe": [ @@ -454,9 +455,7 @@ "descriptionEs": [ "Recuerda que puedes adjuntar clases a elementos HTML utilizando class=\"tu-clase-aqui\" dentro de la etiqueta de apertura del elemento mismo.", "Recuerda que los selectores de clase CSS requieren un punto al principio, así:", - ".blue-text {", - "  color: blue;", - "}", + "
.blue-text {
  color: blue;
}
", "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:", "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Aplica la clase red-text a tus elementos h2 y p" @@ -502,11 +501,11 @@ "nameEs": "Cambia el tamaño de fuente de un elemento.", "descriptionEs": [ "El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:", - "h1 {", - "  font-size: 30px;", - "}", + "
h1 {
  font-size: 30px;
}
", "Crea un segundo elemento p con el siguiente texto kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px)." + "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px).", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío.", + "Además, no agregues ningún atributo de clase a tu elemento p." ], "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", "descriptionDe": [ @@ -550,10 +549,8 @@ "descriptionEs": [ "Puedes establecer el tipo de letra de un elemento usando la propiedad font-family.", "Por ejemplo, si quieres establecer el tipo de letra de tu elemento h2 como Sans-serif, usa el siguiente CSS:", - "h2 {", - "  font-family: Sans-serif;", - "}", - "Haga que todos sus elementos p utilicen el tipo de letra Monospace." + "
h2 {
  font-family: Sans-serif;
}
", + "Haz que todos tus elementos p utilicen el tipo de letra Monospace." ], "nameDe": "Waypoint: Definiere die Schriftart eines Elements", "descriptionDe": [ @@ -599,12 +596,12 @@ "challengeType": 0, "nameEs": "Importar un tipo de letra de Google", "descriptionEs": [ - "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).", - "Primero, haga un llamado a Google para tomar el tipo de letra Lobster y para cargarlo en su HTML.", - "Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:", + "Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).", + "Primero, haz un llamado a Google para obtener el tipo de letra Lobster y para cargarlo en tu HTML.", + "Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Ahora establezca Lobster como valor de font-family en su elemento h2.", - "Aplique la familia de fuente (font-family) Lobster a su elemento h2." + "Ahora puedes establecer Lobster como valor de font-family de tu elemento h2.", + "Aplica el tipo de letra (font-family) Lobster a tu elemento h2." ], "nameDe": "Waypoint: Importiere eine Google Font", "descriptionDe": [ @@ -655,15 +652,13 @@ "assert(new RegExp(\"-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" ], "challengeType": 0, - "nameEs": "Especifique como deben degradarse los tipos de letra", + "nameEs": "Especifica cómo deben degradarse los tipos de letra", "descriptionEs": [ - "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", + "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen Monospace, Serif y Sans-Serif", "Cuando un tipo de letra no está disponible, puedes decirle al navegador que \"degrade\" a otro tipo de letra.", "Por ejemplo, si quieres que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puedes usar el siguiente estilo CSS:", - "p {", - "  font-family: Helvetica, Sans-Serif;", - "}", - "Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Nota cómo se degrada al tipo Monospace." ], "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", "descriptionDe": [ @@ -717,7 +712,7 @@ "descriptionEs": [ "Puedes agregar imágenes a tu sitio web mediante el uso del elemento img, y apuntar a la URL específica de una imagen utilizando el atributo src.", "Un ejemplo de esto sería:", - "<img src=\"http://www.your-image-source.com/your-image.jpg\">", + "<img src=\"http://www.origen-de-tu-imagen.com/tu-imagen.jpg\">", "Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.", "Prueba con esta imagen:", "https://bit.ly/fcc-relaxing-cat" @@ -772,14 +767,11 @@ "challengeType": 0, "nameEs": "Da tamaño a tus imágenes", "descriptionEs": [ - "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", + "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", "Por ejemplo, si queremos crear una clase CSS llamada larger-image que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:", - "<estilo>", - "  .larger-image{", - "    width: 500px;", - "  }", - "</style>", - "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío." ], "nameDe": "Waypoint: Skaliere deine Bilder", "descriptionDe": [ @@ -839,16 +831,10 @@ "nameEs": "Añade bordes alrededor de tus elementos", "descriptionEs": [ "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", + "Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", + "Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:", "<img class=\"clase1 clase2\">" ], "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", @@ -906,20 +892,11 @@ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" ], "challengeType": 0, - "nameEs": "Añade bordes alrededor de tus elementos", + "nameEs": "Agrega esquinas redondeadas usando Border Radius", "descriptionEs": [ - "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", - "<img class=\"class1 class2\">" + "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", + "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", + "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." ], "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", "descriptionDe": [ @@ -976,11 +953,10 @@ "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');" ], "challengeType": 0, - "nameEs": "Añade esquinas redondeadas con un radio de borde", + "nameEs": "Crea imágenes circulares usando Border Radius", "descriptionEs": [ - "Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius. ", - "Puedes especificar un border-radius en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase thick-green-border y establecela a 10px. ", - "Dale a tu foto del gato un border-radius de 10px." + "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "Dale a tu foto del gato un border-radius de 50%." ], "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", "descriptionDe": [ @@ -1043,12 +1019,12 @@ "challengeType": 0, "nameEs": "Enlaza páginas externas con elementos ancla", "descriptionEs": [ - "Los elementos a, también conocido como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", - " \"un ", + " \"un ", "He aquí un ejemplo:", - "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo siga.</p>", - "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de anclaje \"fotos de gatos\"." + "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." ], "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", "descriptionDe": [ @@ -1118,14 +1094,14 @@ "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "challengeType": 0, - "nameEs": "Anida un elemento de anclaje dentro de un párrafo", + "nameEs": "Anida un elemento de ancla dentro de un párrafo", "descriptionEs": [ "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", "\"un", "He aquí un ejemplo:", - "<p>Aquí un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", - "anidamiento significa poner un elemento dentro de otro elemento.", - "Ahora anida el elemento a existente dentro de un nuevo elemento p para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + "<p>Aquí hay un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", + "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." ], "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", "descriptionDe": [ @@ -1187,7 +1163,7 @@ "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", "descriptionEs": [ "A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.", - "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, que aprenderemos más adelante.", + "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ], "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", @@ -1254,7 +1230,7 @@ "challengeType": 0, "nameEs": "Convierte una imagen en un vínculo", "descriptionEs": [ - "Puedes convertir elementos en enlaces al anidarlos con un elemento a.", + "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", @@ -1323,10 +1299,10 @@ "challengeType": 0, "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", "descriptionEs": [ - "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", + "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos alt. ", "En resumen, ¡cada imagen debe tener un atributo alt!", "Puedes agregar un atributo alt justo en el elemento img así:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\">", + "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">", "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." ], "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", @@ -1399,10 +1375,7 @@ "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", "Por ejemplo: ", - "<ul>", - "  <li>leche</li>", - "  <li>queso</li>", - "</ul>", + "
<ul>
  <li>leche</li>
  <li>queso</li>
</ul>
", "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." ], @@ -1483,10 +1456,7 @@ "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", "Por ejemplo:", - "<ol>", - "  <li>Garfield</li>", - "  <li>Sylvester</li>", - "</ol>", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], @@ -1564,7 +1534,7 @@ "nameEs": "Crea un campo de texto", "descriptionEs": [ "Ahora vamos a crear un formulario web.", - "Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", "Puedes crear uno como este:", "<input type=\"text\">", "Ten en cuenta que los elementos input son de cierre automático.", @@ -1884,7 +1854,8 @@ "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.", "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra required dentro de tu elemento input, usarías: <input type=\"text\" required> ", "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.", - "A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?" + "Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?", + "Nota: Este campo no funciona en Safari." ], "nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen", "descriptionDe": [ @@ -1968,12 +1939,12 @@ "challengeType": 0, "nameEs": "Crea un Conjunto de botones de radio", "descriptionEs": [ - "Puedes usar botones de radio para las preguntas en las que desea que el usuario sólo le de una de varias posibles respuestas.", + "Puedes usar botones de radio para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.", "Los botones de radio son un tipo del elemento input", "Cada uno de los botones de radio debe estar anidado dentro de su propio elemento label.", "Todos los botones de radio relacionados deben tener el mismo atributo name.", "He aquí un ejemplo de un botón de radio:", - "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "<label><input type=\"radio\" name=\"dentro-fuera\"> Dentro</label>", "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de indoor y el otro debe tener la opción outdoor. " ], "nameDe": "Waypoint: Erstelle ein paar Optionsfelder", @@ -2063,11 +2034,11 @@ "descriptionEs": [ "Los formularios suelen usar casillas de verificación para preguntas que pueden tener más de una respuesta.", "Las casillas de verificación son un tipo del elemento input", - "Cada una de tus casillas de verificación deben ser anidado dentro de su propio elemento label.", + "Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento label.", "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo name.", "He aquí un ejemplo de una casilla de verificación:", - "<label><input type=\"checkbox\" name=\"personality\"> Cariñoso</label>", - "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Las tres deben compartir el atributo name." + "<label><input type=\"checkbox\" name=\"personalidad\"> Cariñoso</label>", + "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Las tres deben tener personality como su atributo name." ], "nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen", "descriptionDe": [ @@ -2150,7 +2121,7 @@ "nameEs": "Marca botones de radio y casillas de verificación por omisión", "descriptionEs": [ "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo checked.", - "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento de entrada. Por ejemplo:", + "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento input. Por ejemplo:", "<input type=\"radio\" name=\"nombre-de-prueba\" checked>", "Establece como marcados por omisión el primero de tus botones de radio y la primera casilla de verificación." ], @@ -2332,9 +2303,7 @@ "descriptionEs": [ "Puedes fijar el color de fondo de un elemento con la propiedad background-color.", "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:", - ".green-background {", - "  background-color: green;", - "}", + "
.green-background {
  background-color: green;
}
", "Crea una clase llamada gray-background con la propiedad background-color en gris (gray). Asigna esta clase a tu elemento div ." ] }, @@ -2510,10 +2479,8 @@ "nameEs": "Usa un atributo ID para dar estilo a un elemento", "descriptionEs": [ "Una cosa buena sobre los atributos id es que, al igual que con clases, puedes darles estilo usando CSS.", - "He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id en cat-photo-element y ponerle el color de fondo verde. En tu elemento style: ", - "#cat-photo-element {", - "  background-color: green;", - "}", + "He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id de cat-photo-element y ponerle el color de fondo verde. En tu elemento style: ", + "
#cat-photo-element {
  background-color: green;
}
", "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." ] @@ -2572,13 +2539,13 @@ "challengeType": 0, "nameEs": "Ajusta el relleno de un elemento", "descriptionEs": [ - "Ahora vamos a dejar un poco de lado nuestra aplicación de fotos de gatos, y aprenderemos más sobre dar estilo a HTML", + "Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML", "Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.", "Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (padding), margen (margin) y borde (border)", "El relleno (padding) de un elemento controla la cantidad de espacio entre el elemento y su borde (border).", "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (padding) que el cuadro verde. ", - "Cuando aumentas el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", - "Cambia el relleno (padding) de la caja verde para que coincida con la de tu cuadro rojo." + "Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", + "Cambia el relleno (padding) de la caja verde para que coincida con el de tu cuadro rojo." ], "nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements", "descriptionDe": [ @@ -2644,7 +2611,7 @@ "descriptionEs": [ "El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.", "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ", - "Cuando aumentas el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", + "Cuando aumentes el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", "Cambia el margen (margin) de la caja verde para que coincida con el de la caja roja." ], "nameDe": "Waypoint: Passe den Außenabstand eines Elements an", @@ -2777,7 +2744,7 @@ "challengeType": 0, "nameEs": "Añade relleno diferente a cada lado de un elemento", "descriptionEs": [ - "A veces quieres personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.", + "A veces querrás personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.", "CSS te permite controlar el relleno (padding) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ", "Da a la caja verde un relleno (padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha." ], @@ -2844,7 +2811,7 @@ "challengeType": 0, "nameEs": "Añade márgenes diferentes a cada lado de un elemento", "descriptionEs": [ - "A veces quieres personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.", + "A veces querrás personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.", "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ", "Da a la caja verde un margen (margin) de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho." ], @@ -2908,7 +2875,7 @@ "challengeType": 0, "nameEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento", "descriptionEs": [ - "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sola línea, así: ", + "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sóla línea, así: ", "padding: 10px 20px 10px 20px;", "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", "Usa la notación en sentido horario para dar a la clase \".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." @@ -3016,9 +2983,7 @@ "Cada página HTML tiene un cuerpo (body).", "Podemos demostrar que el elemento (body) existe aquí, dandole un color de fondo (background-color) negro.", "Podemos hacer esto añadiendo lo siguiente a nuestro elemento style:", - "body {", - "  background-color: black;", - "}" + "
body {
  background-color: black;
}
" ] }, { @@ -3053,7 +3018,7 @@ "nameEs": "Hereda estilos del elemento cuerpo", "descriptionEs": [ "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.", - "Recuerda, que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.", + "Recuerda que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.", "En primer lugar, crea un elemento h1 con el texto Hello World", "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." @@ -3134,10 +3099,11 @@ "¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", "Acabamos de demostrar que nuestras clases anularán el CSS del elemento body. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase pink-text?", "Crea una clase CSS adicional llamada texto-azul que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase pink-text. ", - "Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text y veamos cual gana.", + "Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text y veamos cuál gana.", "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", - "class=\"class1 class2\"", - "Nota: No importa lo que ordenan las clases se enumeran en el." + "class=\"clase1 clase2\"", + "Nota: No importa el orden en que las clases aparecen en el HTML.", + "Sin embargo, el orden de las declaraciones class en la sección <style> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que .blue-text es declarada después, esta anula los atributos de .pink-text" ] }, { @@ -3189,9 +3155,7 @@ "<h1 id=\"orange-text\">", "Deja las clases blue-text y pink-text de tu elemento h1.", "Crea una declaración CSS para tu identificación orange-text en tu elemento style. He aquí un ejemplo de como se ve esto: ", - "#brown-text {", - "  color: brown;", - "}", + "
#brown-text {
  color: brown;
}
", "Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad." ] }, @@ -3380,7 +3344,7 @@ "Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", "¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ", "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", - "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el dígito más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el dígito más bajo posible).", + "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el valor más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).", "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" ] }, @@ -3407,8 +3371,8 @@ "challengeType": 0, "nameEs": "Usa el código hexadecimal para colorear de verde los elementos", "descriptionEs": [ - "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.", - "Así que para conseguir el verde absoluto más brillante, sólo usas F en el tercer y cuarto dígitos (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible). ", + "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul.", + "Así que para conseguir el verde absoluto más brillante, sólo debes usar F en el tercer y cuarto dígitos (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible). ", "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" ] }, @@ -3435,8 +3399,8 @@ "challengeType": 0, "nameEs": "Usa el código hexadecimal para colorear de azul los elementos", "descriptionEs": [ - "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .", - "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible ). ", + "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", + "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible ). ", "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" ] }, @@ -3516,7 +3480,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Usa el código hexadecimal para colorear con tonos grises", + "nameEs": "Usa el código hexadecimal para colorear con tonos de gris", "descriptionEs": [ "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" @@ -3549,7 +3513,7 @@ "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ", "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", - "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." + "Adelante, intenta usar #F00 para volver rojo el color de fondo del elemento body." ] }, { From 3b0cc6aa8b721a79c1047ee0993ebd033367d21e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladimir=20T=C3=A1mara=20Pati=C3=B1o?= Date: Wed, 24 Feb 2016 04:19:46 -0500 Subject: [PATCH 05/10] Updates translation to spanish of bootstrap Closes #6498 Thanks for corrections to @justinian336 --- .../bootstrap.json | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/challenges/01-front-end-development-certification/bootstrap.json b/challenges/01-front-end-development-certification/bootstrap.json index 4539156219..e5c56f5850 100644 --- a/challenges/01-front-end-development-certification/bootstrap.json +++ b/challenges/01-front-end-development-certification/bootstrap.json @@ -943,7 +943,7 @@ "Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", "Así es como lo harías con el elemento \"Top 3 things cats hate\":", - "<p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" ] }, { @@ -1025,7 +1025,7 @@ "challengeType": 0, "nameEs": "Crea un encabezado personalizado", "descriptionEs": [ - "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.", + "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.", "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento div.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", "\"una", @@ -1117,6 +1117,11 @@ "nameEs": "Agrega iconos de Font Awesome a los botones", "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", + "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", + "<i class=\"fa fa-info-circle\"></i>", "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." ] }, @@ -1866,7 +1871,7 @@ "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", "Recuerda que puedes darle a un elemento un id como el siguiente:", "<div class=\"well\" id=\"center-well\">", - "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well." + "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." ] }, { @@ -1959,7 +1964,8 @@ "nameEs": "Dale a cada elemento un ID único", "descriptionEs": [ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.", - "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6." + "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6.", + "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." ] }, { From ff29ef6c37977d9777e544f0d056dcb95f56695d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladimir=20T=C3=A1mara=20Pati=C3=B1o?= Date: Sun, 21 Feb 2016 20:24:48 -0500 Subject: [PATCH 06/10] Verify and update translation to spanish of intermediate-bonfires.json Closes #6502 Thanks for corrections to @justinian336 --- .../intermediate-bonfires.json | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/challenges/01-front-end-development-certification/intermediate-bonfires.json b/challenges/01-front-end-development-certification/intermediate-bonfires.json index 7344ac7229..20c94922da 100644 --- a/challenges/01-front-end-development-certification/intermediate-bonfires.json +++ b/challenges/01-front-end-development-certification/intermediate-bonfires.json @@ -35,9 +35,9 @@ "challengeType": 5, "nameEs": "Suma todos los números en un rango", "descriptionEs": [ - "Te pasaremos un arreglo que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.", - "El número menor no siempre será el primer elemento en el arreglo.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Te pasaremos un vector que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.", + "El número menor no siempre será el primer elemento en el vector.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -79,10 +79,10 @@ "Array.concat()" ], "challengeType": 5, - "nameEs": "Obtén la diferencia entre dos arreglos", + "nameEs": "Obtén la diferencia entre dos vectores", "descriptionEs": [ - "Crea una función que compare dos arreglos y que devuelva un nuevo arreglo que contenga los elementos que no se encuentren simultáneamente en ambos arreglos.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Crea una función que compare dos vectores y que devuelva un nuevo vector que contenga los elementos que sólo se encuentre en uno de los vectores dados, pero no en ambos En otras palabras, devuelve la diferencia simétrica entre los dos vectores.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -143,7 +143,7 @@ "descriptionEs": [ "Convierte el número dado en numeral romano.", "Todos los numerales romanos en las respuestas deben estar en mayúsculas.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -182,9 +182,9 @@ "challengeType": 5, "nameEs": "¿Dónde estás que no te veo?", "descriptionEs": [ - "Crea una función que busque en un arreglo de objetos (primer argumento) y devuelva un arreglo con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el arreglo devuelto por la función", - "Por ejemplo, si el primer argumento es [{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], y el segundo argumento es { last: \"Capulet\" }, entonces tu función debe devolver el tercer objeto del arreglo en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función", + "Por ejemplo, si el primer argumento es [{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], y el segundo argumento es { last: \"Capulet\" }, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -230,7 +230,7 @@ "El segundo argumento es la palabra que se va a reemplazar", "El tercer argumento es lo que reemplazará a la palabra indicada en el segundo argumento", "NOTA: Debes respetar mayúsculas y minúsculas de la palabra original cuando ejecutes el reemplazo. Por ejemplo, si quisieras reemplazar la palabra \"Libro\" con la palabra \"perro\", deberías insertar en vez la palabra \"Perro\"", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -274,7 +274,7 @@ "Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)", "Pig Latin toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".", "Si la palabra comienza con una vocal, simplemente añade \"way\" al final.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -312,12 +312,12 @@ "challengeType": 5, "nameEs": "Emparejando bases de ADN", "descriptionEs": [ - "A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo arreglo", + "A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo vector", "Parejas de bases son pares de AT y CG. Encuentra el elemento que hace falta para cada una de las letras que se te presentan.", - "Devuelve la letra que se te provee como el primer elemento en cada arreglo", - "Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el arreglo: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]", - "Cada letra que se te provee y su pareja deben estar contenidos en un arreglo, y cada uno de estos arreglos debe estar contenidos en un arreglo.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Devuelve la letra que se te provee como el primer elemento en cada vector", + "Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el vector: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]", + "Cada letra que se te provee y su pareja deben estar contenidos en un vector, y cada uno de estos vectores debe estar contenidos en un vector.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -355,7 +355,7 @@ "descriptionEs": [ "Crea una función que devuelva la letra que falta en el rango de letras que se le pasa", "Si todas las letras en el rango están presentes, la función debe devolver undefined.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -399,7 +399,7 @@ "descriptionEs": [ "Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.", "Los primitivos booleanos primitivos son: true y false", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -437,11 +437,11 @@ "challengeType": 5, "nameEs": "Intersección ordenada", "descriptionEs": [ - "Escribe una función que tome dos o más arreglos y que devuelva un nuevo arreglo con los valores únicos en el orden de aparición de los arreglos que se te pasaron", - "En otra palabras, todos los valores presentes en todos los arreglos deben aparecer en el arreglo final en su orden original, pero sin duplicados.", - "Los valores únicos deben aparecer en el orden original, pero el arreglo final no necesariamente debe mostrar los elementos en orden numérico.", + "Escribe una función que tome dos o más vectores y que devuelva un nuevo vector con los valores únicos en el orden de aparición de los vectores que se te pasaron", + "En otra palabras, todos los valores presentes en todos los vectores deben aparecer en el vector final en su orden original, pero sin duplicados.", + "Los valores únicos deben aparecer en el orden original, pero el vector final no necesariamente debe mostrar los elementos en orden numérico.", "Puedes usar de referencia las pruebas de verificación si necesitas ejemplos.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -480,8 +480,8 @@ "challengeType": 5, "nameEs": "Convierte entidades HTML", "descriptionEs": [ - "Convierte los caracteres \"&\", \"<\", \">\", '\"' (comilla), y \"'\" (apostrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Convierte los caracteres &, <, >, \"' (comilla), y ' (apóstrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -519,7 +519,7 @@ "nameEs": "separado-por-guiones", "descriptionEs": [ "Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -560,7 +560,7 @@ "Crea una función que devuelva la suma de todos los números impares en la secuencia de Fibonacci hasta el número que se le pasa como argumento, incluyéndolo en caso de ser un número de la secuencia.", "Los primeros números de la secuencia son 1, 1, 2, 3, 5 y 8, y cada número siguiente es la suma de los dos números anteriores.", "Por ejemplo, si se te pasa el número 4, la función deberá devolver 5, ya que los números impares menores que 4 son 1, 1 y 3.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -599,7 +599,7 @@ "Suma todos los números primos hasta, e incluyendo, el número que se te pasa", "Números primos son todos aquellos que sólo son divisibles entre 1 y entre sí mismos. Por ejemplo, el número 2 es primo porque solo es divisible por 1 y por 2. Por el contrario, el número 1 no es primo, ya que sólo puede dividirse por sí mismo", "El número que se le provee a la función no puede ser primo", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -636,10 +636,10 @@ "challengeType": 5, "nameEs": "Mínimo común múltiplo", "descriptionEs": [ - "En el ejercicio se te provee un arreglo con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.", - "Tu función debe aceptar como argumento un arreglo con dos números, los cuales no necesariamente estarán en orden.", + "En el ejercicio se te provee un vector con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.", + "Tu función debe aceptar como argumento un vector con dos números, los cuales no necesariamente estarán en orden.", "Por ejemplo, si se te pasan los números 1 y 3, deberás encontrar el mínimo común múltiplo de 1 y 3 que es divisible por todos los números entre 1 y 3.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -672,8 +672,8 @@ "challengeType": 5, "nameEs": "Buscando la verdad", "descriptionEs": [ - "Crea una función que busque dentro de un arreglo (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -713,8 +713,9 @@ "challengeType": 5, "nameEs": "¡Fuera de aquí!", "descriptionEs": [ - "Toma los elementos contenidos en el arreglo que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Toma los elementos contenidos en el vector que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.", + "Retorna el resto del vector, de lo contrario retorna un vector vacío.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -749,8 +750,8 @@ "challengeType": 5, "nameEs": "Aplanadora", "descriptionEs": [ - "Aplana el arreglo anidado que se te provee. Tu función debe poder aplanar arreglos de cualquier forma.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Aplana el vector anidado que se te provee. Tu función debe poder aplanar vectores de cualquier forma.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -786,7 +787,7 @@ "descriptionEs": [ "Haz que la función devuelva el mensaje en inglés escondido en el código binario de la cadena de texto que se le pasa.", "La cadena de texto binaria estará separada por espacios.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -826,7 +827,7 @@ "descriptionEs": [ "Verifica si la función en el segundo argumento devuelve true para todos los elementos de la colección en el primer argumento.", "Recuerda que puedes accesar a las propiedades de un objeto, ya sea a través de la notación por punto o de la notación por corchete usando [].", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ @@ -873,7 +874,7 @@ "var sumTwoAnd = add(2);", "sumTwoAnd(3) devuelve 5.", "Si alguno de los argumentos no es un número válido, haz que devuelva undefined.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." ], "isRequired": true, "solutions": [ From 4d7966b7723b0a0a21f8b89b08ca0ca7366e5c24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladimir=20T=C3=A1mara=20Pati=C3=B1o?= Date: Sun, 21 Feb 2016 19:59:07 -0500 Subject: [PATCH 07/10] Verify and update translation to spanish of jquery.json Closes #6504 Thanks for correction to @justinian336 and @bugron --- .../jquery.json | 41 +++++++++++-------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/challenges/01-front-end-development-certification/jquery.json b/challenges/01-front-end-development-certification/jquery.json index 4d79fec7c2..8768e2427a 100644 --- a/challenges/01-front-end-development-certification/jquery.json +++ b/challenges/01-front-end-development-certification/jquery.json @@ -58,7 +58,7 @@ "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." + "Esto es importante porque sin tu función de documento listo, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores." ] }, { @@ -111,12 +111,12 @@ "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.", + "Ya 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 dólar, o simplemente como bling. ", + "jQuery a menudo selecciona un elemento HTML con un selector, y luego le 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." + "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 tus elementos button." ] }, { @@ -293,7 +293,7 @@ "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." + "Elimina esas tres funciones jQuery de tu función de documento listo, pero deja intacta la declaración de la función de documento listo." ] }, { @@ -350,12 +350,12 @@ "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\"). ", + "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." + "Usa cada uno de los selectores jQuery vistos y la función addClass() para:", + "Agregar la clase animated a todos los elementos con tipo button.", + "Agregar la clase shake a todos los botones con clase .btn.", + "Agregar la clase btn-primary al botón con identificación #target1." ] }, { @@ -590,7 +590,16 @@ "assert.isFalse((//gi).test($(\"h3\").html()), 'message: Do not alter any other text.');" ], "type": "waypoint", - "challengeType": 0 + "challengeType": 0, + "nameEs": "Cambia el texto de un elemento usando jQuery", + "descriptionEs": [ + "Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.", + "jQuery tiene una función llamada .html() que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.", + "He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:", + "$(\"h3\").html(\"<i>jQuery Playground</i>\");", + "jQuery también tiene una función similar llamada .text() que sólo altera el texto sin añadir etiquetas.", + "Cambia el botón con identificación target4 de forma que su texto quede en itálicas." + ] }, { "id": "bad87fee1348bd9aed708826", @@ -643,7 +652,7 @@ "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()." + "Elimina el elemento con identificación target4 de la página utilizando la función .remove()." ] }, { @@ -700,7 +709,7 @@ "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.", + "jQuery tiene una función llamada appendTo() que te 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." @@ -961,10 +970,10 @@ "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", + "jQuery usa selectores CSS para elegir elementos, El selector CSS .clase:nth-child(i) te 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 puedes usar 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." + "Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase target." ] }, { From 7432d976c599d035839c9bad29283e0a9d46464a Mon Sep 17 00:00:00 2001 From: Christian Lapinig Date: Thu, 25 Feb 2016 01:15:16 -0800 Subject: [PATCH 08/10] Fix test case so only the word submit can pass test --- .../html5-and-css.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 2de7c02f51..3dc6909f06 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -32,8 +32,8 @@ "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", "Puedes editar tu código en tu editor de texto, que hemos incrustado en esta página web.", "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", - "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", - "Las etiquetas de apertura se ven como:", + "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", + "Las etiquetas de apertura se ven como:", "<h1>", " Las etiquetas de cierre se ven como:", "</h1>", @@ -1765,7 +1765,7 @@ "tests": [ "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');", "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute type set to submit.');", - "assert($(\"button\").text().match(/submit/gi), 'message: Your submit button should have the text \"Submit\".');", + "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');", "assert(code.match(/<\\/button>/g) && code.match(/