From b5128336a486651f0934946913731afb0c0fbea5 Mon Sep 17 00:00:00 2001 From: Rex Schrader Date: Fri, 11 Mar 2016 15:17:34 -0800 Subject: [PATCH] Change nameXX properties to title XX properties --- .../00-getting-started/getting-started.json | 510 ++--- .../advanced-bonfires.json | 18 +- .../advanced-ziplines.json | 22 +- .../basic-bonfires.json | 164 +- .../basic-javascript.json | 280 +-- .../basic-ziplines.json | 120 +- .../bootstrap.json | 62 +- .../front-end-development-certificate.json | 4 +- .../gear-up-for-success.json | 18 +- .../html5-and-css.json | 2025 ++++++++--------- .../intermediate-bonfires.json | 210 +- .../intermediate-ziplines.json | 27 +- .../jquery.json | 36 +- .../json-apis-and-ajax.json | 28 +- ...t-oriented-and-functional-programming.json | 26 +- .../d3.json | 4 +- .../data-visualization-certificate.json | 4 +- .../data-visualization-projects.json | 40 +- .../react-projects.json | 40 +- .../react.json | 3 +- .../sass.json | 3 +- .../api-projects.json | 33 +- .../automated-testing-and-debugging.json | 4 +- .../back-end-development-certificate.json | 4 +- .../dynamic-web-applications.json | 20 +- .../git.json | 2 +- .../mongodb.json | 2 +- .../nodejs-and-expressjs.json | 10 +- .../04-video-challenges/bigonotation.json | 8 +- .../04-video-challenges/chromedevtools.json | 39 +- .../04-video-challenges/computer-basics.json | 86 +- challenges/04-video-challenges/dom.json | 8 +- challenges/04-video-challenges/jslingo.json | 37 +- 33 files changed, 1943 insertions(+), 1954 deletions(-) diff --git a/challenges/00-getting-started/getting-started.json b/challenges/00-getting-started/getting-started.json index dfceda0bac..54fc8d4286 100644 --- a/challenges/00-getting-started/getting-started.json +++ b/challenges/00-getting-started/getting-started.json @@ -85,82 +85,7 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Aprende como funciona Free Code Camp", - "descriptionEs": [ - [ - "http://i.imgur.com/6ibIavQ.jpg", - "Una imagen de los 4 beneficios de Free Code Camp: Conéctate, Aprende JavaScript, Construye tu Portafolio, Ayuda organizaciones sin ánimo de lucro", - "Bienvenido a Free Code Camp. Somos una comunidad de código abierto formada por personas ocupadas quienes aprenden a programar y ayudan a organizaciones sin ánimo de lucro.", - "" - ], - [ - "http://i.imgur.com/Elb3dfj.jpg", - "Una imagen de algunos de nuestros campistas programando juntos en Toronto.", - "Aprender a programar es difícil. Para tener éxito, necesitarás mucha práctica y apoyo. Por eso es que hemos creado un riguroso currículo y una comunidad de apoyo.", - "" - ], - [ - "http://i.imgur.com/D7Y5luw.jpg", - "Una gráfica del crecimiento de trabajos en comparación con los graduados en un pregrado de ciencias de la computación. Hay 1.4 millones de empleos y solo 400 mil personas para ocuparlos.", - "Actualmente, hay miles de trabajos de programación sin ocupar, y la demanda de programadores crece cada año.", - "" - ], - [ - "http://i.imgur.com/WD3STY6.jpg", - "Fotos de tres campistas quienes obtuvieron trabajos después de aprender a programar en Free Code Camp.", - "Free Code Camp es un camino probado para que obtengas tu primer trabajo de programación. De hecho, nadie actualmente ha completado nuestro programa entero, porque los campistas obtienen trabajos antes de poder hacerlo.", - "" - ], - [ - "http://i.imgur.com/vLNso6h.jpg", - "Una ilustración mostrando que aprenderás HTML5, CSS3, JavaScript, Bases de Datos, Git, Node.js, react y D3.", - "Tenemos cientos de desafíos de programación opcionales que te enseñarán las tecnologías fundamentales para el desarrollo web como HTML5, Node.js y bases de datos.", - "" - ], - [ - "http://i.imgur.com/UVB9hxp.jpg", - "Una foto de un campista en un café construyendo proyectos con Free Code Camp.", - "Creemos que los humanos aprender mejor haciendo. Así que en realidad emplearás la mayoría de tu tiempo construyendo proyectos. Te daremos una lista de especificaciones (historias de usuario ágiles), y te las ingeniarás para construir aplicaciones que cumplan esas especificaciones.", - "" - ], - [ - "http://i.imgur.com/pbW7K5S.jpgk", - "Una imagen de los tiempos de nuestras certificaciones para desarrollo de interfaces, desarrollo al lado del servidor y visualización de datos (400 horas cada uno), para nuestros proyectos sin ánimo de lucro (800 horas) y preparación para entrevistas (80 horas) que dan un total de 2,080 horas e experiencia programando.", - "Nuestro currículo se divide en 4 certificaciones. Estas certificaciones están estandarizadas, y son verificables al instante por sus clientes como trabajador independiente y por sus futuros empleadores. Tal como todo lo demás en Free Code Camp, estas certificaciones son gratuitas. Recomendamos hacerlas en orden, pero usted es libre de saltar de una a otra. Las primeras tres certificaciones requieren 400 horas cada una, y la certificación final requiere 800 horas, e involucra construir proyectos de la vida real para organizaciones sin ánimo de lucro.", - "" - ], - [ - "http://i.imgur.com/k8btNUB.jpg", - "Una imagen de nuestro Certificado de Desarrollo de Interfaces", - "Para obtener nuestra certificación verificada de Desarrollo de Interfaces, construirás 10 proyectos usando HTML, CSS, jQuery y JavaScript.", - "" - ], - [ - "http://i.imgur.com/Et3iD74.jpg", - "Una imagen de nuestro Certificado de Visualización de Datos", - "Para obtener nuestra certificación en Visualización de Datos, construirás 10 proyectos usando React, Sass y D3.js.", - "" - ], - [ - "http://i.imgur.com/8v3t84p.jpg", - "Una imagen de nuestro Certificado de Desarrollo al Lado del Servidor", - "Para obtener nuestro Certificado de Desarrollo al Lado del Servidor, construirás 10 proyectos empleando Node.js, Express y MongoDB. Usarás Git y Heroku para desplegarlos en la nube.", - "" - ], - [ - "http://i.imgur.com/yXyxbDd.jpg", - "Una imagen de nuestro directorio de organizaciones sin ánimo de lucro.", - "Después de completar todos los tres certificados, harás equipo con otro campista y usarás metodologías de desarrollo ágil para construir dos proyectos de la vida real para organizaciones sin ánimo de lucro. También añadirás funcionalidad a dos proyectos de fuentes legadas de organizaciones sin ánimo de lucro. Cuando termines esto, tendrás un portafolio de aplicaciones reales que la gente usa a diario. ", - "" - ], - [ - "http://i.imgur.com/PDGQ9ZM.jpg", - "Una imagen de nuestros campistas construyendo proyectos juntos en un café en Seoul.", - "Si completas todas las 2,080 horas de desafíos y proyectos, obtendrás un Certificado de Desarrollo de Pila Completa. Te ofreceremos gratuitamente una práctica en entrevistas para desarrolladores. Incluso ofrecemos un directorio de trabajos donde los empleadores contratan específicamente campistas que han recibido certificaciones de Free Code Camp.", - "" - ] - ], - "nameFr": "Apprenez comment FreeCodeCamp fonctionne", + "titleFr": "Apprenez comment FreeCodeCamp fonctionne", "descriptionFr": [ [ "http://i.imgur.com/6ibIavQ.jpg", @@ -234,10 +159,141 @@ "Si vous finissez les 2.080 heures de défis et projets, vous gagnerez notre certification complète Stack développement . Nous vous offrons gratuitement la pratique d'entrevue de codage . Nous offrons même un accès à notre si d'emploi où les employeurs embauchent spécifiquement les développeurs qui ont obtenu des certificats de Free Code Camp.", "" ] + ], + "titleEs": "Aprende como funciona Free Code Camp", + "descriptionEs": [ + [ + "http://i.imgur.com/6ibIavQ.jpg", + "Una imagen de los 4 beneficios de Free Code Camp: Conéctate, Aprende JavaScript, Construye tu Portafolio, Ayuda organizaciones sin ánimo de lucro", + "Bienvenido a Free Code Camp. Somos una comunidad de código abierto formada por personas ocupadas quienes aprenden a programar y ayudan a organizaciones sin ánimo de lucro.", + "" + ], + [ + "http://i.imgur.com/Elb3dfj.jpg", + "Una imagen de algunos de nuestros campistas programando juntos en Toronto.", + "Aprender a programar es difícil. Para tener éxito, necesitarás mucha práctica y apoyo. Por eso es que hemos creado un riguroso currículo y una comunidad de apoyo.", + "" + ], + [ + "http://i.imgur.com/D7Y5luw.jpg", + "Una gráfica del crecimiento de trabajos en comparación con los graduados en un pregrado de ciencias de la computación. Hay 1.4 millones de empleos y solo 400 mil personas para ocuparlos.", + "Actualmente, hay miles de trabajos de programación sin ocupar, y la demanda de programadores crece cada año.", + "" + ], + [ + "http://i.imgur.com/WD3STY6.jpg", + "Fotos de tres campistas quienes obtuvieron trabajos después de aprender a programar en Free Code Camp.", + "Free Code Camp es un camino probado para que obtengas tu primer trabajo de programación. De hecho, nadie actualmente ha completado nuestro programa entero, porque los campistas obtienen trabajos antes de poder hacerlo.", + "" + ], + [ + "http://i.imgur.com/vLNso6h.jpg", + "Una ilustración mostrando que aprenderás HTML5, CSS3, JavaScript, Bases de Datos, Git, Node.js, react y D3.", + "Tenemos cientos de desafíos de programación opcionales que te enseñarán las tecnologías fundamentales para el desarrollo web como HTML5, Node.js y bases de datos.", + "" + ], + [ + "http://i.imgur.com/UVB9hxp.jpg", + "Una foto de un campista en un café construyendo proyectos con Free Code Camp.", + "Creemos que los humanos aprender mejor haciendo. Así que en realidad emplearás la mayoría de tu tiempo construyendo proyectos. Te daremos una lista de especificaciones (historias de usuario ágiles), y te las ingeniarás para construir aplicaciones que cumplan esas especificaciones.", + "" + ], + [ + "http://i.imgur.com/pbW7K5S.jpgk", + "Una imagen de los tiempos de nuestras certificaciones para desarrollo de interfaces, desarrollo al lado del servidor y visualización de datos (400 horas cada uno), para nuestros proyectos sin ánimo de lucro (800 horas) y preparación para entrevistas (80 horas) que dan un total de 2,080 horas e experiencia programando.", + "Nuestro currículo se divide en 4 certificaciones. Estas certificaciones están estandarizadas, y son verificables al instante por sus clientes como trabajador independiente y por sus futuros empleadores. Tal como todo lo demás en Free Code Camp, estas certificaciones son gratuitas. Recomendamos hacerlas en orden, pero usted es libre de saltar de una a otra. Las primeras tres certificaciones requieren 400 horas cada una, y la certificación final requiere 800 horas, e involucra construir proyectos de la vida real para organizaciones sin ánimo de lucro.", + "" + ], + [ + "http://i.imgur.com/k8btNUB.jpg", + "Una imagen de nuestro Certificado de Desarrollo de Interfaces", + "Para obtener nuestra certificación verificada de Desarrollo de Interfaces, construirás 10 proyectos usando HTML, CSS, jQuery y JavaScript.", + "" + ], + [ + "http://i.imgur.com/Et3iD74.jpg", + "Una imagen de nuestro Certificado de Visualización de Datos", + "Para obtener nuestra certificación en Visualización de Datos, construirás 10 proyectos usando React, Sass y D3.js.", + "" + ], + [ + "http://i.imgur.com/8v3t84p.jpg", + "Una imagen de nuestro Certificado de Desarrollo al Lado del Servidor", + "Para obtener nuestro Certificado de Desarrollo al Lado del Servidor, construirás 10 proyectos empleando Node.js, Express y MongoDB. Usarás Git y Heroku para desplegarlos en la nube.", + "" + ], + [ + "http://i.imgur.com/yXyxbDd.jpg", + "Una imagen de nuestro directorio de organizaciones sin ánimo de lucro.", + "Después de completar todos los tres certificados, harás equipo con otro campista y usarás metodologías de desarrollo ágil para construir dos proyectos de la vida real para organizaciones sin ánimo de lucro. También añadirás funcionalidad a dos proyectos de fuentes legadas de organizaciones sin ánimo de lucro. Cuando termines esto, tendrás un portafolio de aplicaciones reales que la gente usa a diario. ", + "" + ], + [ + "http://i.imgur.com/PDGQ9ZM.jpg", + "Una imagen de nuestros campistas construyendo proyectos juntos en un café en Seoul.", + "Si completas todas las 2,080 horas de desafíos y proyectos, obtendrás un Certificado de Desarrollo de Pila Completa. Te ofreceremos gratuitamente una práctica en entrevistas para desarrolladores. Incluso ofrecemos un directorio de trabajos donde los empleadores contratan específicamente campistas que han recibido certificaciones de Free Code Camp.", + "" + ] ] }, { "id": "560add37cb82ac38a17513bf", + "descriptionJa": [ + [ + "http://i.imgur.com/EAR7Lvh.jpg", + "Gitterチャットルームの一場面です。", + "コーディングを始める前に、Free Code Camp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に Github アカウントが必要です。", + "" + ], + [ + "http://i.imgur.com/n6GeSEm.gif", + "この gif は Github を開始するまでの流れを表しています。必要な欄に情報を入れて登録をしてください。そして Github からあなたのメールアドレス宛にメールが届きますのでアカウントを承認してください。", + "\"Open link in new tab\"をクリックして Github を開いてください。 必要な欄に情報を入力して GitHub アカウントを作ってください。実際に使われている email アドレスかを確認してください( GitHub にはこの情報が保存されます )。メールアドレス宛に GitHub からメールが来たことを確認してください。 メールにある\"verify email address\"をクリックして開いてください。
注意： もしすでに GitHub アカウントを持っていたら、あなたは \"Open link in new tab\" をクリックすることでこのステップを飛ばすことができます、新しく開かれたタブを閉じて \"go to my next step\" をクリックしてください。私たちはこの大事なステップが飛ばされてしまうのを防ぐために \"このステップを飛ばす\" ボタンは削除してあります。
", + "https://github.com/join" + ], + [ + "http://i.imgur.com/hFqAEr8.gif", + "この gif は Github の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。", + "GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます", + "https://github.com/settings/profile" + ], + [ + "http://i.imgur.com/pYk0wOk.gif", + "この gif は GitHub のレポジトリへのスターをつける方法です。", + "オープンソースの Free Code Camp のレポジトリを開いてください。これは私たちボランティアチームの協力者が Free Code Camp で作っているものです。あなたは \"star\" を私たちのリポジトリに付けることができます。\"star を付けること\"は GitHub での \"いいね\" と一緒です。", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "http://i.imgur.com/OmRmLB4.gif", + "この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。", + "あなたは Github のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって Free Code Camp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "http://i.imgur.com/Ecs5XAd.gif", + "この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。", + "私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。", + "" + ], + [ + "http://i.imgur.com/T0bGJPe.gif", + "この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。", + "私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。", + "" + ], + [ + "http://i.imgur.com/vDTMJSh.gif", + "この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。", + "私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。", + "" + ], + [ + "http://i.imgur.com/WvQvNGN.gif", + "この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。", + "チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。", + "https://gitter.im/apps" + ] + ], "title": "Create a GitHub Account and Join our Chat Rooms", "description": [ [ @@ -298,8 +354,64 @@ "challengeSeed": [], "tests": [], "type": "Waypoint", - "challengeType": 7, - "nameEs": "Crea una Cuenta de GitHub y Únete a nuestras Salas de Chat", + "titleFr": "Créer un compte GitHub et rejoignez nos Salons de chat", + "descriptionFr": [ + [ + "http://i.imgur.com/EAR7Lvh.jpg", + "Une capture d'écran de notre l'un de nos Gitter salles de chat.", + "Avant de commencer à coder, nous allons rejoindre les salles de chat de Camp Code Free . Vous pouvez venir ici tout moment de la journée pour se détendre , poser des questions , ou trouver un autre camping de jumeler programme avec. D'abord, vous aurez besoin d'un compte GitHub.", + "" + ], + [ + "http://i.imgur.com/n6GeSEm.gif", + "Un gif vous montrant à cliquer sur le lien ci-dessous pour aller à GitHub . Remplissez les champs nécessaires et cliquez sur soumettre . Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub sorte que vous pouvez vérifier votre compte.", + "Cliquez sur le \"lien Ouvrir dans une nouvelle touche de tabulation\" ci-dessous pour ouvrir GitHub. Créer un compte GitHub en remplissant le formulaire . Assurez-vous d'utiliser votre adresse email réelle - GitHub gardera cette privé. Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub. Ouvrez-le et cliquez sur \"l'adresse email sur vérifier\" l'intérieur.
Remarque: Si vous avez déjà un compte GitHub , vous pouvez sauter cette étape en cliquant sur \"Ouvrir le lien dans un nouvel onglet\", fermeture le nouvel onglet qui ouvre, puis en cliquant \"aller à ma prochaine étape\". Nous avons retiré notre bouton de \"l'étape de saut\" , car beaucoup de gens il suffit de cliquer à plusieurs reprises sans faire ces étapes importantes.
", + "https://github.com/join" + ], + [ + "http://i.imgur.com/hFqAEr8.gif", + "Un gif vous montrant comment cliquez sur l' image de profil dans le coin supérieur droit de GitHub. Télécharger une photo de vous-même ou vous allez continuer à utiliser l'art de pixel généré automatiquement . Ensuite, remplissez les champs du formulaire restants et cliquez sur soumettre.", + "Cliquez sur le pixel art dans le coin supérieur droit de GitHub , puis choisissez les paramètres . Télécharger une photo de vous-même. Une photo de votre visage qui fonctionne le mieux . Voici comment les autres campeurs vous voir dans nos salles de chat , donc regarder votre meilleur . Vous pouvez ajouter votre ville et votre nom si vous voulez.", + "https://github.com/settings/profile" + ], + [ + "http://i.imgur.com/pYk0wOk.gif", + "Un gif montrant comment vous pouvez activer un repo GitHub.", + "Ouvrez open-source du dépôt central de Camp Code Free . Ceci est où notre équipe de bénévoles collabore à la construction de Camp Code Free. Vous pouvez \"star\" notre référentiel. Mettant en \"vedette\" est la GitHub équivalent de \"goût\" quelque chose.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "http://i.imgur.com/OmRmLB4.gif", + "Un gif vous montrant comment Cliquez sur le lien ci-dessous pour accéder à notre salle de chat et cliquez sur \"Se connecter avec\" bouton GitHub. Puis vous pouvez cliquer dans le champ de saisie de texte et saisissez un message à vos amis campeurs.", + "Maintenant que vous avez une GitHub compte, vous pouvez vous joindre à notre principale salle de chat en vous connectant à GitHub. Présentez-vous en disant \"Hello World!\" avertissez votre amis campeurs comment vous avez trouvé Libre Code Camp. Aussi nous dire pourquoi vous voulez apprendre à code.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "http://i.imgur.com/Ecs5XAd.gif", + "Un gif vous montrant comment vous pouvez cliquez sur le bouton Réglages dans le coin supérieur droit et modifier vos paramètres de notification.", + "Nos salles de chat sont extrêmement actifs. Vous devez modifier vos paramètres pour vous're notifié que si quelqu'un vous mentionne.", + "" + ], + [ + "http://i.imgur.com/T0bGJPe.gif", + "Un gif montrant comment vous pouvez cliquer sur une image de profil utilisateur pour lancer un message privé avec cet utilisateur.", + "Veuillez noter que tous nos salons de chat sont visibles pour le public. Si vous avez besoin de partager des informations sensibles, comme un numéro de téléphone ou l'adresse e-mail, faites-le dans un message privé.", + "" + ], + [ + "http://i.imgur.com/vDTMJSh.gif", + "Un gif montrant que vous pouvez Tab et retour entre défis et nos salles de chat.", + "Garder notre salle de discussion ouverte pendant que vous travaillez à travers nos défis. De cette façon, vous pouvez demander de l'aide si vous êtes coincé. Vous pouvez également socialiser avec d'autres campeurs lorsque vous sentez comme prendre une pause.", + "" + ], + [ + "http://i.imgur.com/WvQvNGN.gif", + "Un gif montrant comment vous pouvez cliquer sur le lien ci-dessous pour télécharger un natif salle de chat app pour votre ordinateur.", + "Vous pouvez également télécharger la salle de chat app pour votre ordinateur ou votre téléphone.", + "https://gitter.im/apps" + ] + ], + "titleEs": "Crea una Cuenta de GitHub y Únete a nuestras Salas de Chat", "descriptionEs": [ [ "http://i.imgur.com/EAR7Lvh.jpg", @@ -357,120 +469,8 @@ "https://gitter.im/apps" ] ], - "nameFr": "Créer un compte GitHub et rejoignez nos Salons de chat", - "descriptionFr": [ - [ - "http://i.imgur.com/EAR7Lvh.jpg", - "Une capture d'écran de notre l'un de nos Gitter salles de chat.", - "Avant de commencer à coder, nous allons rejoindre les salles de chat de Camp Code Free . Vous pouvez venir ici tout moment de la journée pour se détendre , poser des questions , ou trouver un autre camping de jumeler programme avec. D'abord, vous aurez besoin d'un compte GitHub.", - "" - ], - [ - "http://i.imgur.com/n6GeSEm.gif", - "Un gif vous montrant à cliquer sur le lien ci-dessous pour aller à GitHub . Remplissez les champs nécessaires et cliquez sur soumettre . Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub sorte que vous pouvez vérifier votre compte.", - "Cliquez sur le \"lien Ouvrir dans une nouvelle touche de tabulation\" ci-dessous pour ouvrir GitHub. Créer un compte GitHub en remplissant le formulaire . Assurez-vous d'utiliser votre adresse email réelle - GitHub gardera cette privé. Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub. Ouvrez-le et cliquez sur \"l'adresse email sur vérifier\" l'intérieur.
Remarque: Si vous avez déjà un compte GitHub , vous pouvez sauter cette étape en cliquant sur \"Ouvrir le lien dans un nouvel onglet\", fermeture le nouvel onglet qui ouvre, puis en cliquant \"aller à ma prochaine étape\". Nous avons retiré notre bouton de \"l'étape de saut\" , car beaucoup de gens il suffit de cliquer à plusieurs reprises sans faire ces étapes importantes.
", - "https://github.com/join" - ], - [ - "http://i.imgur.com/hFqAEr8.gif", - "Un gif vous montrant comment cliquez sur l' image de profil dans le coin supérieur droit de GitHub. Télécharger une photo de vous-même ou vous allez continuer à utiliser l'art de pixel généré automatiquement . Ensuite, remplissez les champs du formulaire restants et cliquez sur soumettre.", - "Cliquez sur le pixel art dans le coin supérieur droit de GitHub , puis choisissez les paramètres . Télécharger une photo de vous-même. Une photo de votre visage qui fonctionne le mieux . Voici comment les autres campeurs vous voir dans nos salles de chat , donc regarder votre meilleur . Vous pouvez ajouter votre ville et votre nom si vous voulez.", - "https://github.com/settings/profile" - ], - [ - "http://i.imgur.com/pYk0wOk.gif", - "Un gif montrant comment vous pouvez activer un repo GitHub.", - "Ouvrez open-source du dépôt central de Camp Code Free . Ceci est où notre équipe de bénévoles collabore à la construction de Camp Code Free. Vous pouvez \"star\" notre référentiel. Mettant en \"vedette\" est la GitHub équivalent de \"goût\" quelque chose.", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "http://i.imgur.com/OmRmLB4.gif", - "Un gif vous montrant comment Cliquez sur le lien ci-dessous pour accéder à notre salle de chat et cliquez sur \"Se connecter avec\" bouton GitHub. Puis vous pouvez cliquer dans le champ de saisie de texte et saisissez un message à vos amis campeurs.", - "Maintenant que vous avez une GitHub compte, vous pouvez vous joindre à notre principale salle de chat en vous connectant à GitHub. Présentez-vous en disant \"Hello World!\" avertissez votre amis campeurs comment vous avez trouvé Libre Code Camp. Aussi nous dire pourquoi vous voulez apprendre à code.", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "http://i.imgur.com/Ecs5XAd.gif", - "Un gif vous montrant comment vous pouvez cliquez sur le bouton Réglages dans le coin supérieur droit et modifier vos paramètres de notification.", - "Nos salles de chat sont extrêmement actifs. Vous devez modifier vos paramètres pour vous're notifié que si quelqu'un vous mentionne.", - "" - ], - [ - "http://i.imgur.com/T0bGJPe.gif", - "Un gif montrant comment vous pouvez cliquer sur une image de profil utilisateur pour lancer un message privé avec cet utilisateur.", - "Veuillez noter que tous nos salons de chat sont visibles pour le public. Si vous avez besoin de partager des informations sensibles, comme un numéro de téléphone ou l'adresse e-mail, faites-le dans un message privé.", - "" - ], - [ - "http://i.imgur.com/vDTMJSh.gif", - "Un gif montrant que vous pouvez Tab et retour entre défis et nos salles de chat.", - "Garder notre salle de discussion ouverte pendant que vous travaillez à travers nos défis. De cette façon, vous pouvez demander de l'aide si vous êtes coincé. Vous pouvez également socialiser avec d'autres campeurs lorsque vous sentez comme prendre une pause.", - "" - ], - [ - "http://i.imgur.com/WvQvNGN.gif", - "Un gif montrant comment vous pouvez cliquer sur le lien ci-dessous pour télécharger un natif salle de chat app pour votre ordinateur.", - "Vous pouvez également télécharger la salle de chat app pour votre ordinateur ou votre téléphone.", - "https://gitter.im/apps" - ] - ], - "nameJa": "Githubアカウントを作成し、チャットに参加しましょう", - "descriptionJa": [ - [ - "http://i.imgur.com/EAR7Lvh.jpg", - "Gitterチャットルームの一場面です。", - "コーディングを始める前に、Free Code Camp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に Github アカウントが必要です。", - "" - ], - [ - "http://i.imgur.com/n6GeSEm.gif", - "この gif は Github を開始するまでの流れを表しています。必要な欄に情報を入れて登録をしてください。そして Github からあなたのメールアドレス宛にメールが届きますのでアカウントを承認してください。", - "\"Open link in new tab\"をクリックして Github を開いてください。 必要な欄に情報を入力して GitHub アカウントを作ってください。実際に使われている email アドレスかを確認してください( GitHub にはこの情報が保存されます )。メールアドレス宛に GitHub からメールが来たことを確認してください。 メールにある\"verify email address\"をクリックして開いてください。
注意： もしすでに GitHub アカウントを持っていたら、あなたは \"Open link in new tab\" をクリックすることでこのステップを飛ばすことができます、新しく開かれたタブを閉じて \"go to my next step\" をクリックしてください。私たちはこの大事なステップが飛ばされてしまうのを防ぐために \"このステップを飛ばす\" ボタンは削除してあります。
", - "https://github.com/join" - ], - [ - "http://i.imgur.com/hFqAEr8.gif", - "この gif は Github の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。", - "GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます", - "https://github.com/settings/profile" - ], - [ - "http://i.imgur.com/pYk0wOk.gif", - "この gif は GitHub のレポジトリへのスターをつける方法です。", - "オープンソースの Free Code Camp のレポジトリを開いてください。これは私たちボランティアチームの協力者が Free Code Camp で作っているものです。あなたは \"star\" を私たちのリポジトリに付けることができます。\"star を付けること\"は GitHub での \"いいね\" と一緒です。", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "http://i.imgur.com/OmRmLB4.gif", - "この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。", - "あなたは Github のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって Free Code Camp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "http://i.imgur.com/Ecs5XAd.gif", - "この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。", - "私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。", - "" - ], - [ - "http://i.imgur.com/T0bGJPe.gif", - "この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。", - "私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。", - "" - ], - [ - "http://i.imgur.com/vDTMJSh.gif", - "この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。", - "私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。", - "" - ], - [ - "http://i.imgur.com/WvQvNGN.gif", - "この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。", - "チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。", - "https://gitter.im/apps" - ] - ] + "titleJa": "Githubアカウントを作成し、チャットに参加しましょう", + "challengeType": 7 }, { "id": "560add56cb82ac38a17513c0", @@ -487,7 +487,7 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Configura tu portafolio de código", + "titleEs": "Configura tu portafolio de código", "descriptionEs": [ [ "http://i.imgur.com/tP2ccTE.gif", @@ -518,7 +518,16 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Únete a un Campamento en Tu Ciudad", + "titleFr": "Configurer votre code portefeuille", + "descriptionFr": [ + [ + "http://i.imgur.com/tP2ccTE.gif", + "Un gif montrant comment vous pouvez cliquez sur l'image de votre profil dans votre coin supérieur droit à votre code portefeuille et connectez GitHub.", + "Vérifiez votre code portefeuille. Cliquez sur votre photo dans votre coin supérieur droit. Pour activer votre code portefeuille, vous'll nécessité de lier votre compte avec code sans GitHub Camp. Votre code portefeuille affiche votre progression et combien de bons points vous avez. Vous pouvez obtenir de bons points par remplir les défis et en aidant d'autres campeurs dans nos salles de chat. Si vous obtenez Brownie Points sur plusieurs jours d'affilée, vous'll obtenez une rayure.", + "" + ] + ], + "titleEs": "Únete a un Campamento en Tu Ciudad", "descriptionEs": [ [ "http://i.imgur.com/NAOFJWN.jpg", @@ -532,15 +541,6 @@ "Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve. Si tu ciudad no esta en esta lista, ve al final del articulo de la wiki para ver instrucciones de como crear un campamento para tu ciudad.", "https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites" ] - ], - "nameFr": "Configurer votre code portefeuille", - "descriptionFr": [ - [ - "http://i.imgur.com/tP2ccTE.gif", - "Un gif montrant comment vous pouvez cliquez sur l'image de votre profil dans votre coin supérieur droit à votre code portefeuille et connectez GitHub.", - "Vérifiez votre code portefeuille. Cliquez sur votre photo dans votre coin supérieur droit. Pour activer votre code portefeuille, vous'll nécessité de lier votre compte avec code sans GitHub Camp. Votre code portefeuille affiche votre progression et combien de bons points vous avez. Vous pouvez obtenir de bons points par remplir les défis et en aidant d'autres campeurs dans nos salles de chat. Si vous obtenez Brownie Points sur plusieurs jours d'affilée, vous'll obtenez une rayure.", - "" - ] ] }, { @@ -600,7 +600,58 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Aprende que hacer si te quedas atascado", + "titleFr": "Apprenez quoi faire quand vous êtes bloqué ?", + "descriptionFr": [ + [ + "http://i.imgur.com/lzKvwU2.jpg", + "Le texte \"Coder est difficile.\"", + "Coder est difficile. Vous serez bloqué un jour ou l'autre. Même les développeurs expérimentés peuvent être bloqués. La solution est de savoir comment se débloquer.", + "" + ], + [ + "http://i.imgur.com/sfsidp6.jpg", + "Le texte \"Etre un bon développeur prend du temps.\"", + "Etre un bon développeur prend du temps. Vous ne pouvez pas vous attendre à battre un maitre des echecs aprés 3 mois d'apprentissage. Ne vous attendez pas de construire le prochain Facebook aprés 3 mois de coding.", + "" + ], + [ + "http://i.imgur.com/EoTfOyC.jpg", + "Une image de quelques uns de nos développeurs codant ensemble à Montreal.", + "Continuez de développer tous les jours et fréquentez d'autres développeurs et vous deviendrez un développeur prêt à l'emploi.", + "" + ], + [ + "http://i.imgur.com/EWWZBag.jpg", + "Une image avec le texte \"1. Lisez l'erreur 2. Cherchez sur Google 3. Demandez de l'aide.", + "Chaque fois que vous êtes bloqué ou que vous ne savez pas quoi faire : Lisez-Cherchez-Demandez.", + "" + ], + [ + "http://i.imgur.com/99BfAcK.jpg", + "Une image montrant la document jQuery", + "Lisez d'abord la documentation ou les messages d'erreurs. Le principal atout que les bon développeurs ont est la capacité d'interpréter et ensuite de suivre les instructions.", + "" + ], + [ + "http://i.imgur.com/GxvrsFb.gif", + "Une image vous montrant comment fiare des recherches avancées sur Google. On commence par rentrer la requète \"jquery ne fonctionne pas lors du chargement de ma page\". Puis nous cliquons sur la barre de recherche et changeons la case à cocher \"Any time\" cochons la case \"au cours de l'année précédente\". Puis nous cliquons sur le résultat et lisons l'article et trouvons notre réponse.", + "Si cela ne vous aide pas, recherchez sur Google. De bonnes recherches sur Google demande pas mal de pratique. Quand vous recherchez sur Google, vous devez inclure le langage ou le framework que vous utilisez. Vous voulez aussi limiter vos résultats a une période récente.", + "" + ], + [ + "http://i.imgur.com/LZYU7p2.gif", + "Une image vous montrant le lien ci-dessous pour rejoindre le char et demander \"jquery ne fonctionne pas lors du chargement de ma page\".", + "Si cela ne vous aide pas, demande à vos amis. Si vous avez des difficultés, vous pouvez demander aux autres développeurs sur le chat.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "http://i.imgur.com/ZRgXraT.gif", + "Une image vous montrant le cursus de notre carte des défis.", + "Maintenant vous être prêt pour commencer à coder. Le boutton \"Map\" situé en haut à droite de votre écran vous montrera notre carte des défis. Nous vous recommandons de les completer du début jusqu'à la fin, régulièrement. Notre communauté open source continue de d'améliorer nos défis, ne soyez donc pas surpris si ils changent ou évoluent. Ce n'est pas la peine de revenir en arrière, continuez à progresser. Vous pouvez toujours accéder à nos derniers défis juste en cliquant sur le boutton \"Learn\".", + "" + ] + ], + "titleEs": "Aprende que hacer si te quedas atascado", "descriptionEs": [ [ "http://i.imgur.com/lzKvwU2.jpg", @@ -650,57 +701,6 @@ "Ahora estas listo para empezar a programar. El botón de \"Mapa\" en tu esquina superior derecha te mostrará nuestro mapa de desafíos. Te recomendaos que completes los desafíos de arriba hacía abajo, a un ritmo sostenible. Nuestra comunidad de código abierto esta constantemente mejorando nuestros desafíos, así que no te sorprendas si cambian o se mueven alrededor. No te preocupes por volver hacia atrás - solo continúa avanzando. Siempre puedes ir a tu desafío más reciente pulsando el botón de \"Aprender\".", "" ] - ], - "nameFr": "Apprenez quoi faire quand vous êtes bloqué ?", - "descriptionFr": [ - [ - "http://i.imgur.com/lzKvwU2.jpg", - "Le texte \"Coder est difficile.\"", - "Coder est difficile. Vous serez bloqué un jour ou l'autre. Même les développeurs expérimentés peuvent être bloqués. La solution est de savoir comment se débloquer.", - "" - ], - [ - "http://i.imgur.com/sfsidp6.jpg", - "Le texte \"Etre un bon développeur prend du temps.\"", - "Etre un bon développeur prend du temps. Vous ne pouvez pas vous attendre à battre un maitre des echecs aprés 3 mois d'apprentissage. Ne vous attendez pas de construire le prochain Facebook aprés 3 mois de coding.", - "" - ], - [ - "http://i.imgur.com/EoTfOyC.jpg", - "Une image de quelques uns de nos développeurs codant ensemble à Montreal.", - "Continuez de développer tous les jours et fréquentez d'autres développeurs et vous deviendrez un développeur prêt à l'emploi.", - "" - ], - [ - "http://i.imgur.com/EWWZBag.jpg", - "Une image avec le texte \"1. Lisez l'erreur 2. Cherchez sur Google 3. Demandez de l'aide.", - "Chaque fois que vous êtes bloqué ou que vous ne savez pas quoi faire : Lisez-Cherchez-Demandez.", - "" - ], - [ - "http://i.imgur.com/99BfAcK.jpg", - "Une image montrant la document jQuery", - "Lisez d'abord la documentation ou les messages d'erreurs. Le principal atout que les bon développeurs ont est la capacité d'interpréter et ensuite de suivre les instructions.", - "" - ], - [ - "http://i.imgur.com/GxvrsFb.gif", - "Une image vous montrant comment fiare des recherches avancées sur Google. On commence par rentrer la requète \"jquery ne fonctionne pas lors du chargement de ma page\". Puis nous cliquons sur la barre de recherche et changeons la case à cocher \"Any time\" cochons la case \"au cours de l'année précédente\". Puis nous cliquons sur le résultat et lisons l'article et trouvons notre réponse.", - "Si cela ne vous aide pas, recherchez sur Google. De bonnes recherches sur Google demande pas mal de pratique. Quand vous recherchez sur Google, vous devez inclure le langage ou le framework que vous utilisez. Vous voulez aussi limiter vos résultats a une période récente.", - "" - ], - [ - "http://i.imgur.com/LZYU7p2.gif", - "Une image vous montrant le lien ci-dessous pour rejoindre le char et demander \"jquery ne fonctionne pas lors du chargement de ma page\".", - "Si cela ne vous aide pas, demande à vos amis. Si vous avez des difficultés, vous pouvez demander aux autres développeurs sur le chat.", - "https://gitter.im/FreeCodeCamp/Help" - ], - [ - "http://i.imgur.com/ZRgXraT.gif", - "Une image vous montrant le cursus de notre carte des défis.", - "Maintenant vous être prêt pour commencer à coder. Le boutton \"Map\" situé en haut à droite de votre écran vous montrera notre carte des défis. Nous vous recommandons de les completer du début jusqu'à la fin, régulièrement. Notre communauté open source continue de d'améliorer nos défis, ne soyez donc pas surpris si ils changent ou évoluent. Ce n'est pas la peine de revenir en arrière, continuez à progresser. Vous pouvez toujours accéder à nos derniers défis juste en cliquant sur le boutton \"Learn\".", - "" - ] ] } ] diff --git a/challenges/01-front-end-development-certification/advanced-bonfires.json b/challenges/01-front-end-development-certification/advanced-bonfires.json index 5fb09d2418..71b516ab13 100644 --- a/challenges/01-front-end-development-certification/advanced-bonfires.json +++ b/challenges/01-front-end-development-certification/advanced-bonfires.json @@ -58,7 +58,7 @@ "RegExp" ], "challengeType": 5, - "nameEs": "Valida Números Telefónicos de los EEUU", + "titleEs": "Valida Números Telefónicos de los EEUU", "descriptionEs": [ "Haz que la función devuelva true (verdadero) si el texto introducido es un número válido en los EEUU.", "El usuario debe llenar el campo del formulario de la forma que desee siempre y cuando sea un número válido en los EEUU. Los números mostrados a continuación tienen formatos válidos en los EEUU:", @@ -103,7 +103,7 @@ "Symmetric Difference" ], "challengeType": 5, - "nameEs": "Diferencia simétrica", + "titleEs": "Diferencia simétrica", "descriptionEs": [ "Crea una función que acepte dos o más arreglos y que devuelva un arreglo conteniendo la diferenia simétrica entre ambos", "En Matemáticas, el término 'diferencia simétrica' se refiere a los elementos en dos conjuntos que están en el primer conjunto o en el segundo, pero no en ambos.", @@ -155,7 +155,7 @@ "Global Object" ], "challengeType": 5, - "nameEs": "Cambio exacto", + "titleEs": "Cambio exacto", "descriptionEs": [ "Crea una función que simule una caja registradora que acepte el precio de compra como el primer argumento, la cantidad recibida como el segundo argumento, y la cantidad de dinero disponible en la registradora (cid) como tercer argumento", "cid es un arreglo bidimensional que lista la cantidad de dinero disponible", @@ -210,7 +210,7 @@ "Global Array Object" ], "challengeType": 5, - "nameEs": "Actualizando el inventario", + "titleEs": "Actualizando el inventario", "descriptionEs": [ "Compara y actualiza el inventario actual, almacenado en un arreglo bidimensional, contra otro arreglo bidimensional de inventario nuevo. Actualiza las cantidades en el inventario actual y, en caso de recibir una nueva mercancía, añade su nombre y la cantidad recibida al arreglo del inventario en orden alfabético.", "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." @@ -249,7 +249,7 @@ "RegExp" ], "challengeType": 5, - "nameEs": "Sin repeticiones, por favor", + "titleEs": "Sin repeticiones, por favor", "descriptionEs": [ "Crea una función que devuelva el número total de permutaciones de las letras en la cadena de texto provista, en las cuales no haya letras consecutivas repetidas", "Por ejemplo, 'aab' debe retornar 2 porque, del total de 6 permutaciones posibles, solo 2 de ellas no tienen repetida la misma letra (en este caso 'a').", @@ -295,7 +295,7 @@ "parseInt()" ], "challengeType": 5, - "nameEs": "Rangos de fechas amigables", + "titleEs": "Rangos de fechas amigables", "descriptionEs": [ "Convierte un rango de fecha que conste de dos fechas en formato AAAA-MM-DD a un formato más legible", "", @@ -345,7 +345,7 @@ "Details of the Object Model" ], "challengeType": 5, - "nameEs": "Crea una Persona", + "titleEs": "Crea una Persona", "descriptionEs": [ "Completa el constructor de objetos con los métodos especificados en las pruebas.", "Los métodos son: getFirstName(), getLastName(), getFullName(), setFirstName(first), setLastName(last), y setFullName(firstAndLast). ", @@ -386,7 +386,7 @@ "Math.pow()" ], "challengeType": 5, - "nameEs": "Ubica los escombros", + "titleEs": "Ubica los escombros", "descriptionEs": [ "Crea una función que devuelva un nuevo arreglo que transforme la altitud promedio del elemento en su período orbital.", "El arreglo debe contener objetos en el formato {name: 'name', avgAlt: avgAlt}.", @@ -427,7 +427,7 @@ "Array.reduce()" ], "challengeType": 5, - "nameEs": "En parejas", + "titleEs": "En parejas", "descriptionEs": [ "Crea una función que devuelva la suma de todos los índices de los elementos de 'arr' que pueden ser emparejados con otro elemento de tal forma que la suma de ambos equivalga al valor del segundo argumento, 'arg'. Si varias combinaciones son posibles, devuelve la menor suma de índices. Una vez un elemento ha sido usado, no puede ser usado de nuevo para emparejarlo con otro elemento.", "Por ejemplo, pairwise([1, 4, 2, 3, 0, 5], 7) debe devolver 11 porque 4, 2, 3 y 5 pueden ser emparejados para obtener una suma de 7", diff --git a/challenges/01-front-end-development-certification/advanced-ziplines.json b/challenges/01-front-end-development-certification/advanced-ziplines.json index 1ca5dead67..d845ac56d4 100644 --- a/challenges/01-front-end-development-certification/advanced-ziplines.json +++ b/challenges/01-front-end-development-certification/advanced-ziplines.json @@ -24,7 +24,6 @@ "tests": [], "type": "zipline", "challengeType": 3, - "nameEs": "Crea una calculadora JavaScript", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a esta: http://codepen.io/FreeCodeCamp/full/zrRzMR.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", @@ -36,7 +35,8 @@ "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen. ", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], - "isRequired": true + "isRequired": true, + "titleEs": "Crea una calculadora JavaScript" }, { "id": "bd7158d8c442eddfaeb5bd0f", @@ -57,7 +57,9 @@ ], "tests": [], "type": "zipline", - "nameRu": "Создайте таймер Pomodoro", + "isRequired": true, + "challengeType": 3, + "titleRu": "Создайте таймер Pomodoro", "descriptionRu": [ "Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/FreeCodeCamp/full/VemPZX.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", @@ -71,7 +73,7 @@ "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" ], - "nameEs": "Crea un reloj pomodoro", + "titleEs": "Crea un reloj pomodoro", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/VemPZX.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", @@ -82,9 +84,7 @@ "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." - ], - "isRequired": true, - "challengeType": 3 + ] }, { "id": "bd7158d8c442eedfaeb5bd1c", @@ -106,7 +106,6 @@ "tests": [], "type": "zipline", "challengeType": 3, - "nameEs": "Crea un juego de Tic Tac Toe", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/adBpvw.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", @@ -118,7 +117,8 @@ "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], - "isRequired": true + "isRequired": true, + "titleEs": "Crea un juego de Tic Tac Toe" }, { "id": "bd7158d8c442eddfaeb5bd1c", @@ -146,7 +146,6 @@ "tests": [], "type": "zipline", "challengeType": 3, - "nameEs": "Construye un juego de Simon", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/Em-Ant/full/QbRyqq/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", @@ -164,7 +163,8 @@ "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], - "isRequired": true + "isRequired": true, + "titleEs": "Construye un juego de Simon" } ] } diff --git a/challenges/01-front-end-development-certification/basic-bonfires.json b/challenges/01-front-end-development-certification/basic-bonfires.json index 47cf69c07c..eb11c40fb6 100644 --- a/challenges/01-front-end-development-certification/basic-bonfires.json +++ b/challenges/01-front-end-development-certification/basic-bonfires.json @@ -37,8 +37,7 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Prepárate para nuestros Desafíos sobre Algoritmos", - "descriptionEs": [ + "descriptionEs": [ [ "http://i.imgur.com/sJkp30a.png", "Una imagen de un desafio sobre algoritmos que presenta instrucciones, pruebas y el editor de código.", @@ -64,7 +63,8 @@ "" ] ], - "isRequired": false + "isRequired": false, + "titleEs": "Prepárate para nuestros Desafíos sobre Algoritmos" }, { "id": "a202eed8fc186c8434cb6d61", @@ -82,10 +82,6 @@ "", "reverseString(\"hello\");" ], - "isRequired": true, - "solutions": [ - "function reverseString(str) {\n return str.split('').reverse().join(\"\");\n}\n\nreverseString('hello');\n" - ], "tests": [ "assert(typeof reverseString(\"hello\") === \"string\", 'message: reverseString(\"hello\") should return a string.');", "assert(reverseString(\"hello\") === \"olleh\", 'message: reverseString(\"hello\") should become \"olleh\".');", @@ -93,6 +89,10 @@ "assert(reverseString(\"Greetings from Earth\") === \"htraE morf sgniteerG\", 'message: reverseString(\"Greetings from Earth\") should return \"htraE morf sgniteerG\".');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function reverseString(str) {\n return str.split('').reverse().join(\"\");\n}\n\nreverseString('hello');\n" + ], "MDNlinks": [ "Global String Object", "String.split()", @@ -100,7 +100,7 @@ "Array.join()" ], "challengeType": 5, - "nameEs": "Invierte el texto", + "titleEs": "Invierte el texto", "descriptionEs": [ "Invierte la cadena de texto que se te provee", "Puede que necesites convertir la cadena de texto en un arreglo antes de que puedas invertirla", @@ -125,10 +125,6 @@ "", "factorialize(5);" ], - "isRequired": true, - "solutions": [ - "function factorialize(num) {\n return num < 1 ? 1 : num * factorialize(num-1);\n}\n\nfactorialize(5);\n" - ], "tests": [ "assert(typeof factorialize(5) === 'number', 'message: factorialize(5) should return a number.');", "assert(factorialize(5) === 120, 'message: factorialize(5) should return 120.');", @@ -137,11 +133,15 @@ "assert(factorialize(0) === 1, 'message: factorialize(0) should return 1.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function factorialize(num) {\n return num < 1 ? 1 : num * factorialize(num-1);\n}\n\nfactorialize(5);\n" + ], "MDNlinks": [ "Arithmetic Operators" ], "challengeType": 5, - "nameEs": "Factoriza un número", + "titleEs": "Factoriza un número", "descriptionEs": [ "Crea una función que devuelva el factorial del número entero que se te provee", "El factorial de un número entero positivo n es la multiplicación de todos los enteros positivos menores o iguales a n", @@ -170,10 +170,6 @@ "", "palindrome(\"eye\");" ], - "isRequired": true, - "solutions": [ - "function palindrome(str) {\n var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n var aux = string.split('');\n if (aux.join('') === aux.reverse().join('')){\n return true;\n }\n\n return false;\n}" - ], "tests": [ "assert(typeof palindrome(\"eye\") === \"boolean\", 'message: palindrome(\"eye\") should return a boolean.');", "assert(palindrome(\"eye\") === true, 'message: palindrome(\"eye\") should return true.');", @@ -188,12 +184,16 @@ "assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, 'message: palindrome(\"0_0 (: /-\\ :) 0-0\") should return true.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function palindrome(str) {\n var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n var aux = string.split('');\n if (aux.join('') === aux.reverse().join('')){\n return true;\n }\n\n return false;\n}" + ], "MDNlinks": [ "String.replace()", "String.toLowerCase()" ], "challengeType": 5, - "nameEs": "Verifica si es palíndromo", + "titleEs": "Verifica si es palíndromo", "descriptionEs": [ "Crea una función que devuelva true si una cadena de texto dada es un palíndromo, y que devuelva false en caso contrario", "Un palíndromo es una palabra u oración que se escribe de la misma forma en ambos sentidos, sin tomar en cuenta signos de puntuación, espacios y sin distinguir entre mayúsculas y minúsculas.", @@ -217,10 +217,6 @@ "", "findLongestWord(\"The quick brown fox jumped over the lazy dog\");" ], - "isRequired": true, - "solutions": [ - "function findLongestWord(str) {\n return str.split(' ').sort(function(a, b) { return b.length - a.length;})[0].length;\n}\n\nfindLongestWord('The quick brown fox jumped over the lazy dog');\n" - ], "tests": [ "assert(typeof findLongestWord(\"The quick brown fox jumped over the lazy dog\") === \"number\", 'message: findLongestWord(\"The quick brown fox jumped over the lazy dog\") should return a number.');", "assert(findLongestWord(\"The quick brown fox jumped over the lazy dog\") === 6, 'message: findLongestWord(\"The quick brown fox jumped over the lazy dog\") should return 6.');", @@ -230,12 +226,16 @@ "assert(findLongestWord(\"What if we try a super-long word such as otorhinolaryngology\") === 19, 'message: findLongestWord(\"What if we try a super-long word such as otorhinolaryngology\") should return 19.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function findLongestWord(str) {\n return str.split(' ').sort(function(a, b) { return b.length - a.length;})[0].length;\n}\n\nfindLongestWord('The quick brown fox jumped over the lazy dog');\n" + ], "MDNlinks": [ "String.split()", "String.length" ], "challengeType": 5, - "nameEs": "Encuentra la palabra más larga", + "titleEs": "Encuentra la palabra más larga", "descriptionEs": [ "Crea una función que devuelva la longitud de la palabra más larga en una frase dada", "El resultado debe ser un número", @@ -257,10 +257,6 @@ "", "titleCase(\"I'm a little tea pot\");" ], - "isRequired": true, - "solutions": [ - "function titleCase(str) {\n return str.split(' ').map(function(word) {\n return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n" - ], "tests": [ "assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", 'message: titleCase(\"I'm a little tea pot\") should return a string.');", "assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", 'message: titleCase(\"I'm a little tea pot\") should return \"I'm A Little Tea Pot\".');", @@ -268,11 +264,15 @@ "assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", 'message: titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") should return \"Here Is My Handle Here Is My Spout\".');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function titleCase(str) {\n return str.split(' ').map(function(word) {\n return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n" + ], "MDNlinks": [ "String.split()" ], "challengeType": 5, - "nameEs": "Aplica formato de título", + "titleEs": "Aplica formato de título", "descriptionEs": [ "Crea una función que devuelva la cadena de texto que recibe con la primera letra de cada palabra en mayúscula. Asegúrate de que el resto de las letras sean minúsculas", "Para este ejercicio, también debes poner en mayúscula conectores como \"the\" y \"of\".", @@ -295,21 +295,21 @@ "", "largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);" ], - "isRequired": true, - "solutions": [ - "function largestOfFour(arr) {\n return arr.map(function(subArr) {\n return Math.max.apply(null, subArr);\n });\n}\n\nlargestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);\n" - ], "tests": [ "assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, 'message: largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return an array.');", "assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27,5,39,1001], 'message: largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return [27,5,39,1001].');", "assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9,35,97,1000000], 'message: largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]) should return [9, 35, 97, 1000000].');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function largestOfFour(arr) {\n return arr.map(function(subArr) {\n return Math.max.apply(null, subArr);\n });\n}\n\nlargestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);\n" + ], "MDNlinks": [ "Comparison Operators" ], "challengeType": 5, - "nameEs": "Devuelve el mayor entero de cada arreglo", + "titleEs": "Devuelve el mayor entero de cada arreglo", "descriptionEs": [ "Crea una función que devuelva un arreglo que contenga el mayor de los números de cada sub-arreglo que recibe. Para simplificar las cosas, el arreglo que recibirá tendrá exactamente 4 sub-arreglos", "Recuerda que puedes iterar a través de un arreglo con un búcle simple, y acceder a cada miembro utilizando la sintaxis arr[i].", @@ -333,10 +333,6 @@ "", "end(\"Bastian\", \"n\");" ], - "isRequired": true, - "solutions": [ - "function end(str, target) {\n return str.substring(str.length-target.length) === target;\n};\n" - ], "tests": [ "assert(end(\"Bastian\", \"n\") === true, 'message: end(\"Bastian\", \"n\") should return true.');", "assert(end(\"Connor\", \"n\") === false, 'message: end(\"Connor\", \"n\") should return false.');", @@ -347,11 +343,15 @@ "assert(end(\"If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing\", \"mountain\") === false, 'message: end(\"If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing\", \"mountain\") should return false.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function end(str, target) {\n return str.substring(str.length-target.length) === target;\n};\n" + ], "MDNlinks": [ "String.substr()" ], "challengeType": 5, - "nameEs": "Confirma la terminación", + "titleEs": "Confirma la terminación", "descriptionEs": [ "Verifica si una cadena de texto (primer argumento) termina con otra cadena de texto (segundo argumento).", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." @@ -372,10 +372,6 @@ "", "repeat(\"abc\", 3);" ], - "isRequired": true, - "solutions": [ - "function repeat(str, num) {\n if (num < 0) return '';\n return num === 1 ? str : str + repeat(str, num-1);\n}\n\nrepeat('abc', 3);\n" - ], "tests": [ "assert(repeat(\"*\", 3) === \"***\", 'message: repeat(\"*\", 3) should return \"***\".');", "assert(repeat(\"abc\", 3) === \"abcabcabc\", 'message: repeat(\"abc\", 3) should return \"abcabcabc\".');", @@ -385,11 +381,15 @@ "assert(repeat(\"abc\", -2) === \"\", 'message: repeat(\"abc\", -2) should return \"\".');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function repeat(str, num) {\n if (num < 0) return '';\n return num === 1 ? str : str + repeat(str, num-1);\n}\n\nrepeat('abc', 3);\n" + ], "MDNlinks": [ "Global String Object" ], "challengeType": 5, - "nameEs": "Repite el texto Repite el texto", + "titleEs": "Repite el texto Repite el texto", "descriptionEs": [ "Repite una cadena de texto dada (primer argumento) num veces (segundo argumento). Retorna una cadena de texto vacía si num es un número negativo.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." @@ -412,10 +412,6 @@ "", "truncate(\"A-tisket a-tasket A green and yellow basket\", 11);" ], - "isRequired": true, - "solutions": [ - "function truncate(str, num) {\n if(str.length > num ) {\n if(num > 3) {\n return str.slice(0, num - 3) + '...';\n } else {\n return str.slice(0,num) + '...';\n }\n } \n return str;\n}" - ], "tests": [ "assert(truncate(\"A-tisket a-tasket A green and yellow basket\", 11) === \"A-tisket...\", 'message: truncate(\"A-tisket a-tasket A green and yellow basket\", 11) should return \"A-tisket...\".');", "assert(truncate(\"Peter Piper picked a peck of pickled peppers\", 14) === \"Peter Piper...\", 'message: truncate(\"Peter Piper picked a peck of pickled peppers\", 14) should return \"Peter Piper...\".');", @@ -425,11 +421,15 @@ "assert(truncate(\"Absolutely Longer\", 2) === \"Ab...\", 'message: truncate(\"Absolutely Longer\", 2) should return \"Ab...\".');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function truncate(str, num) {\n if(str.length > num ) {\n if(num > 3) {\n return str.slice(0, num - 3) + '...';\n } else {\n return str.slice(0,num) + '...';\n }\n } \n return str;\n}" + ], "MDNlinks": [ "String.slice()" ], "challengeType": 5, - "nameEs": "Trunca una cadena de texto", + "titleEs": "Trunca una cadena de texto", "descriptionEs": [ "Trunca una cadena de texto (primer argumento) si su longitud es mayor que un máximo de caracteres dado (segundo argumento). Devuelve la cadena de texto truncada con una terminación \"...\".", "Ten en cuenta que los tres puntos al final también se cuentan dentro de la longitud de la cadena de texto.", @@ -452,10 +452,6 @@ "", "chunk([\"a\", \"b\", \"c\", \"d\"], 2);" ], - "isRequired": true, - "solutions": [ - "function chunk(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunk(['a', 'b', 'c', 'd'], 2);\n" - ], "tests": [ "assert.deepEqual(chunk([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: chunk([\"a\", \"b\", \"c\", \"d\"], 2) should return [[\"a\", \"b\"], [\"c\", \"d\"]].');", "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: chunk([0, 1, 2, 3, 4, 5], 3) should return [[0, 1, 2], [3, 4, 5]].');", @@ -465,12 +461,16 @@ "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: chunk([0, 1, 2, 3, 4, 5, 6, 7, 8], 4) should return [[0, 1, 2, 3], [4, 5, 6, 7], [8]].');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function chunk(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunk(['a', 'b', 'c', 'd'], 2);\n" + ], "MDNlinks": [ "Array.push()", "Array.slice()" ], "challengeType": 5, - "nameEs": "En mil pedazos", + "titleEs": "En mil pedazos", "descriptionEs": [ "Escribe una función que parta un arreglo (primer argumento) en fragmentos de una longitud dada (segundo argumento) y los devuelva en forma de un arreglo bidimensional.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." @@ -492,10 +492,6 @@ "", "slasher([1, 2, 3], 2);" ], - "isRequired": true, - "solutions": [ - "function slasher(arr, howMany) {\n // it doesn't always pay to be first\n return arr.slice(howMany);\n}\n\nslasher([1, 2, 3], 2);\n" - ], "tests": [ "assert.deepEqual(slasher([1, 2, 3], 2), [3], 'message: slasher([1, 2, 3], 2) should return [3].');", "assert.deepEqual(slasher([1, 2, 3], 0), [1, 2, 3], 'message: slasher([1, 2, 3], 0) should return [1, 2, 3].');", @@ -505,12 +501,16 @@ "assert.deepEqual(slasher([1, 2, 'chicken', 3, 'potatoes', 'cheese', 4], 5), ['cheese', 4], 'message: slasher([1, 2, \"chicken\", 3, \"potatoes\", \"cheese\", 4], 5) should return [\"cheese\", 4].');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function slasher(arr, howMany) {\n // it doesn't always pay to be first\n return arr.slice(howMany);\n}\n\nslasher([1, 2, 3], 2);\n" + ], "MDNlinks": [ "Array.slice()", "Array.splice()" ], "challengeType": 5, - "nameEs": "Vuélale la cabeza", + "titleEs": "Vuélale la cabeza", "descriptionEs": [ "Crea una función que devuelva los elementos restantes de un arreglo después de eliminar n elementos de la cabeza.", "Por cabeza nos referimos al inicio de un arreglo, comenzando por el índice 0.", @@ -534,10 +534,6 @@ "", "mutation([\"hello\", \"hey\"]);" ], - "isRequired": true, - "solutions": [ - "function mutation(arr) {\n var hash = Object.create(null);\n arr[0].toLowerCase().split('').forEach(function(c) {\n hash[c] = true;\n });\n return !arr[1].toLowerCase().split('').filter(function(c) {\n return !hash[c];\n }).length;\n}\n\nmutation(['hello', 'hey']);\n" - ], "tests": [ "assert(mutation([\"hello\", \"hey\"]) === false, 'message: mutation([\"hello\", \"hey\"]) should return false.');", "assert(mutation([\"hello\", \"Hello\"]) === true, 'message: mutation([\"hello\", \"Hello\"]) should return true.');", @@ -549,11 +545,15 @@ "assert(mutation([\"hello\", \"neo\"]) === false, 'message: mutation([\"hello\", \"neo\"]) should return false.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function mutation(arr) {\n var hash = Object.create(null);\n arr[0].toLowerCase().split('').forEach(function(c) {\n hash[c] = true;\n });\n return !arr[1].toLowerCase().split('').filter(function(c) {\n return !hash[c];\n }).length;\n}\n\nmutation(['hello', 'hey']);\n" + ], "MDNlinks": [ "String.indexOf()" ], "challengeType": 5, - "nameEs": "Mutaciones", + "titleEs": "Mutaciones", "descriptionEs": [ "Crea una función que devuelva true si la cadena de texto del primer elemento de un arreglo contiene todas las letras de la cadena de texto del segundo elemento del arreglo.", "Por ejemplo, [\"hello\", \"Hello\"], debe devolver true porque todas las letras en la segunda cadena de texto están presentes en la primera, sin distinguir entre mayúsculas y minúsculas.", @@ -578,10 +578,6 @@ "", "bouncer([7, \"ate\", \"\", false, 9]);" ], - "isRequired": true, - "solutions": [ - "function bouncer(arr) {\n // Don't show a false ID to this bouncer.\n return arr.filter(function(e) {return e;});\n}\n\nbouncer([7, 'ate', '', false, 9]);\n" - ], "tests": [ "assert.deepEqual(bouncer([7, \"ate\", \"\", false, 9]), [7, \"ate\", 9], 'message: bouncer([7, \"ate\", \"\", false, 9]) should return [7, \"ate\", 9].');", "assert.deepEqual(bouncer([\"a\", \"b\", \"c\"]), [\"a\", \"b\", \"c\"], 'message: bouncer([\"a\", \"b\", \"c\"]) should return [\"a\", \"b\", \"c\"].');", @@ -589,12 +585,16 @@ "assert.deepEqual(bouncer([1, null, NaN, 2, undefined]), [1, 2], 'message: bouncer([1, null, NaN, 2, undefined]) should return [1, 2].');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function bouncer(arr) {\n // Don't show a false ID to this bouncer.\n return arr.filter(function(e) {return e;});\n}\n\nbouncer([7, 'ate', '', false, 9]);\n" + ], "MDNlinks": [ "Boolean Objects", "Array.filter()" ], "challengeType": 5, - "nameEs": "Detector de mentiras", + "titleEs": "Detector de mentiras", "descriptionEs": [ "Remueve todos los valores falsy de un arreglo dado", "En javascript, los valores falsy son los siguientes: false, null, 0, \"\", undefined, y NaN.", @@ -616,10 +616,6 @@ "", "destroyer([1, 2, 3, 1, 2, 3], 2, 3);" ], - "isRequired": true, - "solutions": [ - "function destroyer(arr) {\n var hash = Object.create(null);\n [].slice.call(arguments, 1).forEach(function(e) {\n hash[e] = true;\n });\n // Remove all the values\n return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n" - ], "tests": [ "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'message: destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1].');", "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'message: destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) should return [1, 5, 1].');", @@ -628,12 +624,16 @@ "assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'message: destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53) should return [\"hamburger\"].');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function destroyer(arr) {\n var hash = Object.create(null);\n [].slice.call(arguments, 1).forEach(function(e) {\n hash[e] = true;\n });\n // Remove all the values\n return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n" + ], "MDNlinks": [ "Arguments object", "Array.filter()" ], "challengeType": 5, - "nameEs": "Buscar y destruir", + "titleEs": "Buscar y destruir", "descriptionEs": [ "Se te proveerá un arreglo inicial (el primer argumento en la función destroyer), seguido por uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que el resto de argumentos.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." @@ -656,10 +656,6 @@ "", "where([40, 60], 50);" ], - "isRequired": true, - "solutions": [ - "function where(arr, num) {\n arr = arr.sort(function(a, b){return a-b;});\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] >= num)\n {\n return i;\n }\n }\n return arr.length;\n}" - ], "tests": [ "assert(where([10, 20, 30, 40, 50], 35) === 3, 'message: where([10, 20, 30, 40, 50], 35) should return 3.');", "assert(where([10, 20, 30, 40, 50], 30) === 2, 'message: where([10, 20, 30, 40, 50], 30) should return 2.');", @@ -670,11 +666,15 @@ "assert(where([2, 5, 10], 15) === 3, 'message: where([2, 5, 10], 15) should return 3.');" ], "type": "bonfire", + "isRequired": true, + "solutions": [ + "function where(arr, num) {\n arr = arr.sort(function(a, b){return a-b;});\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] >= num)\n {\n return i;\n }\n }\n return arr.length;\n}" + ], "MDNlinks": [ "Array.sort()" ], "challengeType": 5, - "nameEs": "¿Cuál es mi asiento?", + "titleEs": "¿Cuál es mi asiento?", "descriptionEs": [ "Devuelve el menor índice en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez ha sido ordenado.", "Por ejemplo, where([1,2,3,4], 1.5) debe devolver 1 porque el segundo argumento de la función (1.5) es mayor que 1 (con índice 0 en el arreglo), pero menor que 2 (con índice 1).", @@ -692,8 +692,6 @@ "All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.", "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." ], - "isRequired": true, - "releasedOn": "January 1, 2016", "challengeSeed": [ "function rot13(str) { // LBH QVQ VG!", " ", @@ -721,14 +719,16 @@ "String.fromCharCode()" ], "challengeType": 5, - "nameEs": "Cifrado César", + "titleEs": "Cifrado César", "descriptionEs": [ "Uno de los cifrados más simples y ampliamente conocidos es el cifrado César, también llamado cifrado por desplazamiento. En un cifrado por desplazamiento los significados de las letras se desplazan por una cierta cantidad.", "Un uso moderno común es el cifrado ROT13 , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' ↔ 'N', 'B' ↔ 'O' y así.", "Crea una función que tome una cadena de texto cifrada en ROT13 como argumento y que devuelva la cadena de texto decodificada.", "Todas las letras que se te pasen van a estar en mayúsculas. No transformes ningún caracter no-alfabético (por ejemplo: espacios, puntuación). Simplemente pásalos intactos.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + ], + "isRequired": true, + "releasedOn": "January 1, 2016" } ] } diff --git a/challenges/01-front-end-development-certification/basic-javascript.json b/challenges/01-front-end-development-certification/basic-javascript.json index fac504ca85..30e3948fec 100644 --- a/challenges/01-front-end-development-certification/basic-javascript.json +++ b/challenges/01-front-end-development-certification/basic-javascript.json @@ -31,7 +31,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Agrega comentarios a tu código JavaScript", + "titleEs": "Agrega comentarios a tu código JavaScript", "descriptionEs": [ "Los comentarios son líneas de código que el computador ignorará intencionalmente. Los comentarios son una gran forma de dejarte notas a ti mismo y a otras personas que luego tendrán que averiguar lo que hace que el código. ", "Vamos a echar un vistazo a las dos maneras en las que puedes agregar tus comentarios en JavaScript.", @@ -76,7 +76,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Declara variables en JavaScript", + "titleEs": "Declara variables en JavaScript", "descriptionEs": [ "Cuando almacenamos datos en una estructura de datos, la llamamos una variable. Estas variables no son diferentes de las variables x e y que utilizas en matemáticas. ", "Vamos a crear nuestra primera variable y a llamarla \"myName\".", @@ -122,7 +122,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Almacenar valores con el operador igual", + "titleEs": "Almacenar valores con el operador igual", "descriptionEs": [ "En JavaScript, puedes almacenar un valor en una variable con la asignación o con el operador igual (=).", "miVariable = 5;", @@ -164,7 +164,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Inicializar variables con el operador igual", + "titleEs": "Inicializar variables con el operador igual", "descriptionEs": [ "Es común inicializar una variable a un valor inicial en la misma línea que es declarada.", "var miVar = 0;", @@ -209,7 +209,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Entendiendo variables sin inicializar", + "titleEs": "Entendiendo variables sin inicializar", "descriptionEs": [ "Cuando las variables de JavaScript son declaradas, ellas tienen un valor inicial de undefined. Si tu haces una operación matematica sobre una variable undefined tu resultado sera NaN el cual significa \"Not a Number\" es decir \"No es un número\". Si tu concatenas una cadena con una variable undefined, vas a obtener una cadena literal de \"undefined\".", "

Instrucciones

", @@ -254,7 +254,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Entendiendo la distinción en variables", + "titleEs": "Entendiendo la distinción en variables", "descriptionEs": [ "En JavaScript todas las variables y nombres de funciones distinguen entre mayúsculas y minúsculas. Esto significa que la capitalización importa.", "MIVAR no es lo mismo que MiVar o mivar. Esto hace posible tener múltiples variables distintas con el mismo nombre pero de diferente manera. Es fuertemente recomendado por el bien de la claridad, que tu no uses esta característica del lenguaje.", @@ -296,7 +296,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Suma dos números con JavaScript", + "titleEs": "Suma dos números con JavaScript", "descriptionEs": [ "Intentemos sumar dos números con JavaScript.", "JavaScript utiliza el símbolo + para la adición.", @@ -334,7 +334,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Resta un número de otro con JavaScript", + "titleEs": "Resta un número de otro con JavaScript", "descriptionEs": [ "También podemos restar un número de otro.", "JavaScript utiliza el símbolo - de sustracción", @@ -371,7 +371,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Multiplica dos números con JavaScript", + "titleEs": "Multiplica dos números con JavaScript", "descriptionEs": [ "También podemos multiplicar un número por otro.", "JavaScript utiliza el símbolo * de la multiplicación.", @@ -408,7 +408,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Divide un número por otro con JavaScript", + "titleEs": "Divide un número por otro con JavaScript", "descriptionEs": [ "También podemos dividir un número por otro.", "JavaScript utiliza el símbolo / para dividir.", @@ -448,7 +448,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Incrementa un número con JavaScript", + "titleEs": "Incrementa un número con JavaScript", "descriptionEs": [ "Tu puedes fácilmente incrementar o agregar uno a una variable con el operador ++.", "i++", @@ -492,7 +492,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Decrementar un número con JavaScript", + "titleEs": "Decrementar un número con JavaScript", "descriptionEs": [ "Fácilmente puedes decrementar o disminuir una variable por uno con el operador --.", "i--;", @@ -531,7 +531,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Crea números decimales con JavaScript", + "titleEs": "Crea números decimales con JavaScript", "descriptionEs": [ "Podemos almacenar números decimales en variables también. Los números decimales a veces son referidos como números de punto flotante o flotantes.", "Nota
No todos los números reales pueden ser exactamente representados en punto flotante. Esto puede conducir a errores de redondeo. Detalles aquí.", @@ -565,7 +565,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Multiplicar dos decimales con JavaScript", + "titleEs": "Multiplicar dos decimales con JavaScript", "descriptionEs": [ "En JavaScript, también puedes realizar cálculos con números decimales, al igual que con números enteros.", "Vamos a multiplicar dos números decimales para obtener su producto.", @@ -598,7 +598,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Divide un número decimal por otro con JavaScript", + "titleEs": "Divide un número decimal por otro con JavaScript", "descriptionEs": [ "Ahora vamos a dividir un decimal por otro.", "

Instrucciones

", @@ -637,7 +637,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Encontrar un cociente en JavaScript", + "titleEs": "Encontrar un cociente en JavaScript", "descriptionEs": [ "El operador residuo % da el residuo de la división de dos números.", "Ejemplo", @@ -689,7 +689,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Asignación con más", + "titleEs": "Asignación con más", "descriptionEs": [ "En programación, es común usar asignaciones para modificar el contenido de una variable. Recuerda que todo lo de la derecha del signo igual es evaluado primero, así podemos decir que:", "miVar = miVar + 5;", @@ -740,7 +740,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Asignación con menos", + "titleEs": "Asignación con menos", "descriptionEs": [ "Al igual que el operador +=, -= substrae un número de una variable.", "miVar = miVar - 5;", @@ -790,7 +790,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Asignación con veces igual", + "titleEs": "Asignación con veces igual", "descriptionEs": [ "El operador *= multiplica una variable por un número.", "miVar = miVar * 5;", @@ -839,7 +839,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Asignación con división", + "titleEs": "Asignación con división", "descriptionEs": [ "El operador /= divide una variable por otro número.", "miVar = miVar / 5;", @@ -887,7 +887,7 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Convierte celsius a fahrenheit", + "titleEs": "Convierte celsius a fahrenheit", "descriptionEs": [ "Para probar tu aprendizaje, crearás una solucion \"desde cero\". Coloca tu código entre las líneas indicadas y este será probado contra multiples casos de prueba.", "El algoritmo para convertir de Celsius a Fahrenheit consiste en multiplicar la temperatura en grados Celsius por 9/5 y al resultado agregarle 32.", @@ -926,7 +926,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Declara variables tipo cadena", + "titleEs": "Declara variables tipo cadena", "descriptionEs": [ "En el reto anterior, se utilizó el código myName var = \"su nombre\". Esto es lo que llamamos una variable tipo cadena. No es nada más que una \"cadena\" de caracteres. Las cadenas en JavaScript siempre se encierran entre comillas. ", "Ahora vamos a crear dos nuevas variables tipo cadena: myFirstName y myLastName y asignarles los valores de tu nombre y tu apellido, respectivamente." @@ -969,7 +969,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Escapar comillas en cadenas de texto", + "titleEs": "Escapar comillas en cadenas de texto", "descriptionEs": [ "Cuando estás definiendo una cadena debes iniciar y terminar con apóstrofes o comillas. ¿Qué pasa cuando necesitas una comilla: \" o ' dentro de tu cadena?", "En JavaScript, tu puedes escapar unas comillas para diferenciarlas de las comillas del final de la cadena colocando una barra invertida (\\) antes de la cita.", @@ -1011,7 +1011,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Citando cadenas con comillas simples", + "titleEs": "Citando cadenas con comillas simples", "descriptionEs": [ "Los valores de Cadenas en JavaScript pueden ser escritos con comillas o apóstrofes, siempre y cuando inicien y terminen con el mismo tipo de cita. A diferencia de algunos lenguajes, apóstrofes y comillas son funcionalmente identicas en JavaScript.", "\"Esta cadena tiene \\\"comillas\\\" en esta\"", @@ -1051,7 +1051,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Secuencias de escape en cadenas", + "titleEs": "Secuencias de escape en cadenas", "descriptionEs": [ "Las comillas no son el único caracter que puede ser escapado dentro de una cadena. Aquí ahí una tabla de secuencias de escape comunes:", "
CódigoSalida
\\'apostrofe
\\\"comilla
\\\\barra invertida
\\nnueva línea
\\rretorno de carro
\\ttabulación
\\bretroceso
\\fsalto de página
", @@ -1102,7 +1102,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Concatenar cadenas con el operador más", + "titleEs": "Concatenar cadenas con el operador más", "descriptionEs": [ "En JavaScript, cuando el operador + es usado con un valor de Cadena, este es llamado el operador concatenación. Tu puedes construir una nueva cadena de otras cadenas concatenandolas juntas.", "Ejemplo", @@ -1151,7 +1151,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Concatenar cadenas con el operador mas igual", + "titleEs": "Concatenar cadenas con el operador mas igual", "descriptionEs": [ "Nosotros también podemos usar el operador += para concatenar una cadena al final de una variable de cadena existente. Esto puede ser muy útil para romper una cadena larga sobre varias líneas.", "Nota
Cuidado con los espacios. La concatenación no agrega espacios entre cadenas concatenadas, así que necesitarás añadirlos tu mismo.", @@ -1204,7 +1204,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Construir cadenas con variables", + "titleEs": "Construir cadenas con variables", "descriptionEs": [ "A veces necesitarás construir una cadena, al estilo Mad Libs. Mediante el uso del operador concatenación (+), puedes insertar una o más variables dentro de una cadena que estés construyendo.", "

Instrucciones

", @@ -1257,7 +1257,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Anexando variables a cadenas", + "titleEs": "Anexando variables a cadenas", "descriptionEs": [ "Al igual que podemos construir una cadena en múltiples líneas a partir de cadenas literales, nosotros podemos ademas anexar variables a una cadena usando el operador más igual (+=).", "

Instructiones

", @@ -1303,7 +1303,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Comprueba la propiedad longitud (length) de una variable tipo cadena", + "titleEs": "Comprueba la propiedad longitud (length) de una variable tipo cadena", "descriptionEs": [ "Las estructuras de datos tienen propiedades. Por ejemplo, las cadenas tienen una propiedad llamada .length que te dirá cuántos caracteres hay en la cadena.", "Por ejemplo, si creamos una variable var firstName=\"Charles\", podemos averiguar la longitud de la cadena \"Charles\" usando la propiedad firstName.length. ", @@ -1348,7 +1348,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usa la notación de corchetes para encontrar el primer carácter de una cadena", + "titleEs": "Usa la notación de corchetes para encontrar el primer carácter de una cadena", "descriptionEs": [ "La notación de corchetes es una forma de obtener el caracter en un índice específico de una cadena.", "Los computadoras no empiezan a contar desde 1 como hacen los humanos. Comienzan en 0 ", @@ -1392,7 +1392,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Comprender la inmutabilidad de cadenas", + "titleEs": "Comprender la inmutabilidad de cadenas", "descriptionEs": [ "En JavaScript, los valores de las Cadenas son inmutables, lo cual significa que ellos no pueden ser alterados una vez creados.", "Por ejemplo, el siguiente código:", @@ -1438,7 +1438,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena", + "titleEs": "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena", "descriptionEs": [ "También puede usar notación de corchetes para obtener el caracter en otras posiciones dentro de una cadena.", "Recuerda que los computadores empiezan a contar a 0, por lo que el primer caracter es en realidad el caracter cero.", @@ -1482,7 +1482,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usa notación de corchetes para encontrar el último caracter de una cadena", + "titleEs": "Usa notación de corchetes para encontrar el último caracter de una cadena", "descriptionEs": [ "Con el fin de conseguir la última letra de una cadena, puedes restar uno a la longitud de la cadena.", "Por ejemplo, si var firstName = \"Charles\", se puede obtener la última letra usando firstName[firstName.length - 1]. ", @@ -1526,7 +1526,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena", + "titleEs": "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena", "descriptionEs": [ "Puede utilizar el mismo principio utilizamos para recuperar el último caracter de una cadena para recuperar el n-ésimo último caracter.", "Por ejemplo, se puede obtener el valor de la tercera última letra de la cadena var firstName = \"Charles\" utilizando firstName[firstName.length - 3] ", @@ -1572,7 +1572,7 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Espacios en blanco de palabras", + "titleEs": "Espacios en blanco de palabras", "descriptionEs": [ "Ahora usaremos nuestro conocimiento de cadenas para construir un juego de palabras estilo \"Mad Libs\" que llamaremos \"Espacios en Blanco de Palabras\". Vas a crear unas oraciones estilo (opcionalmente graciosa) \"Llena los espacios en blanco\".", "Necesitarás usar operadores de cadenas para construir una nueva cadena result, usando las variables previstas: myNoun, myAdjective, myVerb y myAdverb.", @@ -1611,7 +1611,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Almacena múltiples valores en una variable utilizando vectores en JavaScript", + "titleEs": "Almacena múltiples valores en una variable utilizando vectores en JavaScript", "descriptionEs": [ "Con las variables tipo vector (o en inglés array) podemos almacenar diversos datos en un solo lugar.", "Empiezas la declaración de un vector con un corchete de apertura, y terminas con un corchete de cierre, y pones una coma entre cada entrada, así: var sandwich = [\"mantequilla de maní\", \"jalea\" , \"pan\"]. ", @@ -1647,7 +1647,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Anida un vector dentro de otro vector", + "titleEs": "Anida un vector dentro de otro vector", "descriptionEs": [ "También puedes anidar vectores dentro de otros vectores, como este: [[\"Bulls\", 23], [\"White Sox\", 45]].", "

Instrucciones

", @@ -1687,7 +1687,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Accede a los datos de un vector mediante índices", + "titleEs": "Accede a los datos de un vector mediante índices", "descriptionEs": [ "Podemos acceder a los datos dentro de los vectores usando índices.", "Los índices del vector se escriben en la misma notación con corchetes usado con cadenas, excepto que en lugar de especificar un caracter, especifican un elemento del vector.", @@ -1733,7 +1733,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Modifica datos de un vector usando índices", + "titleEs": "Modifica datos de un vector usando índices", "descriptionEs": [ "También podemos modificar los datos almacenados en vectores usando índices.", "Por ejemplo:", @@ -1774,7 +1774,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a vectores multi-dimensionales con índices", + "titleEs": "Acceder a vectores multi-dimensionales con índices", "descriptionEs": [ "Una manera de pensar un vector multi-dimensional, es como un vector de vectores. Cuando usas corchetes para acceder a tu vector, el primer conjunto de brackets se refiere a las entradas en el vector más externo y cada nivel subsecuente de brackets se refiere al siguiente nivel de vectores internos.", "Ejemplo", @@ -1817,7 +1817,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Manipula vectores con push()", + "titleEs": "Manipula vectores con push()", "descriptionEs": [ "No sólo se pueden sacar datos del final de un vector con pop(), también puedes empujar (push()) datos al final del vector.", "

Instrucciones

", @@ -1861,7 +1861,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Manipula vectores con pop()", + "titleEs": "Manipula vectores con pop()", "descriptionEs": [ "Otra forma de cambiar los datos en un vector es con la función .pop().", ".pop() se utiliza para \"sacar\" el valor final de un vector. Podemos almacenar el valor \"sacado\" asignando pop a una variable por ejemplo durante su declaración.", @@ -1905,7 +1905,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Manipula vectores con shift()", + "titleEs": "Manipula vectores con shift()", "descriptionEs": [ "pop() siempre elimina el último elemento de un vector. ¿Qué pasa si quieres quitar el primero?", "Ahí es donde entra .shift(). Funciona igual que .pop (), excepto que elimina el primer elemento en lugar del pasado. ", @@ -1948,7 +1948,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Manipula vectores con unshift()", + "titleEs": "Manipula vectores con unshift()", "descriptionEs": [ "No sólo se puedes correr (shift) elementos del comienzo de un vector, también puedes descorrerlos (unshift) al comienzo.", "unshift() funciona exactamente igual que push(), pero en lugar de añadir el elemento al final del vector, unshift() añade el elemento al comienzo del vector. ", @@ -2010,7 +2010,7 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Lista de compras", + "titleEs": "Lista de compras", "descriptionEs": [ "Crea una lista de compras en la variable myList. La lista tiene que ser un vector multidimensional conteniendo varios sub-vectores.", "El primer elemento en cada sub-vector debe contener una cadena con el nombre del elemento. El segundo elemento debe ser un número representando la cantidad i. e.", @@ -2082,7 +2082,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Escribe código JavaScript reutilizable con funciones", + "titleEs": "Escribe código JavaScript reutilizable con funciones", "descriptionEs": [ "En JavaScript, podemos dividir nuestro código en partes reutilizables llamadas funciones.", "He aquí un ejemplo de una función:", @@ -2162,7 +2162,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Pasando valores a funciones con argumentos", + "titleEs": "Pasando valores a funciones con argumentos", "descriptionEs": [ "Los parámetros son variables que actúan como marcadores de lugar para los valores que han de ser entrada para una función cuando esta es llamada. Cuando una función es definida, es típicamente definida con uno o más parámetros. Los valores actuales que son entrada (or \"pasados\") dentro de una función cuando esta es llamada son concidos como argumentos.", "Aquí hay una función con dos parámetros, param1 y param2:", @@ -2246,7 +2246,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Alcance global y funciones", + "titleEs": "Alcance global y funciones", "descriptionEs": [ "En JavaScript, alcance se referiere a la visibilidad de variables. Las variables que definas fuera de un bloque de una función tienen alcance Global. Esto significa que ellas pueden ser vistas en todas partes en tu código JavaScript.", "Las variables que pueden ser usadas sin la palabra clave var son automáticamente creadas en el alcance global. Esto puede tener consecuencias no deseadas en otras partes de tu código o cuando se ejecuta una función de nuevo. Tu siempre deberías declarar tus variables con var.", @@ -2317,7 +2317,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Alcance local y funciones", + "titleEs": "Alcance local y funciones", "descriptionEs": [ "Las variables que son declaradas dentro de una función, así como los parámetros de la función tienen alcance local. Eso significa que solo son visibles dentro de esa función.", "Aquí está una función myTest con una variable local llamada loc.", @@ -2364,7 +2364,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Alcance global vs. local en funciones", + "titleEs": "Alcance global vs. local en funciones", "descriptionEs": [ "Es posible tener variables locales y globales con el mismo nombre. Cuando tu haces esto, la variable local toma precedencia sobre la variable global.", "En este ejemplo:", @@ -2410,7 +2410,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Retorna un valor desde una función con return", + "titleEs": "Retorna un valor desde una función con return", "descriptionEs": [ "Podemos pasar valores a una función mediante los argumentos. Puedes usar una sentencia return para enviar un valor de vuelta de una función.", "Ejemplo", @@ -2465,7 +2465,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Asignación con un valor retornado", + "titleEs": "Asignación con un valor retornado", "descriptionEs": [ "Si recuerdas de nuestra discusión de Almacenar Valores con el Operador Igual, todo a la derecha del signo igual es resuelto antes que el valor sea asignado. Esto significa que nosotros podemos tomar el valor de retorno de una función y asignarlo a una variable.", "Supongamos que tenemos una función pre-definida suma la cual suma dos números, entonces: ", @@ -2536,7 +2536,7 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Hacer cola", + "titleEs": "Hacer cola", "descriptionEs": [ "En Ciencias de la Computación una cola es una Estructura de Datos abstracta donde los elementos son mantenidos en orden. Nuevos elementos pueden ser agregados en la parte trasera de la cola y los elementos viejos son quitados desde el frente de la cola.", "Escribe una función queue la cual toma un vector (arr) y un número (item) como argumentos. Agrega el número al final del vector, entonces retira el primer elemento del vector. La función queue debe entonces devolver el elemento que se ha eliminado." @@ -2573,7 +2573,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Entiende los valores booleanos", + "titleEs": "Entiende los valores booleanos", "descriptionEs": [ "En informática las estructuras de datos son cosas que contienen datos. JavaScript tiene siete de estas. Por ejemplo, la estructura de datos Número contiene números. ", "Vamos a aprender acerca de la estructura de datos más básica de todas: el Boolean. Los booleanos sólo puede contener el valor verdadero o el valor falso. Son básicamente pequeños interruptores de encendido y apagado. ", @@ -2630,7 +2630,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usa lógica condicional con instrucciones if y else", + "titleEs": "Usa lógica condicional con instrucciones if y else", "descriptionEs": [ "Podemos usar instrucciones if (\"if\" es \"si\" en español) en JavaScript para ejecutar código sólo cuando cierta condición se cumpla.", "Las instrucciones if requieren evaluar algún tipo de condición booleana.", @@ -2682,7 +2682,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador de igualdad", + "titleEs": "La comparación con el operador de igualdad", "descriptionEs": [ "Hay muchos Operadores de Comparación en JavaScript. Todos estos operadores retornan un valor booleano true(verdadero) o false(falso).", "El operador más básico es el operador de igualdad ==. El operador de igualdad compara dos valores y retorna true si son equivalentes o false si no lo son. Nota que la igualdad es diferente de la asignación (=), la cual asigna el valor a la derecha del operador a la variable en la izquierda.", @@ -2729,7 +2729,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador de estricta igualdad", + "titleEs": "La comparación con el operador de estricta igualdad", "descriptionEs": [ "Igualdad estricta (===) es la contraparte del operador de igualdad (==). Diferente al operador de igualdad, igualdad estricta prueba los tipos de datos y el valor de los elementos comparados.", "Ejemplos", @@ -2775,7 +2775,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador de desigualdad", + "titleEs": "La comparación con el operador de desigualdad", "descriptionEs": [ "El operador de desigualdad (!=) es el opuesto al operador de igualdad. Esto significa \"No Igual a\" y retorna false cuando igualdad retornaría true y viceversa. Como el operador de igualdad, el operador de desigualdad convertirá tipos de datos mientras compara.", "Ejemplos", @@ -2824,9 +2824,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador de estricta desigualdad", + "titleEs": "La comparación con el operador de estricta desigualdad", "descriptionEs": [ - "El operador de estricta desigualdad (!==) es el opuesto al operador de estricta igualdad. Esto significa \"Estrictamente no Igual\" y retorna false(falso) donde igualdad estricta retornaría true(verdadero) y viceversa. Estricta desigualdad no convertirá tipos de datos.", + "El operador de estricta desigualdad (!==) es el opuesto al operador de estricta igualdad. Esto significa \"Estrictamente no Igual\" y retorna false(falso) donde igualdad estricta retornaría true(verdadero) y viceversa. Estricta desigualdad no convertirá tipos de datos.", "Ejemplos", "
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
", "

Instrucciones

", @@ -2876,9 +2876,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador mayor que", + "titleEs": "La comparación con el operador mayor que", "descriptionEs": [ - "El operador mayor que (>) compara los valores de dos números. Si el número a la izquierda es mayor que el número a la derecha, este returna true(verdadero). De otra manera, este retorna false(falso).", + "El operador mayor que (>) compara los valores de dos números. Si el número a la izquierda es mayor que el número a la derecha, este returna true(verdadero). De otra manera, este retorna false(falso).", "Al igual que el operador de igualdad, el operador mayor que convertirá tipos de datos de valores mientras los compara.", "Ejemplos", "
5 > 3 // true
7 > '3' // true
2 > 3 // false
'1' > 9 // false
", @@ -2929,9 +2929,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador mayor o ogual", + "titleEs": "La comparación con el operador mayor o ogual", "descriptionEs": [ - "El operador mayor o igual (>=) compara los valores de dos números. Si el número de la izquierda es mayor o igual a el número de la derecha, este retorna true(verdadero). De otra manera, este retorna false(falso).", + "El operador mayor o igual (>=) compara los valores de dos números. Si el número de la izquierda es mayor o igual a el número de la derecha, este retorna true(verdadero). De otra manera, este retorna false(falso).", "Como el operador de igualdad, el operador mayor o igual convertirá tipos de datos mientras está comparando.", "Ejemplos", "
6 >= 6 // true
7 >= '3' // true
2 >= 3 // false
'7' >= 9 // false
", @@ -2980,9 +2980,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador menor que", + "titleEs": "La comparación con el operador menor que", "descriptionEs": [ - "El operador menor que (<) compara los valores de dos números. Si el número a la izquierda es menor que el número de la derecha, este retorna true(verdadero). De otra manera, este retorna false(falso). Como el operador de igualdad, el operador menor que convierte tipos de datos mientra compara.", + "El operador menor que (<) compara los valores de dos números. Si el número a la izquierda es menor que el número de la derecha, este retorna true(verdadero). De otra manera, este retorna false(falso). Como el operador de igualdad, el operador menor que convierte tipos de datos mientra compara.", "Ejemplos", "
2 < 5 // true
'3' < 7 // true
5 < 5 // false
3 < 2 // false
'8' < 4 // false
", "

Instrucciones

", @@ -3032,9 +3032,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador menor o igual", + "titleEs": "La comparación con el operador menor o igual", "descriptionEs": [ - "El operador menor o igual (<=) compara los valores de dos números. Si el número a la izquierda es menor o igual que el número de la derecha, este retorna true(verdadero). Si el número a la izquierda es mayor que el número de la derecha, este retorna false(falso). Al igual que el operador de igualdad, menor o igual convierte tipos de datos.", + "El operador menor o igual (<=) compara los valores de dos números. Si el número a la izquierda es menor o igual que el número de la derecha, este retorna true(verdadero). Si el número a la izquierda es mayor que el número de la derecha, este retorna false(falso). Al igual que el operador de igualdad, menor o igual convierte tipos de datos.", "Ejemplos", "
4 <= 5 // true
'7' <= 7 // true
5 <= 5 // true
3 <= 2 // false
'8' <= 4 // false
", "

Instrucciones

", @@ -3088,9 +3088,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador lógico y", + "titleEs": "La comparación con el operador lógico y", "descriptionEs": [ - "A veces necesitarás probar más de una cosa a la vez. El operador lógico y (&&) retorna true(verdadero) si y solo si los operandos a la izquierda y derecha de este son verdaderos.", + "A veces necesitarás probar más de una cosa a la vez. El operador lógico y (&&) retorna true(verdadero) si y solo si los operandos a la izquierda y derecha de este son verdaderos.", "El mismo efecto podría lograrse anidando una sentencia if dentro de otro if:", "
if (num > 5) {
if (num < 10) {
return \"Yes\";
}
}
return \"No\";
", "solo retornará \"Yes\" si num está entre 6 y 9 (6 y 9 incluidos). La misma lógica puede ser escrita como:", @@ -3148,9 +3148,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "La comparación con el operador lógico o", + "titleEs": "La comparación con el operador lógico o", "descriptionEs": [ - "El operador lógico o (||) retorna true(verdadero) si cualquiera de los operandos es true(verdadero). De otra manera, este retorna false(falso).", + "El operador lógico o (||) retorna true(verdadero) si cualquiera de los operandos es true(verdadero). De otra manera, este retorna false(falso).", "El patrón de abajo debería ser familiar de los puntos de referencia anteriores:", "
if (num > 10) {
return \"No\";
}
if (num < 5) {
return \"No\";
}
return \"Yes\";
", "retornará \"Yes\" solo si num está entre 5 y 10 (5 y 10 incluidos). La misma lógica puede ser escrita como:", @@ -3204,9 +3204,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Introducción de las sentencias else", + "titleEs": "Introducción de las sentencias else", "descriptionEs": [ - "Cuando una condición de una sentencia if es verdadera, el siguiente bloque de código es ejecutado. ¿Y cuando esa condición es falsa? Normalmente nada pasaría. Con una sentencia else(además), un bloque alternativo de código puede ser ejecutado.", + "Cuando una condición de una sentencia if es verdadera, el siguiente bloque de código es ejecutado. ¿Y cuando esa condición es falsa? Normalmente nada pasaría. Con una sentencia else(además), un bloque alternativo de código puede ser ejecutado.", "
if (num > 10) {
return \"Más grande que 10\";
} else {
return \"10 o Menos\";
}
", "

Instrucciones

", "Combina las sentencias if dentro de una sola sentencia if/else." @@ -3253,9 +3253,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Introducción de las sentencias else if", + "titleEs": "Introducción de las sentencias else if", "descriptionEs": [ - "Si tienes múltiples condiciones que deben abordarse, puedes encadenar sentencias if juntas con sentencias else if.", + "Si tienes múltiples condiciones que deben abordarse, puedes encadenar sentencias if juntas con sentencias else if.", "
if (num > 15) {
return \"Más grande que 15\";
} else if (num < 5) {
return \"Más pequeño que 5\";
} else {
return \"Entre 5 y 15\";
}
", "

Instrucciones

", "Convierte la lógica para usar sentencias else if." @@ -3301,9 +3301,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Orden lógico en sentencias else if", + "titleEs": "Orden lógico en sentencias else if", "descriptionEs": [ - "El orden es importante en las sentencia if y else if.", + "El orden es importante en las sentencia if y else if.", "El ciclo es ejecutado de arriba hacia abajo por lo que tendrás que ser cuidadoso de cual sentencia va primero.", "Toma estas dos funciones como ejemplo.", "Aquí está la primera:", @@ -3359,9 +3359,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Encadenamiento de sentencias else if", + "titleEs": "Encadenamiento de sentencias else if", "descriptionEs": [ - "Las sentencias if/else(si/de lo contrario) pueden ser encadenadas juntas por una lógica compleja. Aquí está el pseudocódigo de múltiples sentencias if / else if encadenadas:", + "Las sentencias if/else(si/de lo contrario) pueden ser encadenadas juntas por una lógica compleja. Aquí está el pseudocódigo de múltiples sentencias if / else if encadenadas:", "
if (condicion1) {
sentencias1
} else if (condicion2) {
sentencias2
} else if (condicion3) {
sentencias3
. . .
} else {
sentenciasN
}
", "

Instrucciones

", "Escribe sentencias if/else if encadenadas para cumplir las siguientes condiciones:", @@ -3408,9 +3408,9 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Código de golf", + "titleEs": "Código de golf", "descriptionEs": [ - "En el juego de golf cada hoyo tiene un par promedio para el número de golpes necesarios para meter la pelota. Dependiendo de que tan lejos por encima o por debajo del par estén tus golpes, habrá un sobrenombre diferente.", + "En el juego de golf cada hoyo tiene un par promedio para el número de golpes necesarios para meter la pelota. Dependiendo de que tan lejos por encima o por debajo del par estén tus golpes, habrá un sobrenombre diferente.", "Tu función pasará un par y el número de golpes, y retornará una cadena de acuerdo a esta tabla (basada en el orden de prioridad - arriba (lo más alto) hacia abajo (lo más bajo)):", "
GolpesRetorna
1\"Hole-in-one!\"
<= par - 2\"Eagle\"
par - 1\"Birdie\"
par\"Par\"
par + 1\"Bogey\"
par + 2\"Double Bogey\"
>= par + 3\"Go Home!\"
", "Tanto par como golpes siempre serán numéricos y positivos." @@ -3456,9 +3456,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Seleccionar desde diferentes opciones con la sentencia switch", + "titleEs": "Seleccionar desde diferentes opciones con la sentencia switch", "descriptionEs": [ - "Si tienes varias opciones para elegir, usa una sentencia switch. Una sentencia switch prueba un valor y puede tener varias sentencias case las cuales definen varios posibles valores. Las sentencias son ejecutadas desde el primer valor case igualado hasta que se encuentr un break.", + "Si tienes varias opciones para elegir, usa una sentencia switch. Una sentencia switch prueba un valor y puede tener varias sentencias case las cuales definen varios posibles valores. Las sentencias son ejecutadas desde el primer valor case igualado hasta que se encuentr un break.", "Aquí hay un pseudocódigo de ejemplo:", "
switch (num) {
case valor1:
sentencia1;
break;
case valor2:
sentencia2;
break;
...
case valorN:
sentenciaN;
break;
}
", "Los valores case son probados con estricta igualdad (===). El break le dice a JavaScript que pare la ejecución del bloque de sentencias en el que está. Si se omite break, se ejecutará la siguiente sentencia.", @@ -3506,9 +3506,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Agregar una opción por omisión (default) en una sentencia switch", + "titleEs": "Agregar una opción por omisión (default) en una sentencia switch", "descriptionEs": [ - "En una sentencia switch puede que no seas capaz de especificar todos los posibles valores en las sentencias case. En su lugar, puedes agregar la sentencia default la cual será ejecutada si no es encontrada ninguna coincidencia con alguna sentencia case. Piensa en esto como la última sentencia else en una cadena if/else.", + "En una sentencia switch puede que no seas capaz de especificar todos los posibles valores en las sentencias case. En su lugar, puedes agregar la sentencia default la cual será ejecutada si no es encontrada ninguna coincidencia con alguna sentencia case. Piensa en esto como la última sentencia else en una cadena if/else.", "Una sentencia default debería ser el último caso.", "
switch (num) {
case valor1:
sentencia1;
break;
case valor2:
sentencia2;
break;
...
default:
sentenciaDefault;
}
", "

Instrucciones

", @@ -3560,9 +3560,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Múltiples opciones idénticas en una sentencias switch", + "titleEs": "Múltiples opciones idénticas en una sentencias switch", "descriptionEs": [ - "Si la sentencia break es omitida de una sentencia case de un switch, las siguientes sentencias case son ejecutadas hasta que sea encontrado un break. Si tienes multiples entradas con la misma salida, puede representarlas en una sentencia switch así:", + "Si la sentencia break es omitida de una sentencia case de un switch, las siguientes sentencias case son ejecutadas hasta que sea encontrado un break. Si tienes multiples entradas con la misma salida, puede representarlas en una sentencia switch así:", "
switch(val) {
case 1:
case 2:
case 3:
result = \"1, 2, or 3\";
break;
case 4:
result = \"4 alone\";
}
", "Los casos 1, 2, y 3 producirán el mismo resultado.", "

Instrucciones

", @@ -3624,9 +3624,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Reemplazar cadenas if else con switch", + "titleEs": "Reemplazar cadenas if else con switch", "descriptionEs": [ - "Si tienes varias opciones para elegir, una sentencia switch puede ser más fácil de escribir que varias sentencias if/if else anidadas. Lo siguiente:", + "Si tienes varias opciones para elegir, una sentencia switch puede ser más fácil de escribir que varias sentencias if/if else anidadas. Lo siguiente:", "
if (val === 1) {
respuesta = \"a\";
} else if (val === 2) {
respuesta = \"b\";
} else {
respuesta = \"c\";
}
", "puede ser reemplazado con:", "
switch (val) {
case 1:
respuesta = \"a\";
break;
case 2:
respuesta = \"b\";
break;
default:
respuesta = \"c\";
}
", @@ -3673,9 +3673,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Retornar valores booleanos desde funciones", + "titleEs": "Retornar valores booleanos desde funciones", "descriptionEs": [ - "Tal vez recuerdes de La comparación con el operador de igualdad que todos los operadores de comparación retornan un valor booleano true (verdadero) o false (falso).", + "Tal vez recuerdes de La comparación con el operador de igualdad que todos los operadores de comparación retornan un valor booleano true (verdadero) o false (falso).", "Un anti-patrón común es usar una sentencia if/else para hacer una comparación y entonces retornar true o false:", "
function sonIguales(a,b) {
if (a === b) {
return true;
} else {
return false;
}
}
", "Ya que === returna true (verdadero) o false (falso), podemos simplemente retornar el resultado de la comparación:", @@ -3728,9 +3728,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Retornar un patrón temprano para funciones", + "titleEs": "Retornar un patrón temprano para funciones", "descriptionEs": [ - "Cuando se alcanza una sentencia return, la ejecución de la presente función se detiene y el control la retorna a la ubicación de la llamada.", + "Cuando se alcanza una sentencia return, la ejecución de la presente función se detiene y el control la retorna a la ubicación de la llamada.", "Ejemplo", "
function miFuncion() {
console.log(\"Hola\");
return \"Mundo\";
console.log(\"chaochao\")
}
miFuncion();
", "Esta presenta en consola \"Hola\", retorna \"Mundo\", pero \"chaochao\" nunca se presenta, porque la función sale con la sentencia return.", @@ -3779,9 +3779,9 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Contar cartas", + "titleEs": "Contar cartas", "descriptionEs": [ - "En el juego de casino Blackjack, un jugador puede conseguir ventaja sobre la casa manteniendo un registro del número relativo de cartas altas y bajas restantes en la baraja. Esto es llamado Conteo de Cartas.", + "En el juego de casino Blackjack, un jugador puede conseguir ventaja sobre la casa manteniendo un registro del número relativo de cartas altas y bajas restantes en la baraja. Esto es llamado Conteo de Cartas.", "Tener más cartas altas restantes en la baraja favorece al jugador. A cada carta se le asigna un valor de acuerdo a la tabla de abajo. Cuando el conteo es positivo, el jugador debe apostar alto. Cuando el conteo es cero o negativo, el jugador debe apostar bajo.", "
ValorCartas
+12, 3, 4, 5, 6
07, 8, 9
-110, 'J', 'Q', 'K','A'
", "Vas a escribir una función de conteo de cartas. Esta recibirá un parametro card (carta) e incrementa o decrementa la variable count (conteo) global de acuerdo al valor de la carta (ver tabla). La función retornará entonces una cadena con el presente conteo y la cadena \"Bet\" si el conteo es positivo o \"Hold\" si el conteo es cero o negativo. El presente conteo y la desición del jugador (\"Bet\" o \"Hold\") deben quedar separada por un único espacio.", @@ -3834,7 +3834,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Construye objetos en JavaScript", + "titleEs": "Construye objetos en JavaScript", "descriptionEs": [ "Es posible que haya oído el término objeto antes.", "Los objetos son similares a los vectores, excepto que en lugar de utilizar los índices para acceder y modificar sus datos, pueden accederse mediante lo que se llama propiedades.", @@ -3890,9 +3890,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a propiedades de objetos con el operador punto", + "titleEs": "Acceder a propiedades de objetos con el operador punto", "descriptionEs": [ - "Hay dos maneras de acceder a las propiedades de un objeto: con el operador punto (.) y con la notación corchete ([]), similar al caso de un vector.", + "Hay dos maneras de acceder a las propiedades de un objeto: con el operador punto (.) y con la notación corchete ([]), similar al caso de un vector.", "El operador punto es el que usas cuando de antemano sabes el nombre de la propiedad que estás intentando acceder.", "Aquí está un ejemplo del uso del operador punto (.) para leer una propiedad de un objeto:", "
var miObj = {
prop1: \"val1\",
prop2: \"val2\"
};
var prop1val = miObj.prop1; // val1
var prop2val = miObj.prop2; // val2
", @@ -3940,9 +3940,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a las propiedades de objetos con la notación corchete", + "titleEs": "Acceder a las propiedades de objetos con la notación corchete", "descriptionEs": [ - "La segunda manera de acceder a las propiedades de un objeto es con la notación corchete ([]). Si el nombre de la propiedad del objeto que estás intentando acceder tiene un espacio, necesitarás usar la notación corchete.", + "La segunda manera de acceder a las propiedades de un objeto es con la notación corchete ([]). Si el nombre de la propiedad del objeto que estás intentando acceder tiene un espacio, necesitarás usar la notación corchete.", "Aquí está un ejemplo del uso de la notación corchete para leer una propiedad de un objeto:", "
var miObj = {
\"Nombre con espacio\": \"Kirk\",
\"Mas espacio\": \"Spock\"
};
miObj[\"Nombre con espacio\"]; // Kirk
miObj['Mas espacio']; // Spock
", "Nota que los nombres de propiedades con espacios tienen que estar entre comillas (apóstrofes o comillas).", @@ -3991,9 +3991,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a propiedades de objetos con variables", + "titleEs": "Acceder a propiedades de objetos con variables", "descriptionEs": [ - "Otro uso de la notación corchete sobre objetos es usar una variable para acceder a una propiedad. Esto puede ser muy útil en iteraciones sobre la lista de propiedades de un objetos o para hacer operaciones de búsqueda.", + "Otro uso de la notación corchete sobre objetos es usar una variable para acceder a una propiedad. Esto puede ser muy útil en iteraciones sobre la lista de propiedades de un objetos o para hacer operaciones de búsqueda.", "Aquí está un ejemplo del uso de una variable para acceder a una propiedad:", "
var algunaProp = \"propNombre\";
var miObj = {
propNombre: \"Algún valor\"
}
miObj[algunaProp]; // \"Algún valor\"
", "Aquí hay uno más:", @@ -4052,7 +4052,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Actualiza las propiedades de un objeto en JavaScript", + "titleEs": "Actualiza las propiedades de un objeto en JavaScript", "descriptionEs": [ "Después de que hayas creado un objeto de JavaScript, puedes actualizar sus propiedades en cualquier momento, tal y como harías con cualquier otra variable.", "Por ejemplo, echemos un vistazo a ourDog:", @@ -4116,7 +4116,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Añade nuevas propiedades a un objeto JavaScript", + "titleEs": "Añade nuevas propiedades a un objeto JavaScript", "descriptionEs": [ "Puedes añadir nuevas propiedades a objetos existente de la misma forma que usarías para modificarlos.", "Así es como añadimos una propiedad \"bark\" (ladra) a nuestro objeto ourDog:", @@ -4172,7 +4172,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Elimina propiedades de un objeto JavaScript", + "titleEs": "Elimina propiedades de un objeto JavaScript", "descriptionEs": [ "También podemos eliminar propiedades de los objetos de esta manera:", "delete ourDog.bark;", @@ -4239,9 +4239,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Usar objetos para búsquedas", + "titleEs": "Usar objetos para búsquedas", "descriptionEs": [ - "Los objetos pueden ser considerados como un almacenamiento llave/valor, como un diccionario. Si tienes datos tabulados, puedes almacenarlos en un objeto para después \"buscar\" valores, en lugar de emplear una sentencia switch o una secuencia de if/else. Esto es más útil cuando sabes que tus datos de entrada son limitados a un cierto rango.", + "Los objetos pueden ser considerados como un almacenamiento llave/valor, como un diccionario. Si tienes datos tabulados, puedes almacenarlos en un objeto para después \"buscar\" valores, en lugar de emplear una sentencia switch o una secuencia de if/else. Esto es más útil cuando sabes que tus datos de entrada son limitados a un cierto rango.", "Aquí está un ejemplo de una simple búsqueda inversa de alfabeto:", "
var alfa = {
1:\"Z\",
2:\"Y\",
3:\"X\",
4:\"W\",
...
24:\"C\",
25:\"B\",
26:\"A\"
};
alfa[2]; // \"Y\"
alfa[24]; // \"C\"

var valor = 2;
alfa[valor]; // \"Y\"
", "

Instrucciones

", @@ -4289,9 +4289,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Probar si un objeto tiene cierta propiedad", + "titleEs": "Probar si un objeto tiene cierta propiedad", "descriptionEs": [ - "A veces es útil revisar si cierta propiedad existe o no en un objeto dado. Podemos usar el método de objetos .hasOwnProperty(nomprop) para determinar si un objeto tiene la propiedad nomprop. .hasOwnProperty() retorna true o false si la propiedad es encontrada o no.", + "A veces es útil revisar si cierta propiedad existe o no en un objeto dado. Podemos usar el método de objetos .hasOwnProperty(nomprop) para determinar si un objeto tiene la propiedad nomprop. .hasOwnProperty() retorna true o false si la propiedad es encontrada o no.", "Ejemplo", "
var miObj = {
arriba: \"sombrero\",
abajo: \"pantalones\"
};
miObj.hasOwnProperty(\"arriba\"); // true
miObj.hasOwnProperty(\"medio\"); // false
", "

Instrucciones

", @@ -4346,9 +4346,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Introducción a la notación de objetos de JavaScript (JSON - JavaScript Object Notation)", + "titleEs": "Introducción a la notación de objetos de JavaScript (JSON - JavaScript Object Notation)", "descriptionEs": [ - "La notación de objetos de JavaScript o JSON usa el formato de objetos de JavaScript para almacenar datos. JSON es flexible porque permite Estructuras de Datos con combinaciones arbitrarias de cadenas, números, booleanos, vectores y objetos.", + "La notación de objetos de JavaScript o JSON usa el formato de objetos de JavaScript para almacenar datos. JSON es flexible porque permite Estructuras de Datos con combinaciones arbitrarias de cadenas, números, booleanos, vectores y objetos.", "Aquí está un ejemplo de un objeto JSON:", "
var nuestraMusica = [
{
\"artista\": \"Daft Punk\",
\"titulo\": \"Homework\",
\"año_publicacion\": 1997,
\"formatos\": [
\"CD\",
\"Cassette\",
\"LP\" ],
\"oro\": true
}
];
", "Este es un vector de objetos con diversos metadatos acerca de un álbum musical. Además tiene anidado un vector formatos. En el vector de nivel superior, pueden añadirse otros registros del álbum.", @@ -4404,9 +4404,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a objetos anidados en JSON", + "titleEs": "Acceder a objetos anidados en JSON", "descriptionEs": [ - "Las propiedades y sub-propiedades de los objetos JSON pueden ser accesadas mediante encadenamiento de la notación punto o corchete.", + "Las propiedades y sub-propiedades de los objetos JSON pueden ser accesadas mediante encadenamiento de la notación punto o corchete.", "Aquí está un objeto JSON anidado:", "
var nuestroAlmacen = {
\"escritorio\": {
\"cajon\": \"grapadora\"
},
\"armario\": {
\"cajón superior\": {
\"legajador1\": \"un archivo\",
\"legajador2\": \"secretos\"
},
\"cajón inferior\": \"gaseosa\"
}
}
nuestroAlmacen.armario[\"cajón superior\"].legajador2; // \"secretos\"
nuestroAlmacen.escritorio.cajon; // \"grapadora\"
", "

Instrucciones

", @@ -4467,9 +4467,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Acceder a vectores anidados en JSON", + "titleEs": "Acceder a vectores anidados en JSON", "descriptionEs": [ - "Como hemos visto en ejemplos anteriores, los objetos JSON pueden contener objetos anidados y vectores anidados. De forma similar a acceder a objetos anidados, la notación corchete en vectores puede ser encadenada para acceder a vectores anidados.", + "Como hemos visto en ejemplos anteriores, los objetos JSON pueden contener objetos anidados y vectores anidados. De forma similar a acceder a objetos anidados, la notación corchete en vectores puede ser encadenada para acceder a vectores anidados.", "Aquí está un ejemplo de como acceder a un vector anidado:", "
var nuestrasMascotas = {
\"gatos\": [
\"Maullador\",
\"Blandito\",
\"Kit-Cat\"
],
\"perros\": [
\"Mancha\",
\"Bowser\",
\"Frankie\"
]
};
nuestrasMascotas.cats[1]; // \"Blandito\"
nuestrasMascotas.dogs[0]; // \"Mancha\"
", "

Instrucciones

", @@ -4545,9 +4545,9 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Colección de registros", + "titleEs": "Colección de registros", "descriptionEs": [ - "Se te da un objeto JSON que representa (una pequeña parte de) tu colección de grabaciones. Cada álbum es identificado por un número id único y tiene varias propiedades. No todos los álbumes tienen la información completa.", + "Se te da un objeto JSON que representa (una pequeña parte de) tu colección de grabaciones. Cada álbum es identificado por un número id único y tiene varias propiedades. No todos los álbumes tienen la información completa.", "Escribe una función que reciba un id, una propiedad (prop) y un valor (value).", "Para el id dado, en la colección collection:", "Si el valor value no está en blanco (value !== \"\") y prop no es \"tracks\" entonces actualiza o establece el valor de la propiedad prop.", @@ -4601,7 +4601,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Iterar en JavaScript con ciclos for", + "titleEs": "Iterar en JavaScript con ciclos for", "descriptionEs": [ "Puede ejecutar el mismo código varias veces mediante el uso de un ciclo.", "El tipo más común de bucle de JavaScript se llama \"ciclo for\"porque se ejecuta \"por\" (for) un número específico de veces.", @@ -4659,7 +4659,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Itera por los números pares con un ciclo for", + "titleEs": "Itera por los números pares con un ciclo for", "descriptionEs": [ "Los ciclos for no siempre iteran incrementado de a uno. Cambiando nuestra expresión final, podemos contar los números pares.", "Vamos a empezar con i = 0 e iterar mientras i <10. Vamos a incrementar i de a 2 en cada iteración i + = 2. ", @@ -4712,7 +4712,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Cuenta hacia atrás con un ciclo for", + "titleEs": "Cuenta hacia atrás con un ciclo for", "descriptionEs": [ "Un ciclo también puede contar hacia atrás, siempre y cuando definamos las condiciones adecuadas.", "Para contar hacia atrás de dos en dos, tendremos que cambiar nuestra inicialización, la condición y la última-expresión.", @@ -4768,9 +4768,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Iterar a través de un vector con un ciclo for", + "titleEs": "Iterar a través de un vector con un ciclo for", "descriptionEs": [ - "Una tarea común en JavaScript es iterar a traves del contenido de un vector. Una manera de hacerlo es con un ciclo for. Este código imprimirá cada elemento del vector arr en la consola:", + "Una tarea común en JavaScript es iterar a traves del contenido de un vector. Una manera de hacerlo es con un ciclo for. Este código imprimirá cada elemento del vector arr en la consola:", "
var arr = [10,9,8,7,6];
for (var i=0; i < arr.length; i++) {
console.log(arr[i]);
}
", "Recuerda que los vectores tienen numeración que comienza en cero, la cual significa que el último índice del vector es su longitud - 1. Nuestra condición para este ciclo es i < arr.length, que lo detendrá cuando i sea la longitud - 1.", "

Instrucciones

", @@ -4814,9 +4814,9 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Anidar ciclos for", + "titleEs": "Anidar ciclos for", "descriptionEs": [ - "Si tienes una matriz multi-dimensional, puedes usar la misma lógica del punto anterior para iterar a través de un vector y cualquier sub-vector. Aquí está un ejemplo:", + "Si tienes una matriz multi-dimensional, puedes usar la misma lógica del punto anterior para iterar a través de un vector y cualquier sub-vector. Aquí está un ejemplo:", "
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
", "Esto imprime cada sub-elemento en arr uno a la vez. Nota que en el ciclo interior, estamos comprobando la longitud .length de arr[i], ya que arr[i] es por si mismo un vector.", "

Instrucciones

", @@ -4854,7 +4854,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Iterar con JavaScript con ciclos while", + "titleEs": "Iterar con JavaScript con ciclos while", "descriptionEs": [ "Puede ejecutar el mismo código varias veces mediante el uso de un ciclo.", "Otro tipo de ciclo de JavaScript se llama un ciclo \"while\", ya que se ejecuta, \"mientras que\" algo sea cierto y se detiene una vez que ya no sea así.", @@ -4933,9 +4933,9 @@ ], "type": "checkpoint", "challengeType": 1, - "nameEs": "Búsqueda de perfiles", + "titleEs": "Búsqueda de perfiles", "descriptionEs": [ - "Tenemos un vector de objetos que representan diferentes personas en nuestra lista de contactos.", + "Tenemos un vector de objetos que representan diferentes personas en nuestra lista de contactos.", "Una función lookUp que recibe el nombre (firstName) y una propiedad (prop) como argumentos ya ha sido escrita previamente para ti.", "La función debe comprobar si firstName es un nombre (firstName) de algún contacto y si la propiedad dada (prop) es una propiedad de ese contacto.", "Si ambos son verdaderos, entonces retorna el valor (value) de esa propiedad.", @@ -4977,7 +4977,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Generar fracciones al azar con JavaScript", + "titleEs": "Generar fracciones al azar con JavaScript", "descriptionEs": [ "Los números aleatorios son útiles para crear un comportamiento aleatorio.", "JavaScript tiene una función Math.random() que genera un número decimal aleatorio.", @@ -5023,7 +5023,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Genera números aleatorios enteros con JavaScript", + "titleEs": "Genera números aleatorios enteros con JavaScript", "descriptionEs": [ "Es muy bueno que podamos generar números decimales al azar, pero es aún más útil si lo utilizamos para generar números enteros aleatorios.", "En primer lugar, vamos a usar Math.random() para generar un decimal aleatorio.", @@ -5096,7 +5096,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Genera números aleatorios enteros dentro de un rango", + "titleEs": "Genera números aleatorios enteros dentro de un rango", "descriptionEs": [ "En lugar de generar un número aleatorio entre cero y un número dado como lo hicimos antes, podemos generar un número aleatorio que caiga dentro de un rango de dos números específicos.", "Para ello, vamos a definir un número mínimo min y un número máximo max.", @@ -5157,7 +5157,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Examina un texto con expresiones regulares", + "titleEs": "Examina un texto con expresiones regulares", "descriptionEs": [ "Las expresiones regulares se utilizan para encontrar ciertas palabras o patrones dentro de cadenas.", "Por ejemplo, si quisiéramos encontrar la palabra el en la cadena El perro persiguió al gato el lunes, podríamos utilizar la siguiente expresión regular: /el/gi ", @@ -5211,7 +5211,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Encuentra números con expresiones regulares", + "titleEs": "Encuentra números con expresiones regulares", "descriptionEs": [ "Podemos usar selectores especiales en las expresiones regulares para seleccionar un determinado tipo de valor.", "Uno de estos selectores es el de dígitos \\d que se utiliza para hacer coincidir números en una cadena.", @@ -5260,7 +5260,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Encuentra espacios en blanco con las expresiones regulares", + "titleEs": "Encuentra espacios en blanco con las expresiones regulares", "descriptionEs": [ "También podemos utilizar selectores de expresiones regulares como \\s para encontrar un espacio en blanco en una cadena.", "Los espacios en blanco son \" \" (espacio), \\r (el retorno de carro), \\n (nueva línea), \\t (tabulador), y \\f (el avance de página). ", @@ -5307,7 +5307,7 @@ ], "type": "waypoint", "challengeType": 1, - "nameEs": "Hacer coincidir con una expresión regular invertida", + "titleEs": "Hacer coincidir con una expresión regular invertida", "descriptionEs": [ "Puedes invertir las coincidencias de un selector usando su versión en mayúsculas.", "Por ejemplo, \\s coincidirá con cualquier espacio en blanco, mientras que \\S coincidirá con todo lo que no sea espacio en blanco.", @@ -5472,7 +5472,7 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "nameEs": "Crea una máquina tragamonedas en JavaScript", + "titleEs": "Crea una máquina tragamonedas en JavaScript", "descriptionEs": [ "Ahora vamos a tratar de combinar algunas de las cosas que hemos aprendido para crear la lógica de una máquina tragamonedas.", "Para esto tendremos que generar tres números aleatorios entre 1 y 3 que representen los valores posibles de cada casilla.", @@ -5643,7 +5643,7 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "nameEs": "Añade casillas a tu tragamonedas JavaScript", + "titleEs": "Añade casillas a tu tragamonedas JavaScript", "descriptionEs": [ "Ahora que cada una de nuestras casillas genera números aleatorios, tenemos que comprobar si todos quedan con el mismo número.", "Si es así, debemos notificar a nuestros usuarios que han ganado y debemos retornar null.", @@ -5824,7 +5824,7 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "nameEs": "Da vida a tu máquina tragamonedas en JavaScript", + "titleEs": "Da vida a tu máquina tragamonedas en JavaScript", "descriptionEs": [ "Ahora podemos detectar una victoria. Logremos que la máquina tragamonedas funcione. ", "Usemos un selector de jQuery $(\".slot\") para seleccionar todas las casillas.", @@ -6010,7 +6010,7 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "nameEs": "Dale a tu máquina tragamonedas JavaScript algunas imágenes con estilo", + "titleEs": "Dale a tu máquina tragamonedas JavaScript algunas imágenes con estilo", "descriptionEs": [ "Ahora añadamos algunas imágenes en nuestras casillas.", "Ya hemos creado las imágenes por ti en una matriz llamada images. Podemos utilizar diferentes índices para tomara cada una de estas. ", diff --git a/challenges/01-front-end-development-certification/basic-ziplines.json b/challenges/01-front-end-development-certification/basic-ziplines.json index e8504ed54c..ad28416427 100644 --- a/challenges/01-front-end-development-certification/basic-ziplines.json +++ b/challenges/01-front-end-development-certification/basic-ziplines.json @@ -48,47 +48,9 @@ "challengeSeed": [], "tests": [], "type": "Waypoint", + "isRequired": false, "challengeType": 7, - "nameEs": "Prepárate para los Proyectos de Desarrollo de Interfaces", - "descriptionEs": [ - [ - "http://i.imgur.com/OAD6SJz.png", - "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.", - "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.", - "" - ], - [ - "http://i.imgur.com/WBetuBa.jpg", - "Un programador frustado golpeando la pantalla de su computador.", - "Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.", - "" - ], - [ - "http://i.imgur.com/p2TpOQd.jpg", - "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", - "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - lo tienes resuelto.", - "" - ], - [ - "http://i.imgur.com/G1saeDt.gif", - "Un gif que muestra cómo crear una cuenta en Codepen.", - "Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\".
Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.
", - "http://codepen.io/signup/free" - ], - [ - "http://i.imgur.com/U4y9RJ1.gif", - "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.", - "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.", - "" - ], - [ - "http://i.imgur.com/G9KFQDL.gif", - "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.", - "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.", - "" - ] - ], - "nameRu": "Приготовьтесь к разработке фронтенд проектов", + "titleRu": "Приготовьтесь к разработке фронтенд проектов", "descriptionRu": [ [ "http://i.imgur.com/OAD6SJz.png", @@ -127,12 +89,49 @@ "" ] ], - "isRequired": false + "titleEs": "Prepárate para los Proyectos de Desarrollo de Interfaces", + "descriptionEs": [ + [ + "http://i.imgur.com/OAD6SJz.png", + "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.", + "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.", + "" + ], + [ + "http://i.imgur.com/WBetuBa.jpg", + "Un programador frustado golpeando la pantalla de su computador.", + "Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.", + "" + ], + [ + "http://i.imgur.com/p2TpOQd.jpg", + "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", + "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - lo tienes resuelto.", + "" + ], + [ + "http://i.imgur.com/G1saeDt.gif", + "Un gif que muestra cómo crear una cuenta en Codepen.", + "Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\".
Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.
", + "http://codepen.io/signup/free" + ], + [ + "http://i.imgur.com/U4y9RJ1.gif", + "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.", + "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.", + "" + ], + [ + "http://i.imgur.com/G9KFQDL.gif", + "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.", + "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.", + "" + ] + ] }, { "id": "bd7158d8c442eddfaeb5bd18", "title": "Build a Tribute Page", - "releasedOn": "January 1, 2016", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/wMQrXV.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", @@ -143,24 +142,15 @@ "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], + "releasedOn": "January 1, 2016", "challengeSeed": [ "154927651" ], "tests": [], "type": "zipline", + "isRequired": true, "challengeType": 3, - "nameEs": "Construye una página Tributo", - "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io que funcionalmente sea similar a esta: http://codepen.io/FreeCodeCamp/full/wMQrXV", - "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería que necesites. Dale tu estilo personal.", - "Historia de usuario: Puedo ver una página tributo con una imagen y texto.", - "Historia de usuario: Puedo pulsar en un enlace que me llevará a un sitio web externo con mayor información sobre el tema.", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", - "Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ", - "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." - ], - "nameRu": "Создайте страницу посвященную тому что вас вдохновляет", + "titleRu": "Создайте страницу посвященную тому что вас вдохновляет", "descriptionRu": [ "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: http://codepen.io/FreeCodeCamp/full/wMQrXV.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", @@ -171,7 +161,17 @@ "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ], - "isRequired": true + "titleEs": "Construye una página Tributo", + "descriptionEs": [ + "Objetivo: Crea una aplicación con CodePen.io que funcionalmente sea similar a esta: http://codepen.io/FreeCodeCamp/full/wMQrXV", + "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo ver una página tributo con una imagen y texto.", + "Historia de usuario: Puedo pulsar en un enlace que me llevará a un sitio web externo con mayor información sobre el tema.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", + "Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ", + "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." + ] }, { "id": "bd7158d8c242eddfaeb5bd13", @@ -196,7 +196,9 @@ ], "tests": [], "type": "zipline", - "nameRu": "Создайте сайт-портфолио", + "isRequired": true, + "challengeType": 3, + "titleRu": "Создайте сайт-портфолио", "descriptionRu": [ "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: http://codepen.io/FreeCodeCamp/full/VemmoX/.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", @@ -212,7 +214,7 @@ "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ], - "nameEs": "Construye una página web para tu portafolio", + "titleEs": "Construye una página web para tu portafolio", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/VemmoX/.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", @@ -227,9 +229,7 @@ "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." - ], - "isRequired": true, - "challengeType": 3 + ] } ] } diff --git a/challenges/01-front-end-development-certification/bootstrap.json b/challenges/01-front-end-development-certification/bootstrap.json index e5c56f5850..673fa6f2ce 100644 --- a/challenges/01-front-end-development-certification/bootstrap.json +++ b/challenges/01-front-end-development-certification/bootstrap.json @@ -79,7 +79,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap", + "titleEs": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap", "descriptionEs": [ "Ahora vamos de vuelta a nuestra aplicación de fotos de gatos. Esta vez, vamos a darle estilo utilizando la infraestructura CSS del popular Bootstrap.", "Bootstrap determina qué tan ancha es la pantalla y adapta correspondientemente el tamaño de tus elementos HTML - por eso es que se llama Diseño adaptativo (responsive design).", @@ -165,7 +165,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Haz que las imágenes sean adaptativas en dispositivos móviles", + "titleEs": "Haz que las imágenes sean adaptativas en dispositivos móviles", "descriptionEs": [ "Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo src sea http://bit.ly/fcc-running-cats.", "Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.", @@ -245,7 +245,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Centra el texto con Bootstrap", + "titleEs": "Centra el texto con Bootstrap", "descriptionEs": [ "Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase text-center a nuestro elemento h2.", "Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:", @@ -326,7 +326,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea un botón con Bootstrap", + "titleEs": "Crea un botón con Bootstrap", "descriptionEs": [ "Bootstrap tiene sus propios estilos para elementos button, los cuales se ven mejor que los estilos simples de HTML.", "Crea un nuevo elemento button debajo de tu foto grande del gatito. Dale la clase btn y el texto \"Like\"." @@ -409,7 +409,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea un elemento botón de bloque con Bootstrap", + "titleEs": "Crea un elemento botón de bloque con Bootstrap", "descriptionEs": [ "Normalmente, tus elementos button son sólo tan anchos como el texto que contienen. Al convertir un botón en elemento a nivel de bloque, este se estirará para llenar todo el espacio horizontal y cualquier elemento que lo siga se desplazará a una \"nueva línea\" debajo del bloque.", "Esta imagen es un ejemplo de la diferencia entre elementos en línea (inline) y elementos a nivel de bloque (block-level):", @@ -493,7 +493,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap", + "titleEs": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap", "descriptionEs": [ "La clase btn-primary es el color principal que utilizarás en tu aplicación. Es útil resaltar las acciones que quieres que tu usuario ejecute.", "Agrega la clase btn-primary de Bootstrap a tu botón.", @@ -576,7 +576,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Señala acciones opcionales con botones informativos", + "titleEs": "Señala acciones opcionales con botones informativos", "descriptionEs": [ "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-info se utiliza para llamar la atención a acciones opcionales que el usuario puede tomar.", "Crea un nuevo botón a nivel de bloque de Bootstrap debajo de tu botón de \"Like\" con el texto \"Info\", y agrégale las clases de Bootstrap btn-info y btn-block.", @@ -660,7 +660,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Advierte a tus usuarios sobre acciones peligrosas", + "titleEs": "Advierte a tus usuarios sobre acciones peligrosas", "descriptionEs": [ "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-danger es el color de botón que usarías para notificar a los usuarios que el botón ejecuta una acción destructiva, como por ejemplo eliminar la foto de un gato.", "Crea un botón con el texto \"Delete\" y dale la clase btn-danger.", @@ -749,7 +749,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado", + "titleEs": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado", "descriptionEs": [ "Bootstrap utiliza un sistema de cuadrícula adaptativa que facilita el poner elementos en fila y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento div.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", @@ -849,7 +849,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Reemplaza el CSS personalizado por Bootstrap", + "titleEs": "Reemplaza el CSS personalizado por Bootstrap", "descriptionEs": [ "Podemos limpiar nuestro código y hacer que nuestra aplicación de fotos de gatos se vea más convencional, usando los estilos pre-construidos de Bootstrap, en lugar de los estilos personalizados que creamos antes.", "No te preocupes, luego habrá más tiempo para personalizar nuestro CSS.", @@ -935,7 +935,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Usa span para elementos en línea", + "titleEs": "Usa span para elementos en línea", "descriptionEs": [ "Puedes utilizar span para crear elementos en línea. ¿Recuerdas cuando usamos la clase btn-block para hacer que el botón llenara toda la línea?", "Esta imagen ilustra la diferencia entre elementos en línea (inline) y elementos a nivel de bloque (block-level):", @@ -1023,7 +1023,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea un encabezado personalizado", + "titleEs": "Crea un encabezado personalizado", "descriptionEs": [ "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.", @@ -1114,7 +1114,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Agrega iconos de Font Awesome a los botones", + "titleEs": "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:", @@ -1198,7 +1198,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Agrega Font Awesome a todos los botones", + "titleEs": "Agrega Font Awesome a todos 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.", "Utiliza Font Awesome para agregar un icono info-circle a tu botón informativo y un icono trash a tu botón de eliminar." @@ -1277,7 +1277,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea botones de opción con estilo adaptativo", + "titleEs": "Crea botones de opción con estilo adaptativo", "descriptionEs": [ "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.", "Anida todos los botones de opción dentro de un elemento <div class=\"row\">. Luego, anida cada uno de ellos dentro de un elemento <div class=\"col-xs-6\">." @@ -1363,7 +1363,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea casillas de selección con estilo adaptativo", + "titleEs": "Crea casillas de selección con estilo adaptativo", "descriptionEs": [ "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.", "Anida todas las casillas de selección en un elemento <div class=\"row\">. Luego, anida cada una de ellas en un elemento <div class=\"col-xs-4\">." @@ -1458,7 +1458,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Estiliza cajas de texto como controles de formulario", + "titleEs": "Estiliza cajas de texto como controles de formulario", "descriptionEs": [ "Puedes agregar el icono fa-paper-plane de Font Awesome incluyendo <i class=\"fa fa-paper-plane\"></i> dentro de tu elemento button de envío.", "Dale a la entrada de texto de tu formulario la clase form-control. Dale al botón de envío de tu formulario las clases btn btn-primary. También, incluye en ese botón el icono fa-paper-plane de Font Awesome." @@ -1554,7 +1554,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap", + "titleEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap", "descriptionEs": [ "Ahora vamos a poner el elemento input y el elemento button que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento div con la clase row, y otros elementos div dentro de ese, usando la clase col-xs-*.", "Anida ambos, el elemento input y el elemento button que dice submit de tu formulario dentro de un div con la clase row. Anida el elemento input de tu formulario dentro de un div con cla clase col-xs-7. Anida el elemento button que dice submit de tu formulario en un elemento div con la clase col-xs-5.", @@ -1584,7 +1584,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea un encabezado con Bootstrap", + "titleEs": "Crea un encabezado con Bootstrap", "descriptionEs": [ "Ahora vamos a comenzar un proyecto desde cero para practicar nuestras habilidades con HTML, CSS y Bootstrap.", "Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.", @@ -1611,7 +1611,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap", + "titleEs": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap", "descriptionEs": [ "Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.", "Anida tu elemento h3 dentro de un elemento div con la clase container-fluid." @@ -1639,7 +1639,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea una fila en Bootstrap", + "titleEs": "Crea una fila en Bootstrap", "descriptionEs": [ "Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.", "Crea un elemento div debajo de la etiqueta h3, con la clase row." @@ -1667,7 +1667,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Parte tu fila en Bootstrap", + "titleEs": "Parte tu fila en Bootstrap", "descriptionEs": [ "Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.", "Crea dos elementos div dentro de tu fila, ambos con la clase col-xs-6." @@ -1700,7 +1700,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea pozos en Bootstrap", + "titleEs": "Crea pozos en Bootstrap", "descriptionEs": [ "Bootstrap tiene una clase llamada well que crea una sensación visual de profundidad para tus columnas.", "Anida un elemento div con la clase well dentro de cada uno de tus elementos div que tienen la clase col-xs-6." @@ -1741,7 +1741,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Agrega elementos dentro de los pozos de Bootstrap", + "titleEs": "Agrega elementos dentro de los pozos de Bootstrap", "descriptionEs": [ "Ahora estamos a una profundidad de varios elementos div dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos button.", "Anida tres elementos button dentro de cada uno de tus elementos div que tienen la clase well." @@ -1781,7 +1781,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Aplica el estilo de botón predeterminado de Bootstrap", + "titleEs": "Aplica el estilo de botón predeterminado de Bootstrap", "descriptionEs": [ "Bootstrap tiene otra clase de botón llamada btn-default.", "Aplica las clases btn y btn-default a cada uno de tus elementos button." @@ -1820,7 +1820,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Crea una clase para usar con selectores de jQuery", + "titleEs": "Crea una clase para usar con selectores de jQuery", "descriptionEs": [ "No todas las clases necesitan tener un código CSS correspondiente. A veces creamos clases sólo con el propósito de seleccionar esos elementos más fácilmente usando jQuery.", "Dale a cada uno de tus elementos button la clase target." @@ -1864,7 +1864,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap", + "titleEs": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap", "descriptionEs": [ "Recuerda que, además de los atributos de clase, también puedes darle a cada uno de tus elementos un atributo id.", "Cada id debe ser único para un elemento específico y ser usado solamente una vez por página.", @@ -1913,7 +1913,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Etiqueta tus pozos de Bootstrap", + "titleEs": "Etiqueta tus pozos de Bootstrap", "descriptionEs": [ "Para que todo esté más claro, vamos a ponerle a todos nuestros pozos una etiqueta que sea igual a su id.", "Sobre tu pozo de la izquierda, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #left-well.", @@ -1961,7 +1961,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Dale a cada elemento un ID único", + "titleEs": "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.", @@ -2008,7 +2008,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Etiqueta los botones con Bootstrap", + "titleEs": "Etiqueta los botones con Bootstrap", "descriptionEs": [ "De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.", "Dale a cada uno de tus elementos button un texto que corresponda con su id." @@ -2054,7 +2054,7 @@ ], "type": "waypoint", "challengeType": 0, - "nameEs": "Usa elementos para explicar tu código", + "titleEs": "Usa elementos para explicar tu código", "descriptionEs": [ "Cuando comencemos a usar jQuery, modificarmemos los elementos HTML sin necesidad de hacer cambios reales en el código HTML.", "Vamos a asegurar que cualquier persona sepa que no debe modificar nada en este código directamente.", diff --git a/challenges/01-front-end-development-certification/front-end-development-certificate.json b/challenges/01-front-end-development-certification/front-end-development-certificate.json index 6c116670a0..db4b8cd45a 100644 --- a/challenges/01-front-end-development-certification/front-end-development-certificate.json +++ b/challenges/01-front-end-development-certification/front-end-development-certificate.json @@ -240,7 +240,6 @@ ], "type": "Waypoint", "challengeType": 7, - "nameEs": "Reclama tu certificado de Desarrollo de interfaces", "descriptionEs": [ [ "http://i.imgur.com/k8btNUB.jpg", @@ -266,7 +265,8 @@ "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.", "" ] - ] + ], + "titleEs": "Reclama tu certificado de Desarrollo de interfaces" } ] } diff --git a/challenges/01-front-end-development-certification/gear-up-for-success.json b/challenges/01-front-end-development-certification/gear-up-for-success.json index cdf4b11f29..7b54b6fa2a 100644 --- a/challenges/01-front-end-development-certification/gear-up-for-success.json +++ b/challenges/01-front-end-development-certification/gear-up-for-success.json @@ -18,7 +18,7 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Únete a nuestra red de alumnos en LinkedIn", + "titleEs": "Únete a nuestra red de alumnos en LinkedIn", "descriptionEs": [ [ "http://i.imgur.com/vJyiXzU.gif", @@ -39,12 +39,12 @@ "https://reddit.com/r/freecodecamp" ] ], + "releasedOn": "February 10, 2016", "challengeSeed": [], "tests": [], - "releasedOn": "February 10, 2016", "type": "Waypoint", "challengeType": 7, - "nameEs": "Unete a nuestro Subreddit", + "titleEs": "Unete a nuestro Subreddit", "descriptionEs": [ [ "http://i.imgur.com/DYjJuCG.gif", @@ -71,12 +71,12 @@ "https://medium.freecodecamp.com" ] ], + "releasedOn": "February 10, 2016", "challengeSeed": [], "tests": [], "type": "Waypoint", "challengeType": 7, - "releasedOn": "February 10, 2016", - "nameEs": "Lee noticias de codificación en nuestros canal de publicaciones Medium", + "titleEs": "Lee noticias de codificación en nuestros canal de publicaciones Medium", "descriptionEs": [ [ "http://i.imgur.com/FxSOL4a.gif", @@ -103,12 +103,12 @@ "https://twitch.tv/freecodecamp" ] ], + "releasedOn": "February 10, 2016", "challengeSeed": [], "tests": [], "type": "Waypoint", "challengeType": 7, - "releasedOn": "February 10, 2016", - "nameEs": "Miranos programar en vivo por Twitch.tv", + "titleEs": "Miranos programar en vivo por Twitch.tv", "descriptionEs": [ [ "http://i.imgur.com/8rtyRY1.gif", @@ -133,7 +133,7 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "nameEs": "Comprométete con una meta y con una organización sin fines de lucro", + "titleEs": "Comprométete con una meta y con una organización sin fines de lucro", "descriptionEs": [ [ "http://i.imgur.com/Og1ifsn.gif", @@ -144,4 +144,4 @@ ] } ] -} \ No newline at end of file +} 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 2df303dd55..83152f14f7 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -6,6 +6,26 @@ "challenges": [ { "id": "bd7123c8c441eddfaeb5bdef", + "descriptionPtBR": [ + "Seja bem vindo ao primeiro desafio de programação do Free Code Camp!", + "Você pode editar o seu código em seu editor de texto, que embutimos aqui nesta página da web.", + "Consegue ver o código que diz <h1>Hello</h1> no seu editor de texto? Esse é um elemento HTML.", + "A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.", + "As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.", + "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", + "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", + "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." + ], + "namePtBR": "Diga Olá aos Elementos HTML", + "descriptionDe": [ + "Willkommen bei der ersten Programmier-Challenge von Free Code Camp! Klicke auf den folgenden Button für weitere Instruktionen.", + "Sehr gut. Jetzt kannst du den Rest der Instruktionen für diese Challenge lesen.", + "Mithilfe des eingebauten Text Editors kannst du den Code bearbeiten.", + "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML Element", + "Die meisten HTML Elemente haben eine öffnende Auszeichnung (Tag) und eine sich schließende. Öffnende Tags sehen so aus: <h1>. Schließende Tags so: </h1>. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.", + "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", + "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." + ], "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", @@ -26,8 +46,8 @@ "tests": [ "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'message: Your h1 element should have the text \"Hello World\".');" ], - "challengeType": 0, - "nameEs": "Saluda a los Elementos HTML", + "type": "waypoint", + "titleEs": "Saluda a los Elementos HTML", "descriptionEs": [ "¡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.", @@ -41,31 +61,26 @@ "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": [ - "Willkommen bei der ersten Programmier-Challenge von Free Code Camp! Klicke auf den folgenden Button für weitere Instruktionen.", - "Sehr gut. Jetzt kannst du den Rest der Instruktionen für diese Challenge lesen.", - "Mithilfe des eingebauten Text Editors kannst du den Code bearbeiten.", - "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML Element", - "Die meisten HTML Elemente haben eine öffnende Auszeichnung (Tag) und eine sich schließende. Öffnende Tags sehen so aus: <h1>. Schließende Tags so: </h1>. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.", - "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", - "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." - ], - "namePtBR": "Diga Olá aos Elementos HTML", - "descriptionPtBR": [ - "Seja bem vindo ao primeiro desafio de programação do Free Code Camp!", - "Você pode editar o seu código em seu editor de texto, que embutimos aqui nesta página da web.", - "Consegue ver o código que diz <h1>Hello</h1> no seu editor de texto? Esse é um elemento HTML.", - "A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.", - "As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.", - "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", - "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", - "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." - ], - "type": "waypoint" + "titleDe": "Waypoint: Begrüße die HTML Elemente", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf0887a", + "descriptionPtBR": [ + "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:", + "\"Imagem", + "O elemento h2 que você criar gerará um elemento h2 na página da web.", + "Este elemento indica ao navegador a forma de mostrar o texto que contém.", + "Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.", + "Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"." + ], + "namePtBR": "Cabeçalho com o Elemento h2", + "descriptionDe": [ + "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht.", + "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", + "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", + "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." + ], "title": "Headline with the h2 Element", "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", @@ -84,8 +99,8 @@ "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your h2 element should have the text \"CatPhotoApp\".');", "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 element should have the text \"Hello World\".');" ], - "challengeType": 0, - "nameEs": "Encabezado con el elemento h2", + "type": "waypoint", + "titleEs": "Encabezado con el elemento h2", "descriptionEs": [ "Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:", "\"Pantallazo", @@ -94,26 +109,23 @@ "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6", "Agrega una etiqueta h2 que diga \"CatPhotoApp\" para crear un segundo elemento HTML debajo de tu elemento h1 \"Hello World\"." ], - "nameDe": "Waypoint: Überschrift mit dem h2 Element", - "descriptionDe": [ - "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht.", - "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", - "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", - "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." - ], - "namePtBR": "Cabeçalho com o Elemento h2", - "descriptionPtBR": [ - "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:", - "\"Imagem", - "O elemento h2 que você criar gerará um elemento h2 na página da web.", - "Este elemento indica ao navegador a forma de mostrar o texto que contém.", - "Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.", - "Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"." - ], - "type": "waypoint" + "titleDe": "Waypoint: Überschrift mit dem h2 Element", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08801", + "descriptionPtBR": [ + "Os elementos p são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".", + "Você pode criar um elemento p assim:", + "<p>Sou uma tag p!</p>", + "Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." + ], + "namePtBR": "Informe com o Elemento Parágrafo", + "descriptionDe": [ + "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein.", + "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", + "Du kannst ein p Element so erzeugen: <p>Ich bin ein p Element!</p>" + ], "title": "Inform with the Paragraph Element", "description": [ "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", @@ -130,31 +142,32 @@ "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your p element should have the text \"Hello Paragraph\".');", "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" ], - "challengeType": 0, - "nameEs": "Informa con el Elemento Párrafo", + "type": "waypoint", + "titleEs": "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 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", - "descriptionDe": [ - "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein.", - "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", - "Du kannst ein p Element so erzeugen: <p>Ich bin ein p Element!</p>" - ], - "namePtBR": "Informe com o Elemento Parágrafo", - "descriptionPtBR": [ - "Os elementos p são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".", - "Você pode criar um elemento p assim:", - "<p>Sou uma tag p!</p>", - "Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." - ], - "type": "waypoint" + "titleDe": "Waypoint: Informiere mit dem Paragraph Element", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08802", + "descriptionPtBR": [ + "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.", + "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", + "Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.", + "Remova o comentário dos elementos h1, h2 e p." + ], + "namePtBR": "Descomente o HTML", + "descriptionDe": [ + "Entkommentiere deine h1, h2 und p Elemente.", + "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.", + "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", + "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." + ], "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -177,32 +190,30 @@ "assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');", "assert(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags, i.e. -->.');" ], - "challengeType": 0, - "nameEs": "Quita comentarios HTML", + "type": "waypoint", + "titleEs": "Quita comentarios HTML", "descriptionEs": [ "\"Comentar\" es una manera en la que puedes dejar anotaciones en tu código sin afectar el código mismo.", "Comentar también es una forma conveniente de desactivar código sin tener que borrarlo por completo.", "Puedes comenzar un comentario con <!-- y terminar de comentar con -->", "Quita el comentario a los elementos h1, h2 y p" ], - "nameDe": "Waypoint: HTML entkommentieren", - "descriptionDe": [ - "Entkommentiere deine h1, h2 und p Elemente.", - "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.", - "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", - "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." - ], - "namePtBR": "Descomente o HTML", - "descriptionPtBR": [ - "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.", - "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", - "Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.", - "Remova o comentário dos elementos h1, h2 e p." - ], - "type": "waypoint" + "titleDe": "Waypoint: HTML entkommentieren", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08804", + "descriptionPtBR": [ + "Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.", + "Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.", + "Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário." + ], + "namePtBR": "Comente o HTML", + "descriptionDe": [ + "Kommentiere die Elemente h1 und p aus, aber lasse dein h2 Element unkommentiert.", + "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", + "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." + ], "title": "Comment out HTML", "description": [ "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->", @@ -224,29 +235,32 @@ "assert(($(\"p\").length === 0), 'message: Comment out your p element so that it is not visible on your page.');", "assert(code.match(/-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');" ], - "challengeType": 0, - "nameEs": "Comenta en HTML", + "type": "waypoint", + "titleEs": "Comenta en HTML", "descriptionEs": [ "Recuerda que para comenzar un comentario, necesitas usar <!-- y para terminar un comentario, necesitas usar -->", "Aquí necesitarás terminar el comentario antes que comience el elemento h2.", "Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2" ], - "nameDe": "Waypoint: HTML auskommentieren", - "descriptionDe": [ - "Kommentiere die Elemente h1 und p aus, aber lasse dein h2 Element unkommentiert.", - "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", - "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." - ], - "namePtBR": "Comente o HTML", - "descriptionPtBR": [ - "Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.", - "Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.", - "Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário." - ], - "type": "waypoint" + "titleDe": "Waypoint: HTML auskommentieren", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08833", + "descriptionPtBR": [ + "Desenvolvedores web tradicionalmente usam Lorem Ipsum como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.", + "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", + "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.", + "Substitua o texto dentro do seu elemento p pelas primeiras palavras deste 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." + ], + "namePtBR": "Preencha Espaços com Texto de Espaço Reservado", + "descriptionDe": [ + "Ersetze den Text in deinem p Element mit den ersten Wörtern des zur Verfügung gestellten \"Kitty Ipsum\" Textes.", + "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum\" Text als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", + "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.", + "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", + "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ], "title": "Fill in the Blank with Placeholder Text", "description": [ "Web developers traditionally use lorem ipsum text as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.", @@ -264,33 +278,30 @@ "tests": [ "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');" ], - "challengeType": 0, - "nameEs": "Llena espacios con texto de relleno", + "type": "waypoint", + "titleEs": "Llena espacios con texto de relleno", "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 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": [ - "Ersetze den Text in deinem p Element mit den ersten Wörtern des zur Verfügung gestellten \"Kitty Ipsum\" Textes.", - "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum\" Text als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", - "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.", - "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", - "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." - ], - "namePtBR": "Preencha Espaços com Texto de Espaço Reservado", - "descriptionPtBR": [ - "Desenvolvedores web tradicionalmente usam Lorem Ipsum como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.", - "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", - "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.", - "Substitua o texto dentro do seu elemento p pelas primeiras palavras deste 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." - ], - "type": "waypoint" + "titleDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", + "challengeType": 0 }, { "id": "bad87fed1348bd9aedf08833", + "descriptionPtBR": [ + "Nosso celular não possui muito espaço vertical.", + "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", + "Apague o elemento h1 para simplificar o nosso espaço." + ], + "namePtBR": "Apague Elementos HTML", + "descriptionDe": [ + "Lösche die Elemente h1, damit wir etwas Ordnung schaffen.", + "Unser Smartphone hat nicht sehr viel vertikalen Raum.", + "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." + ], "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", @@ -309,29 +320,32 @@ "assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');", "assert(($(\"p\").length > 0), 'message: Leave your p element on the page.');" ], - "challengeType": 0, - "nameEs": "Borra elementos HTML", + "type": "waypoint", + "titleEs": "Borra elementos HTML", "descriptionEs": [ "Nuestro teléfono no tiene mucho espacio vertical.", "Eliminemos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp.", "Borra el elemento h1 para simplificar nuestra vista." ], - "nameDe": "Waypoint: Entferne HTML Elemente", - "descriptionDe": [ - "Lösche die Elemente h1, damit wir etwas Ordnung schaffen.", - "Unser Smartphone hat nicht sehr viel vertikalen Raum.", - "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." - ], - "namePtBR": "Apague Elementos HTML", - "descriptionPtBR": [ - "Nosso celular não possui muito espaço vertical.", - "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", - "Apague o elemento h1 para simplificar o nosso espaço." - ], - "type": "waypoint" + "titleDe": "Waypoint: Entferne HTML Elemente", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08803", + "descriptionPtBR": [ + "Agora vamos substituir a cor de parte do nosso texto.", + "Podemos fazer isso mudando o style do elemento h2.", + "A propriedade de estilo responsável pela cor do texto se chama \"color\".", + "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." + ], + "namePtBR": "Substitua a Cor do Texto", + "descriptionDe": [ + "Ändere den Style des h2 Elements, damit die Textfarbe Rot ist.", + "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", + "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" + ], "title": "Change the Color of Text", "description": [ "Now let's change the color of some of our text.", @@ -349,8 +363,8 @@ "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');" ], - "challengeType": 0, - "nameEs": "Cambia el color del texto", + "type": "waypoint", + "titleEs": "Cambia el color del texto", "descriptionEs": [ "Ahora cambiemos el color de parte de nuestro texto.", "Podemos hacer esto cambiando el style del elemento h2", @@ -359,25 +373,33 @@ "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo." ], - "nameDe": "Waypoint: Ändere die Farbe des Textes", - "descriptionDe": [ - "Ändere den Style des h2 Elements, damit die Textfarbe Rot ist.", - "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", - "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" - ], - "namePtBR": "Substitua a Cor do Texto", - "descriptionPtBR": [ - "Agora vamos substituir a cor de parte do nosso texto.", - "Podemos fazer isso mudando o style do elemento h2.", - "A propriedade de estilo responsável pela cor do texto se chama \"color\".", - "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", - "<h2 style=\"color: blue\">CatPhotoApp</h2>", - "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." - ], - "type": "waypoint" + "titleDe": "Waypoint: Ändere die Farbe des Textes", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08805", + "descriptionPtBR": [ + "Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.", + "Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.", + "Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).", + "Acima de seu código, crie um elemento style como esse: <style></style>", + "Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", + "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." + ], + "namePtBR": "Use Seletores CSS para Estilizar Elementos", + "descriptionDe": [ + "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben.", + "CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.", + "Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten \"inline style\" gegeben.", + "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser, Cascading Style Sheets (CSS) zu benutzen.", + "Erstelle über deinem Code ein style Element: <style></style>", + "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", + "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." + ], "title": "Use CSS Selectors to Style Elements", "description": [ "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", @@ -402,8 +424,8 @@ "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');", "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'message: Make sure all your style elements are valid and have a closing tag.');" ], - "challengeType": 0, - "nameEs": "Usa selectores CSS para dar estilo a los elementos", + "type": "waypoint", + "titleEs": "Usa selectores CSS para dar estilo a los elementos", "descriptionEs": [ "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", @@ -415,33 +437,37 @@ "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. Agrega el CSS necesario para hacer todos los elementos h2 de color azul." ], - "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", - "descriptionDe": [ - "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben.", - "CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.", - "Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten \"inline style\" gegeben.", - "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser, Cascading Style Sheets (CSS) zu benutzen.", - "Erstelle über deinem Code ein style Element: <style></style>", - "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", - "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." - ], - "namePtBR": "Use Seletores CSS para Estilizar Elementos", - "descriptionPtBR": [ - "Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.", - "Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.", - "Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).", - "Acima de seu código, crie um elemento style como esse: <style></style>", - "Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:", - "<style>", - "  h2 {color: red;}", - "</style>", - "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", - "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." - ], - "type": "waypoint" + "titleDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", + "challengeType": 0 }, { "id": "bad87fee1348bd9aecf08806", + "descriptionPtBR": [ + "As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.", + "Aqui está um exemplo de como declarar uma classe com CSS:", + "<style>", + "  .blue-text {", + "    color: blue;", + "  }", + "</style>", + "Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.", + "Você pode aplicar uma classe a um elemento HTML assim:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", + "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", + "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." + ], + "namePtBR": "Use Classes CSS para Estilizar Elementos", + "descriptionDe": [ + "Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem h2 Element hinzu.", + "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.", + "So sieht eine CSS Klasse aus:", + "\"Ein", + "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style> geschrieben haben.", + "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>", + "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", + "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." + ], "title": "Use a CSS Class to Style an Element", "description": [ "Classes are reusable styles that can be added to HTML elements.", @@ -471,8 +497,8 @@ "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a red-text class and have its color set to red.');", "assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like style=\"color: red\" in your h2 element.');" ], - "challengeType": 0, - "nameEs": "Utiliza una clase CSS para darle estilo a un elemento", + "type": "waypoint", + "titleEs": "Utiliza una clase CSS para darle estilo a un elemento", "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:", @@ -484,37 +510,27 @@ "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": [ - "Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem h2 Element hinzu.", - "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.", - "So sieht eine CSS Klasse aus:", - "\"Ein", - "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style> geschrieben haben.", - "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>", - "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", - "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." - ], - "namePtBR": "Use Classes CSS para Estilizar Elementos", - "descriptionPtBR": [ - "As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.", - "Aqui está um exemplo de como declarar uma classe com CSS:", - "<style>", - "  .blue-text {", - "    color: blue;", - "  }", - "</style>", - "Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.", - "Você pode aplicar uma classe a um elemento HTML assim:", - "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", - "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", - "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." - ], - "type": "waypoint" + "titleDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", + "challengeType": 0 }, { "id": "bad87fee1348bd9aefe08806", + "descriptionPtBR": [ + "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.", + "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:", + ".blue-text {", + "  color: blue;", + "}", + "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "Adicione a classe red-text aos seus elementos h2 e p." + ], + "namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS", + "descriptionDe": [ + "Füge den h2 und p Elementen die Klasse \"red-text\" hinzu.", + "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", + "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" + ], "title": "Style Multiple Elements with a CSS Class", "description": [ "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", @@ -541,8 +557,8 @@ "assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your p element should be red.');", "assert($(\"p\").hasClass(\"red-text\"), 'message: Your p element should have the class red-text.');" ], - "challengeType": 0, - "nameEs": "Da estilo a múltiples elementos con una clase CSS", + "type": "waypoint", + "titleEs": "Da estilo a múltiples elementos con una clase CSS", "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í:", @@ -551,27 +567,26 @@ "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Aplica la clase red-text a tus elementos h2 y p" ], - "nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", - "descriptionDe": [ - "Füge den h2 und p Elementen die Klasse \"red-text\" hinzu.", - "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", - "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" - ], - "namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS", - "descriptionPtBR": [ - "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.", - "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:", - ".blue-text {", - "  color: blue;", - "}", - "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", - "<h2 class=\"blue-text\">CatPhotoApp<h2>", - "Adicione a classe red-text aos seus elementos h2 e p." - ], - "type": "waypoint" + "titleDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08806", + "descriptionPtBR": [ + "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:", + "h1 {", + "  font-size: 30px;", + "}", + "Crie um segundo elemento p que tenha o seguinte 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 da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." + ], + "namePtBR": "Mude o Tamanho da Fonte de um Elemento", + "descriptionDe": [ + "Erstelle ein zweites p Element. Ändere dann innerhalb deines <style> Elements die Schriftgröße oder \"font-size\" von allen p Elementen auf 16 Pixel.", + "Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: h1 { font-size: 30px; }", + "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." + ], "title": "Change the Font Size of an Element", "description": [ "Font size is controlled by the font-size CSS property, like this:", @@ -599,8 +614,8 @@ "assert($(\"p:not([class])\").length === 1, 'message: Do not add a class attribute to the second p element, without removing it from the first one.');", "assert(parseInt($(\"p:not([class])\").css(\"font-size\"), 10) > 15, 'message: Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.');" ], - "challengeType": 0, - "nameEs": "Cambia el tamaño de fuente de un elemento.", + "type": "waypoint", + "titleEs": "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;
}
", @@ -609,26 +624,25 @@ "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": [ - "Erstelle ein zweites p Element. Ändere dann innerhalb deines <style> Elements die Schriftgröße oder \"font-size\" von allen p Elementen auf 16 Pixel.", - "Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: h1 { font-size: 30px; }", - "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." - ], - "namePtBR": "Mude o Tamanho da Fonte de um Elemento", - "descriptionPtBR": [ - "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:", - "h1 {", - "  font-size: 30px;", - "}", - "Crie um segundo elemento p que tenha o seguinte 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 da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." - ], - "type": "waypoint" + "titleDe": "Waypoint: Ändere die Schriftgröße eines Elements", + "challengeType": 0 }, { "id": "bad87fee1348bd9aede08807", + "descriptionPtBR": [ + "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", + "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:", + "h2 {", + "  font-family: Sans-serif;", + "}", + "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." + ], + "namePtBR": "Defina a Fonte para um Elemento", + "descriptionDe": [ + "Definiere für alle p Elemente die Schriftart \"Monospace\".", + "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", + "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" + ], "title": "Set the Font Family of an Element", "description": [ "You can set an element's font by using the font-family property.", @@ -655,33 +669,34 @@ "tests": [ "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Your p elements should use the font Monospace.');" ], - "challengeType": 0, - "nameEs": "Establecer la familia del tipo de letra de un elemento", + "type": "waypoint", + "titleEs": "Establecer la familia del tipo de letra de un elemento", "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;
}
", "Haz que todos tus elementos p utilicen el tipo de letra Monospace." ], - "nameDe": "Waypoint: Definiere die Schriftart eines Elements", - "descriptionDe": [ - "Definiere für alle p Elemente die Schriftart \"Monospace\".", - "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", - "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" - ], - "namePtBR": "Defina a Fonte para um Elemento", - "descriptionPtBR": [ - "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", - "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:", - "h2 {", - "  font-family: Sans-serif;", - "}", - "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." - ], - "type": "waypoint" + "titleDe": "Waypoint: Definiere die Schriftart eines Elements", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08807", + "descriptionPtBR": [ + "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.", + "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", + "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Agora, estableça Lobster como o valor para font-family em seu elemento h2." + ], + "namePtBR": "Importe uma Fonte a Partir do Google Fonts", + "descriptionDe": [ + "Füge dem h2 Element die Schriftart oder font-family \"Lobster\" hinzu.", + "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.", + "Kopiere den folgenden Code und füge diesen in deinen Editor über dem style Element ein:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." + ], "title": "Import a Google Font", "description": [ "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", @@ -713,8 +728,8 @@ "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your h2 element should use the font Lobster.');", "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your p element should still use the font Monospace.');" ], - "challengeType": 0, - "nameEs": "Importar un tipo de letra de Google", + "type": "waypoint", + "titleEs": "Importar un tipo de letra de Google", "descriptionEs": [ "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.", @@ -723,26 +738,28 @@ "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": [ - "Füge dem h2 Element die Schriftart oder font-family \"Lobster\" hinzu.", - "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.", - "Kopiere den folgenden Code und füge diesen in deinen Editor über dem style Element ein:", - "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." - ], - "namePtBR": "Importe uma Fonte a Partir do Google Fonts", - "descriptionPtBR": [ - "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.", - "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", - "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", - "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Agora, estableça Lobster como o valor para font-family em seu elemento h2." - ], - "type": "waypoint" + "titleDe": "Waypoint: Importiere eine Google Font", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08808", + "descriptionPtBR": [ + "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.", + "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.", + "Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:", + "p {", + "  font-family: Helvetica, Sans-Serif;", + "}", + "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." + ], + "namePtBR": "Especifique como as Fontes Devem se Degradar", + "descriptionDe": [ + "Füge allen h2 Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.", + "Du kannst \"Lobster\" als Schriftart deines h2 Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.", + "Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: p { font-family: Helvetica, Sans-Serif; }", + "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", + "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." + ], "title": "Specify How Fonts Should Degrade", "description": [ "There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif", @@ -779,8 +796,8 @@ "assert(new RegExp(\"\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" ], - "challengeType": 0, - "nameEs": "Especifica cómo deben degradarse los tipos de letra", + "type": "waypoint", + "titleEs": "Especifica cómo deben degradarse los tipos de letra", "descriptionEs": [ "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.", @@ -788,28 +805,26 @@ "
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": [ - "Füge allen h2 Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.", - "Du kannst \"Lobster\" als Schriftart deines h2 Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.", - "Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: p { font-family: Helvetica, Sans-Serif; }", - "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", - "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." - ], - "namePtBR": "Especifique como as Fontes Devem se Degradar", - "descriptionPtBR": [ - "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.", - "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.", - "Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:", - "p {", - "  font-family: Helvetica, Sans-Serif;", - "}", - "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." - ], - "type": "waypoint" + "titleDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08812", + "descriptionPtBR": [ + "Você pode adicionar imagens à sua página da internet com o uso do elemento img, e apontar para a URL específica de uma imagem utilizando o atributo src.", + "Um exemplo para isso seria:", + "<img src=\"http://www.your-image-source.com/your-image.jpg\">", + "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", + "Agora, tente fazer isso com essa imagem:", + "https://bit.ly/fcc-relaxing-cat" + ], + "namePtBR": "Adicione Imagens em sua Página Web", + "descriptionDe": [ + "Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat einzufügen.", + "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", + "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", + "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" + ], "title": "Add Images to your Website", "description": [ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", @@ -845,8 +860,8 @@ "assert($(\"img\").length > 0, 'message: Your page should have an image element.');", "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a src attribute that points to the kitten image.');" ], - "challengeType": 0, - "nameEs": "Añade imágenes a tu sitio web", + "type": "waypoint", + "titleEs": "Añade imágenes a tu sitio web", "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:", @@ -855,26 +870,27 @@ "Prueba con esta imagen:", "https://bit.ly/fcc-relaxing-cat" ], - "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", - "descriptionDe": [ - "Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat einzufügen.", - "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", - "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", - "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" - ], - "namePtBR": "Adicione Imagens em sua Página Web", - "descriptionPtBR": [ - "Você pode adicionar imagens à sua página da internet com o uso do elemento img, e apontar para a URL específica de uma imagem utilizando o atributo src.", - "Um exemplo para isso seria:", - "<img src=\"http://www.your-image-source.com/your-image.jpg\">", - "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", - "Agora, tente fazer isso com essa imagem:", - "https://bit.ly/fcc-relaxing-cat" - ], - "type": "waypoint" + "titleDe": "Waypoint: Füge Bilder zu deiner Website hinzu", + "challengeType": 0 }, { "id": "bad87fee1348bd9acdf08812", + "descriptionPtBR": [ + "O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.", + "Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:", + "<estilo>", + "  .larger-image{", + "    width: 500px;", + "  }", + "</style>", + "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." + ], + "namePtBR": "Dê um Tamanho para suas Imagens", + "descriptionDe": [ + "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", + "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", + "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" + ], "title": "Size your Images", "description": [ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", @@ -911,8 +927,8 @@ "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your img element should have the class smaller-image.');", "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');" ], - "challengeType": 0, - "nameEs": "Da tamaño a tus imágenes", + "type": "waypoint", + "titleEs": "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 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:", @@ -920,27 +936,31 @@ "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": [ - "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", - "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", - "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" - ], - "namePtBR": "Dê um Tamanho para suas Imagens", - "descriptionPtBR": [ - "O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.", - "Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:", - "<estilo>", - "  .larger-image{", - "    width: 500px;", - "  }", - "</style>", - "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." - ], - "type": "waypoint" + "titleDe": "Waypoint: Skaliere deine Bilder", + "challengeType": 0 }, { "id": "bad87fee1348bd9bedf08813", + "descriptionPtBR": [ + "As bordas em CSS possuem propriedades como style, color e width", + "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", + "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", + "<img class=\"clase1 clase2\">" + ], + "namePtBR": "Adicione Bordas ao Redor de seus Elementos", + "descriptionDe": [ + "Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.", + "CSS Rahmen haben Attribute wie Style, Color und Width.", + "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" + ], "title": "Add Borders Around your Elements", "description": [ "CSS borders have properties like style, color and width", @@ -985,8 +1005,8 @@ "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of solid.');", "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your img element should be green.');" ], - "challengeType": 0, - "nameEs": "Añade bordes alrededor de tus elementos", + "type": "waypoint", + "titleEs": "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 rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:", @@ -995,31 +1015,22 @@ "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", - "descriptionDe": [ - "Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.", - "CSS Rahmen haben Attribute wie Style, Color und Width.", - "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" - ], - "namePtBR": "Adicione Bordas ao Redor de seus Elementos", - "descriptionPtBR": [ - "As bordas em CSS possuem propriedades como style, color e width", - "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", - "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", - "<img class=\"clase1 clase2\">" - ], - "type": "waypoint" + "titleDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08814", + "descriptionPtBR": [ + "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", + "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", + "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." + ], + "namePtBR": "Insira Bordas Arredondadas com o Border Radius", + "descriptionDe": [ + "Gib deinem Katzenbild einen border-radius von 10 Pixeln.", + "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." + ], "title": "Add Rounded Corners with a Border Radius", "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", @@ -1064,29 +1075,27 @@ "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');", "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" ], - "challengeType": 0, - "nameEs": "Agrega esquinas redondeadas usando Border Radius", + "type": "waypoint", + "titleEs": "Agrega esquinas redondeadas usando Border Radius", "descriptionEs": [ "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": [ - "Gib deinem Katzenbild einen border-radius von 10 Pixeln.", - "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", - "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." - ], - "namePtBR": "Insira Bordas Arredondadas com o Border Radius", - "descriptionPtBR": [ - "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", - "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", - "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." - ], - "type": "waypoint" + "titleDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08815", + "descriptionPtBR": [ + "Assim como pixels, você também pode usar o border-radius com porcentagens.", + "Dê para a sua foto de gato um border-radius de 50%." + ], + "namePtBR": "Deixe as Imagens Circulares com o Border Radius", + "descriptionDe": [ + "Gib deinem Katzenfoto einen border-radius von 50 %.", + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." + ], "title": "Make Circular Images with a Border Radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", @@ -1131,26 +1140,32 @@ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of 50%, making it perfectly circular.');", "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');" ], - "challengeType": 0, - "nameEs": "Crea imágenes circulares usando Border Radius", + "type": "waypoint", + "titleEs": "Crea imágenes circulares usando Border Radius", "descriptionEs": [ "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": [ - "Gib deinem Katzenfoto einen border-radius von 50 %.", - "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." - ], - "namePtBR": "Deixe as Imagens Circulares com o Border Radius", - "descriptionPtBR": [ - "Assim como pixels, você também pode usar o border-radius com porcentagens.", - "Dê para a sua foto de gato um border-radius de 50%." - ], - "type": "waypoint" + "titleDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08816", + "descriptionPtBR": [ + "Os elementos a, também conhecidos como elementos âncora, são utilizados para ligar conteúdo fora da página atual.", + "Aqui está um diagrama de um elemento a. Neste caso, o elemento a é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.", + " \"diagrama", + "Veja um exemplo:", + "<p>Aqui está um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", + "Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"." + ], + "namePtBR": "Ligue Páginas Externas com o Elemento Âncora", + "descriptionDe": [ + "Erstelle ein a Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", + "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", + "\"Ein", + "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + ], "title": "Link to External Pages with Anchor Elements", "description": [ "a elements, also known as anchor elements, are used to link to content outside of the current page.", @@ -1200,8 +1215,8 @@ "assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an a element that links to http://freecatphotoapp.com');", "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');" ], - "challengeType": 0, - "nameEs": "Enlaza páginas externas con elementos ancla", + "type": "waypoint", + "titleEs": "Enlaza páginas externas con elementos ancla", "descriptionEs": [ "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. ", @@ -1210,26 +1225,25 @@ "<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": [ - "Erstelle ein a Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", - "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", - "\"Ein", - "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" - ], - "namePtBR": "Ligue Páginas Externas com o Elemento Âncora", - "descriptionPtBR": [ - "Os elementos a, também conhecidos como elementos âncora, são utilizados para ligar conteúdo fora da página atual.", - "Aqui está um diagrama de um elemento a. Neste caso, o elemento a é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.", - " \"diagrama", - "Veja um exemplo:", - "<p>Aqui está um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", - "Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"." - ], - "type": "waypoint" + "titleDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", + "challengeType": 0 }, { "id": "bad87fee1348bd9aede08817", + "descriptionPtBR": [ + "Outra vez, aqui está um diagrama de um elemento a para você usar como referência.", + "\"diagrama", + "Veja um exemplo:", + "<p>Este é um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", + "Aninhamento significa ter um elemento no interior de outro elemento.", + "Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." + ], + "namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo", + "descriptionDe": [ + "Jetzt umschließe dein a Element mit einem p Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.", + "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", + "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + ], "title": "Nest an Anchor Element within a Paragraph", "description": [ "Again, here's a diagram of an a element for your reference:", @@ -1286,8 +1300,8 @@ "assert(code.match(/<\\/p>/g) && code.match(/

/g).length === code.match(/

p elements has a closing tag.');", "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], - "challengeType": 0, - "nameEs": "Anida un elemento de ancla dentro de un párrafo", + "type": "waypoint", + "titleEs": "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", @@ -1296,25 +1310,23 @@ "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": [ - "Jetzt umschließe dein a Element mit einem p Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.", - "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", - "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" - ], - "namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo", - "descriptionPtBR": [ - "Outra vez, aqui está um diagrama de um elemento a para você usar como referência.", - "\"diagrama", - "Veja um exemplo:", - "<p>Este é um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", - "Aninhamento significa ter um elemento no interior de outro elemento.", - "Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." - ], - "type": "waypoint" + "titleDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08817", + "descriptionPtBR": [ + "As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.", + "Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.", + "Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo." + ], + "namePtBR": "Crie Links Inativos com o Símbolo Cerquilha", + "descriptionDe": [ + "Nutze das Hash Symbol (#) um deine a Elemente zu toten Links zu machen.", + "Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.", + "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", + "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." + ], "title": "Make Dead Links using the Hash Symbol", "description": [ "Sometimes you want to add a elements to your website before you know where they will link.", @@ -1361,30 +1373,32 @@ "tests": [ "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your a element should be a dead link with a href attribute set to \"#\".');" ], - "challengeType": 0, - "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", + "type": "waypoint", + "titleEs": "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, 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", - "descriptionDe": [ - "Nutze das Hash Symbol (#) um deine a Elemente zu toten Links zu machen.", - "Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.", - "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", - "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." - ], - "namePtBR": "Crie Links Inativos com o Símbolo Cerquilha", - "descriptionPtBR": [ - "As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.", - "Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.", - "Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo." - ], - "type": "waypoint" + "titleDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08820", + "descriptionPtBR": [ + "Você pode transformar elementos em links ao aninhá-los com um elemento a.", + "Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.", + "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", + "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." + ], + "namePtBR": "Transforme uma Imagem em um Link", + "descriptionDe": [ + "Umschließe dein img Element mit einem a Element als toten Link.", + "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", + "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", + "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", + "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." + ], "title": "Turn an Image into a Link", "description": [ "You can make elements into links by nesting them within an a element.", @@ -1435,8 +1449,8 @@ "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your a element should be a dead link with a href attribute set to #.');", "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], - "challengeType": 0, - "nameEs": "Convierte una imagen en un vínculo", + "type": "waypoint", + "titleEs": "Convierte una imagen en un vínculo", "descriptionEs": [ "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", @@ -1444,25 +1458,26 @@ "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ." ], - "nameDe": "Waypoint: Verlinke ein Bild", - "descriptionDe": [ - "Umschließe dein img Element mit einem a Element als toten Link.", - "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", - "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", - "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", - "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." - ], - "namePtBR": "Transforme uma Imagem em um Link", - "descriptionPtBR": [ - "Você pode transformar elementos em links ao aninhá-los com um elemento a.", - "Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.", - "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", - "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." - ], - "type": "waypoint" + "titleDe": "Waypoint: Verlinke ein Bild", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08818", + "descriptionPtBR": [ + "Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.", + "Em resumo: Todas as imagem devem ter um atributo alt!", + "Você pode adicionar um atributo alt já no elemento img assim:", + "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", + "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." + ], + "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", + "descriptionDe": [ + "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.", + "alt Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", + "Kurz gesagt: Jedes Bild sollte ein alt Attribut beinhalten!", + "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", + "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" + ], "title": "Add Alt Text to an Image for Accessibility", "description": [ "alt attributes, also known as alt text, are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at alt attributes.", @@ -1511,8 +1526,8 @@ "tests": [ "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an alt attribute set to A cute orange cat lying on its back');" ], - "challengeType": 0, - "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", + "type": "waypoint", + "titleEs": "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 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!", @@ -1520,26 +1535,29 @@ "<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", - "descriptionDe": [ - "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.", - "alt Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", - "Kurz gesagt: Jedes Bild sollte ein alt Attribut beinhalten!", - "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", - "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" - ], - "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", - "descriptionPtBR": [ - "Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.", - "Em resumo: Todas as imagem devem ter um atributo alt!", - "Você pode adicionar um atributo alt já no elemento img assim:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", - "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." - ], - "type": "waypoint" + "titleDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", + "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08827", + "descriptionPtBR": [ + "O HTML possui um elemento especial para a criação de listas não ordenadas, ou listas com marcadores.", + "As listas não ordenadas iniciam com um elemento <ul>. Logo após, possuem uma série de elementos <li>.", + "Por exemplo:", + "<ul>", + "  <li>leite</li>", + "  <li>queijo</li>", + "</ul>", + "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".", + "Apague os dois últimos elementos p e no final da página crie uma lista não ordenada com três coisas que os gatos adoram." + ], + "namePtBR": "Crie uma Lista Não Ordenada com Marcadores", + "descriptionDe": [ + "Ersetze deine p Elemente mit drei Dingen, die Katzen lieben – in einer ungeordneten Liste.", + "HTML hat ein spezielles Element zum Erstellen von ungeordneten Listen.", + "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", + "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." + ], "title": "Create a Bulleted Unordered List", "description": [ "HTML has a special element for creating unordered lists, or bullet point-style lists.", @@ -1592,8 +1610,8 @@ "assert(code.match(/<\\/ul>/gi) && code.match(/