diff --git a/common/models/challenge.json b/common/models/challenge.json index 78fa8a8364..9243713cee 100644 --- a/common/models/challenge.json +++ b/common/models/challenge.json @@ -53,8 +53,8 @@ }, "hint": { "type": "array", - "default": [], - "description": "hints must be a single line of plain text" + "description": "hints must be a single line of plain text", + "default": [] }, "block": { "type": "string" @@ -96,42 +96,16 @@ "MDNlinks": { "type": "array" }, - "nameCn": { - "type": "string" - }, - "descriptionCn": { - "type": "array" - }, - "nameFr": { - "type": "string" - }, - "descriptionFr": { - "type": "array" - }, - "nameRu": { - "type": "string" - }, - "descriptionRu": { - "type": "array" - }, - "nameEs": { - "type": "string" - }, - "descriptionEs": { - "type": "array" - }, - "namePt": { - "type": "string" - }, - "descriptionPt": { - "type": "array" - }, "solutions": { "type": "array", "default": [] }, "releasedOn": { "type": "string" + }, + "translations": { + "type": "object", + "default": "{}" } }, "validations": [], diff --git a/seed/challenges/00-getting-started/getting-started.json b/seed/challenges/00-getting-started/getting-started.json index 7a683c6d61..0a1fb61a52 100644 --- a/seed/challenges/00-getting-started/getting-started.json +++ b/seed/challenges/00-getting-started/getting-started.json @@ -85,365 +85,319 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleFr": "Apprenez comment FreeCodeCamp fonctionne", - "descriptionFr": [ - [ - "//i.imgur.com/6ibIavQ.jpg", - "Une idée des avantages de Free Code Camp: restez connecté , apprenez le JavaScript , construisez votre portfolio , Aidez les organismes sans but lucratif", - "Bienvenue sur Free Code Camp . Nous sommes une communauté opensource de gens passionnés qui apprend à coder et aide les organisations à but non lucratif.", - "" - ], - [ - "//i.imgur.com/Elb3dfj.jpg", - "Une capture d'écran de certains de nos développeurs réunis à Toronto.", - "Apprendre à code est dur. Pour réussir, vous aurez besoin de beaucoup de pratique et de soutien. Voilà pourquoi nous avons créé un programme rigoureux et une communauté de soutien.", - "" - ], - [ - "//i.imgur.com/D7Y5luw.jpg", - "Un graphique de la vitesse de croissance de l'emploi face à la croissance du nombre de diplômés en études d'informatique . Il y a 1,4 million d'emplois et seulement 400 000 personnes pour les occuper.", - "Il y a des milliers d'emplois de développeurs actuellement vacants, et la demande pour les développeurs augmente chaque année.", - "" - ], - [ - "//i.imgur.com/WD3STY6.jpg", - "Photos de trois développeurs qui ont obtenu un emploi après l'apprentissage de code au Free Code Camp.", - "Free Code Camp est une voie éprouvée pour obtenir votre premier job de développeur. En fait , personne n'a jamais accompli l'ensemble de notre programme , car nos développeurs ont trouvé un emploi avant qu'ils ne soient en mesure de le finir notre parcours.", - "" - ], - [ - "//i.imgur.com/vLNso6h.jpg", - "Une illustration montrant que vous allez apprendre HTML5 , CSS3 , JavaScript , bases de données , Git , Node.js , React et D3.", - "Nous avons des centaines de défis de codage optionnels qui vous apprendront les fondamentaux du développement web comme HTML5 , Node.js et les bases de données.", - "" - ], - [ - "//i.imgur.com/UVB9hxp.jpg", - "Une image d'un développeur dans un café projets sur Camp Code Free.", - "Nous croyons que les êtres humains apprennent mieux par la pratique . De sorte que vous passerez la plupart de votre temps à construire efficacement des projets. Nous allons vous donner une liste de spécifications ( des témoignages d'utilisateurs agiles ) , et vous allez comprendre comment construire des applications qui répondent à ces spécifications.", - "" - ], - [ - "//i.imgur.com/pbW7K5S.jpg", - "Une image pour montrer notre front-end, back end, et data visualisation certificat ( 400 heures chacun) , nos projets à but non lucratif (800 heures) , et l'interview de préparation ( 80 heures ) pour un total de 2080 heures d'expérience de codage.", - "Notre programme est divisé en 4 certifications . Ces certifications sont standardisés , et immédiatement vérifiable par vos clients indépendants et les futurs employeurs . Comme tout le reste au Code Camp gratuit, ces certifications sont gratuits. Nous vous recommandons de les faire dans l'ordre, mais vous êtes libre d'en sauter . Les trois premièrs certifications prennent 400 heures chacune , et la certification finale prend 800 heures , et implique la construction de projets concrets pour les organisations caritatives.", - "" - ], - [ - "//i.imgur.com/akGfLoa.jpg", - "Une capture d'écran de notre certificat développeur Front-End", - "Pour réussir notre certificat Front-End vérifié, vous allez construire 10 projets utilisant HTML , CSS , jQuery et JavaScript.", - "" - ], - [ - "//i.imgur.com/ocEL0D3.jpg", - "Une capture d'écran de notre certificat de visualisation de données", - "Pour gagner notre certification de visualisation de données , vous allez construire 10 projets utilisant Réagir, Sass et D3.js.", - "" - ], - [ - "//i.imgur.com/8HCk1Od.jpg", - "Une capture d'écran de notre certificat Back-End", - "Pour gagner notre certification de développeur Back-End, vous allez construire 10 projets utilisant Node.js , Express, et MongoDB . Vous allez utiliser Git et Heroku de les déployer dans le cloud.", - "" - ], - [ - "//i.imgur.com/yXyxbDd.jpg", - "Une capture d'écran de notre répertoire de projet à but non lucratif.", - "Après avoir effectué tous les trois de ces certificats , vous faites équipe avec un autre développeur et utilisez agiles méthodologies de développement de logiciel pour construire deux projets de la vie réelle pour les organismes sans but lucratif . Vous aurez également d'ajouter des fonctionnalités à deux projets à but non lucratif de code hérité. Au moment où vous avez terminé, vous aurez un portefeuille de véritables applications que les gens utilisent tous les jours.", - "" - ], - [ - "//i.imgur.com/PDGQ9ZM.jpg", - "Une image de campeurs construction des projets ensemble dans un café de Séoul ", - "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": [ - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//i.imgur.com/akGfLoa.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.", - "" - ], - [ - "//i.imgur.com/ocEL0D3.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.", - "" - ], - [ - "//i.imgur.com/8HCk1Od.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.", - "" - ], - [ - "//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. ", - "" - ], - [ - "//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.", - "" - ] - ], - "titleDe": "Lerne wie Free Code Camp funktioniert", - "descriptionDe": [ - [ - "//i.imgur.com/6ibIavQ.jpg", - "Ein Bild von den 4 Vorteilen von Free Code Camp: Vernetz Dich, Lerne Javascript, Bau ein Portfolio auf, Hilf Non-Profit-Organisationen", - "Willkommen bei Free Code Camp. Wir sind eine Open Source Gemeinschaft von motivierten Leuten, die programmieren lernen und Non-Profit-Organisationen helfen", - "" - ], - [ - "//i.imgur.com/Elb3dfj.jpg", - "Ein Screenshot von einigen unserer Camper beim gemeinsamen Programmieren in Toronto.", - "Programmieren zu lernen ist hart. Um erfolgreich zu sein brauchst du viel Übung und Unterstützung. Deswegen haben wir ein umfangreiches Curriculum und eine unterstützende Gemeinschaft geschaffen.", - "" - ], - [ - "//i.imgur.com/D7Y5luw.jpg", - "Ein Graph vom Verhältnis der Wachstumsrate von Jobs gegenüber der Abschlüsse von Informatik Studien. Es gibts 1,4 Millionen Jobs aber nur 400.000 Leute um diese zu füllen.", - "Es gibt tausende von unbesetzen Programmierjobs und die Nachfrage wächst jedes Jahr", - "" - ], - [ - "//i.imgur.com/WD3STY6.jpg", - "Foto von drei Campern die einen Job bekommen haben nachdem sie bei Free Code Camp programmieren gelernt haben", - "Free Code Camp ist ein sicherer Weg zu deinem ersten Programmierjob. Tatsächlich hat noch niemand unser komplettes Programm beendet, weil Campers bereits davor Jobs finden.", - "" - ], - [ - "//i.imgur.com/vLNso6h.jpg", - "Eine Illustration die zeigt dass du HTML5, CSS3, JavaScript, Datenbanken, Git, Node.js, React und D3 lernen wirst", - "Wir haben hunderte von optionalen Programmieraufgaben die dir die fundamentalen Webentwicklungstechnologien wie HTML5, Node.js und Datanbanken beibringen werden.", - "" - ], - [ - "//i.imgur.com/UVB9hxp.jpg", - "Ein Foto von einem Camper in einem Cafe der an Free Code Camp Projekten arbeitet.", - "Wir glauben dass Menschen am Besten beim Tun lernen. Deswegen wirst du die meiste Zeit damit beschäftigt sein an tatsächlichen Projekten zu arbeiten. Wir werden dir eine Liste an Anforderungen (agile User Stories) geben und du wirst dich damit auseinander setzen diese zu erfüllen.", - "" - ], - [ - "//i.imgur.com/pbW7K5S.jpg", - "Ein Bild auf dem man unsere Frontend-, Backend- und Daten Visualisierungzertifikate (je 400 Stunden), unsere Non-Profit-Projekte (800 Stunden) und Bewerbungsgesprächsvorbereitung (80 Stunden) sieht mit einer Summe von 2080 Stunden Programmiererfahrung.", - "Unser Curriculum ist in 4 Zertifikate aufgeteilt. Diese Zertifikate sind standardisiert und jederzeit von deinen Kunden oder zukünftigen Arbeitgeber überprüfbar. Wie alles andere auch bei Free Code Camp sind die Zertifikate gratis. Wir empfehlen sie in der vorgesehenen Reihenfolge zu machen, aber es steht dir offen frei zu wählen. Die ersten drei Zertifikate dauern jeweils 400 Stunden. Das letzte Zertifikat dauert 800 Stunden und beinhaltet die Umsetzung eines echten Projektes für eine Non-Profit-Organisation.", - "" - ], - [ - "//i.imgur.com/akGfLoa.jpg", - "Ein Screenshot von unserem Frontendzertifikat", - "Um sich unser geprüftes Frontend-Entwicklungszertifikat zu verdienen, wirst du 10 Projekte mit HTML, CSS, jQuery und Javascript umsetzen.", - "" - ], - [ - "//i.imgur.com/ocEL0D3.jpg", - "Ein Screenshot von unserem Datenvisualisierungszertifikat", - "Für unser Datenvisualisierungszertifikat, wirst du 10 Projekte mit React, Sass und D3.js umsetzen.", - "" - ], - [ - "//i.imgur.com/8HCk1Od.jpg", - "Ein Screenshot von unserem Backend-Entwicklungszertifikat", - "Um unser Backend-Entwicklungszertifikat zu erhalten, wirst du 10 Projekte mit Node.js, Express und MongoDB umsetzen. Du wirst Git und Heroku verwenden um sie in der Cloud zu veröffentlichen.", - "" - ], - [ - "//i.imgur.com/yXyxbDd.jpg", - "Ein Screenshot von unserem Non-Profit-Verzeichnis", - "Nachdem du alle drei von diesen Zertifikaten abgeschlossen hast, wirst du mit einem anderen Camper zusammen Methoden der agilen Softwareentwicklung verwenden und zwei echte Projekte für Non-Profit-Organisationen umsetzen. Außerdem wirst du zwei bereits existierende Non-Profit-Projekte um neue Funktionalität erweitern. Wenn du fertig bist, wirst du ein Portfolio mit zwei echten Apps besitzen, die täglich von Leuten genutzt werden.", - "" - ], - [ - "//i.imgur.com/PDGQ9ZM.jpg", - "Ein Foto von Campern die zusammen in einem Cafe in Seoul an einem Projekt arbeiten.", - "Wenn du alle 2080 Stunden an Aufgaben und Projekten absolviert hast, hast du dir unser Full Stack Development Zertifikat verdient. Wir bieten dir dann ein gratis Bewerbungstraining an. Außerdem haben wir eine Jobbörse, wo Arbeitsgeber Camper einstellen die Free Code Camp Zertifikate erhalten haben.", - "" - ] - ], - "TitleIt": "Impara come funziona Free Code Camp", - "DescriptionIt": [ - [ - "//i.imgur.com/6ibIavQ.jpg", - "Una immagine dei 4 benefici di Free Code Camp: Creare Contatti, Imparare il JavaScript, costruire il proprio portfolio, Aiutare delle organizzazioni no-profit", - "Benvenuto in Free Code Camp. Siamo una comunità open source di persone impegnate che imparano a programmare e aiutano le organizzazioni no-profit.", - "" - ], - [ - "//i.imgur.com/Elb3dfj.jpg", - "Uno screenshot di alcuni dei nostri camper che programmano insieme a Toronto.", - " Imparare a programmare è difficile. Per riuscirci, sono necessari un sacco di pratica e molto sostegno. Per questo motivo abbiamo creato un curriculum rigoroso e una comunità solidale.", - "" - ], - [ - "//i.imgur.com/D7Y5luw.jpg", - "Un grafico del tasso di crescita dei posti di lavoro contro la crescita di laureati in informatica (in USA). Ci sono 1,4 milioni di posti e solo 400 mila persone adatte ad occuparli.", - "Ci sono migliaia di posizioni da Sviluppatore Software attualmente vacanti, e la domanda di programmatori cresce ogni anno.", - "" - ], - [ - "//i.imgur.com/WD3STY6.jpg", - "Foto di tre camper che hanno ottenuto un lavoro dopo aver imparato a programmare con Free Code Camp.", - "Free Code Camp è un modo collaudato per ottenere il primo lavoro da sviluppatore. In effetti, nessuno ha ancora completato tutto il nostro programma, perché i campers trovano lavoro prima di finire il corso.", - "" - ], - [ - "//i.imgur.com/vLNso6h.jpg", - "Un esempio che mostra che qui si imparano HTML5, CSS3, JavaScript, Database, Git, Node.js, React e D3.", - "Abbiamo centinaia di problemi di programmazione opzionali che vi insegneranno tecnologie di sviluppo web fondamentali come HTML5, Node.js e Database.", - "" - ], - [ - "//i.imgur.com/UVB9hxp.jpg", - "Un'immagine di un camper in un bar che lavora ai progetti di Free Code Camp.", - "Crediamo che gli esseri umani imparino meglio facendo. Quindi lavorerai per la maggior parte del tempo a dei progetti pratici. Ti daremo una lista di specifiche (Storie-Utente 'Agili'), e Tu dovrai decidere come sviluppare delle applicazioni che soddisfino queste specifiche.", - "" - ], - [ - "//i.imgur.com/pbW7K5S.jpg", - "Un'immagine che mostra le nostre certificazioni front-end, back-end, e visualizzazione dei dati (400 ore ciascuno), i nostri progetti no-profit (800 ore), e la preparazione ai colloqui (80 ore) per un totale di 2.080 ore di esperienza.", - "Il nostro curriculum è diviso in 4 certificazioni. Queste certificazioni sono standardizzate, e immediatamente verificabili dai tuoi clienti come freelance e dai futuri datori di lavoro. Come tutto il resto di Free Code Camp, queste certificazioni sono gratuite. Ti consigliamo di farle in ordine, ma non è obbligatorio. Per le prime tre certificazioni, ci vogliono 400 ore ciascuna, per la certificazione finale ci vogliono 800 ore, e questa prevede lo sviluppo di progetti reali per delle organizzazioni no-profit. ", - "" - ], - [ - "//i.imgur.com/akGfLoa.jpg", - "Uno screenshot del nostro certificato di sviluppatore Front-End", - "Per ottenere la certificazione verificata di Sviluppatore Front-End, dovrai realizzare 10 progetti utilizzando HTML, CSS, jQuery, e JavaScript.", - "" - ], - [ - "//i.imgur.com/ocEL0D3.jpg", - "Uno screenshot del nostro certificato di Visualizzazione Dati", - "Per ottenere la certificazione di Visualizzazione Dati, dovrai realizzare 10 progetti utilizzando React, Sass e D3.js.", - "" - ], - [ - "//i.imgur.com/8HCk1Od.jpg", - "Uno screenshot del nostro certificato di sviluppatore Back-End", - "Per ottenere la certificazione di Sviluppatore Back-End, dovrai realizzare 10 progetti utilizzando Node.js, Express e MongoDB. Userai Git e Heroku per distribuirli in rete.", - "" - ], - [ - "//i.imgur.com/yXyxbDd.jpg", - "Una schermata della nostra directory dei progetti no-profit.", - "Dopo aver ottenuto tutti e tre i certificati, potrai collaborare con un altro camper e utilizzerai metodologie di sviluppo 'Agili' per sviluppare due progetti reali per delle organizzazioni no-profit. Inoltre dovrai aggiungere funzionalità a due progetti no-profit sviluppati precedentemente. Quando avrai finito, avrai un portafoglio di applicazioni reali utilizzate quotidianamente.", - "" - ], - [ - "//i.imgur.com/PDGQ9ZM.jpg", - "Un'immagine di alcuni campers che lavorano insieme ai progetti in un bar a Seoul.", - "Una volta completati tutti i problemi e i progetti, per l'equivalente di 2080 ore, potrai ottenere la nostra Certificazione di sviluppatore Full-Stack. Offriamo gratuitamente anche delle simulazioni di colloqui di lavoro. Abbiamo anche una Bacheca in cui i datori di lavoro stanno cercando dei campers che abbiano completato le certificazioni di Free Code Camp. ", - "" - ] - ] + "translations": { + "de": { + "title": "Lerne wie Free Code Camp funktioniert", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Ein Bild von den 4 Vorteilen von Free Code Camp: Vernetz Dich, Lerne Javascript, Bau ein Portfolio auf, Hilf Non-Profit-Organisationen", + "Willkommen bei Free Code Camp. Wir sind eine Open Source Gemeinschaft von motivierten Leuten, die programmieren lernen und Non-Profit-Organisationen helfen", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Ein Screenshot von einigen unserer Camper beim gemeinsamen Programmieren in Toronto.", + "Programmieren zu lernen ist hart. Um erfolgreich zu sein brauchst du viel Übung und Unterstützung. Deswegen haben wir ein umfangreiches Curriculum und eine unterstützende Gemeinschaft geschaffen.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Ein Graph vom Verhältnis der Wachstumsrate von Jobs gegenüber der Abschlüsse von Informatik Studien. Es gibts 1,4 Millionen Jobs aber nur 400.000 Leute um diese zu füllen.", + "Es gibt tausende von unbesetzen Programmierjobs und die Nachfrage wächst jedes Jahr", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Foto von drei Campern die einen Job bekommen haben nachdem sie bei Free Code Camp programmieren gelernt haben", + "Free Code Camp ist ein sicherer Weg zu deinem ersten Programmierjob. Tatsächlich hat noch niemand unser komplettes Programm beendet, weil Campers bereits davor Jobs finden.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Eine Illustration die zeigt dass du HTML5, CSS3, JavaScript, Datenbanken, Git, Node.js, React und D3 lernen wirst", + "Wir haben hunderte von optionalen Programmieraufgaben die dir die fundamentalen Webentwicklungstechnologien wie HTML5, Node.js und Datanbanken beibringen werden.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Ein Foto von einem Camper in einem Cafe der an Free Code Camp Projekten arbeitet.", + "Wir glauben dass Menschen am Besten beim Tun lernen. Deswegen wirst du die meiste Zeit damit beschäftigt sein an tatsächlichen Projekten zu arbeiten. Wir werden dir eine Liste an Anforderungen (agile User Stories) geben und du wirst dich damit auseinander setzen diese zu erfüllen.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Ein Bild auf dem man unsere Frontend-, Backend- und Daten Visualisierungzertifikate (je 400 Stunden), unsere Non-Profit-Projekte (800 Stunden) und Bewerbungsgesprächsvorbereitung (80 Stunden) sieht mit einer Summe von 2080 Stunden Programmiererfahrung.", + "Unser Curriculum ist in 4 Zertifikate aufgeteilt. Diese Zertifikate sind standardisiert und jederzeit von deinen Kunden oder zukünftigen Arbeitgeber überprüfbar. Wie alles andere auch bei Free Code Camp sind die Zertifikate gratis. Wir empfehlen sie in der vorgesehenen Reihenfolge zu machen, aber es steht dir offen frei zu wählen. Die ersten drei Zertifikate dauern jeweils 400 Stunden. Das letzte Zertifikat dauert 800 Stunden und beinhaltet die Umsetzung eines echten Projektes für eine Non-Profit-Organisation.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Ein Screenshot von unserem Frontendzertifikat", + "Um sich unser geprüftes Frontend-Entwicklungszertifikat zu verdienen, wirst du 10 Projekte mit HTML, CSS, jQuery und Javascript umsetzen.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Ein Screenshot von unserem Datenvisualisierungszertifikat", + "Für unser Datenvisualisierungszertifikat, wirst du 10 Projekte mit React, Sass und D3.js umsetzen.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Ein Screenshot von unserem Backend-Entwicklungszertifikat", + "Um unser Backend-Entwicklungszertifikat zu erhalten, wirst du 10 Projekte mit Node.js, Express und MongoDB umsetzen. Du wirst Git und Heroku verwenden um sie in der Cloud zu veröffentlichen.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Ein Screenshot von unserem Non-Profit-Verzeichnis", + "Nachdem du alle drei von diesen Zertifikaten abgeschlossen hast, wirst du mit einem anderen Camper zusammen Methoden der agilen Softwareentwicklung verwenden und zwei echte Projekte für Non-Profit-Organisationen umsetzen. Außerdem wirst du zwei bereits existierende Non-Profit-Projekte um neue Funktionalität erweitern. Wenn du fertig bist, wirst du ein Portfolio mit zwei echten Apps besitzen, die täglich von Leuten genutzt werden.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Ein Foto von Campern die zusammen in einem Cafe in Seoul an einem Projekt arbeiten.", + "Wenn du alle 2080 Stunden an Aufgaben und Projekten absolviert hast, hast du dir unser Full Stack Development Zertifikat verdient. Wir bieten dir dann ein gratis Bewerbungstraining an. Außerdem haben wir eine Jobbörse, wo Arbeitsgeber Camper einstellen die Free Code Camp Zertifikate erhalten haben.", + "" + ] + ] + }, + "es": { + "title": "Aprende como funciona Free Code Camp", + "description": [ + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//i.imgur.com/akGfLoa.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.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.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.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.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.", + "" + ], + [ + "//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. ", + "" + ], + [ + "//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.", + "" + ] + ] + }, + "fr": { + "title": "Apprenez comment FreeCodeCamp fonctionne", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Une idée des avantages de Free Code Camp: restez connecté , apprenez le JavaScript , construisez votre portfolio , Aidez les organismes sans but lucratif", + "Bienvenue sur Free Code Camp . Nous sommes une communauté opensource de gens passionnés qui apprend à coder et aide les organisations à but non lucratif.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Une capture d'écran de certains de nos développeurs réunis à Toronto.", + "Apprendre à code est dur. Pour réussir, vous aurez besoin de beaucoup de pratique et de soutien. Voilà pourquoi nous avons créé un programme rigoureux et une communauté de soutien.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Un graphique de la vitesse de croissance de l'emploi face à la croissance du nombre de diplômés en études d'informatique . Il y a 1,4 million d'emplois et seulement 400 000 personnes pour les occuper.", + "Il y a des milliers d'emplois de développeurs actuellement vacants, et la demande pour les développeurs augmente chaque année.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Photos de trois développeurs qui ont obtenu un emploi après l'apprentissage de code au Free Code Camp.", + "Free Code Camp est une voie éprouvée pour obtenir votre premier job de développeur. En fait , personne n'a jamais accompli l'ensemble de notre programme , car nos développeurs ont trouvé un emploi avant qu'ils ne soient en mesure de le finir notre parcours.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Une illustration montrant que vous allez apprendre HTML5 , CSS3 , JavaScript , bases de données , Git , Node.js , React et D3.", + "Nous avons des centaines de défis de codage optionnels qui vous apprendront les fondamentaux du développement web comme HTML5 , Node.js et les bases de données.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Une image d'un développeur dans un café projets sur Camp Code Free.", + "Nous croyons que les êtres humains apprennent mieux par la pratique . De sorte que vous passerez la plupart de votre temps à construire efficacement des projets. Nous allons vous donner une liste de spécifications ( des témoignages d'utilisateurs agiles ) , et vous allez comprendre comment construire des applications qui répondent à ces spécifications.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Une image pour montrer notre front-end, back end, et data visualisation certificat ( 400 heures chacun) , nos projets à but non lucratif (800 heures) , et l'interview de préparation ( 80 heures ) pour un total de 2080 heures d'expérience de codage.", + "Notre programme est divisé en 4 certifications . Ces certifications sont standardisés , et immédiatement vérifiable par vos clients indépendants et les futurs employeurs . Comme tout le reste au Code Camp gratuit, ces certifications sont gratuits. Nous vous recommandons de les faire dans l'ordre, mais vous êtes libre d'en sauter . Les trois premièrs certifications prennent 400 heures chacune , et la certification finale prend 800 heures , et implique la construction de projets concrets pour les organisations caritatives.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Une capture d'écran de notre certificat développeur Front-End", + "Pour réussir notre certificat Front-End vérifié, vous allez construire 10 projets utilisant HTML , CSS , jQuery et JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Une capture d'écran de notre certificat de visualisation de données", + "Pour gagner notre certification de visualisation de données , vous allez construire 10 projets utilisant Réagir, Sass et D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Une capture d'écran de notre certificat Back-End", + "Pour gagner notre certification de développeur Back-End, vous allez construire 10 projets utilisant Node.js , Express, et MongoDB . Vous allez utiliser Git et Heroku de les déployer dans le cloud.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Une capture d'écran de notre répertoire de projet à but non lucratif.", + "Après avoir effectué tous les trois de ces certificats , vous faites équipe avec un autre développeur et utilisez agiles méthodologies de développement de logiciel pour construire deux projets de la vie réelle pour les organismes sans but lucratif . Vous aurez également d'ajouter des fonctionnalités à deux projets à but non lucratif de code hérité. Au moment où vous avez terminé, vous aurez un portefeuille de véritables applications que les gens utilisent tous les jours.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Une image de campeurs construction des projets ensemble dans un café de Séoul ", + "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.", + "" + ] + ] + }, + "it": { + "title": "Impara come funziona Free Code Camp", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Una immagine dei 4 benefici di Free Code Camp: Creare Contatti, Imparare il JavaScript, costruire il proprio portfolio, Aiutare delle organizzazioni no-profit", + "Benvenuto in Free Code Camp. Siamo una comunità open source di persone impegnate che imparano a programmare e aiutano le organizzazioni no-profit.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Uno screenshot di alcuni dei nostri camper che programmano insieme a Toronto.", + " Imparare a programmare è difficile. Per riuscirci, sono necessari un sacco di pratica e molto sostegno. Per questo motivo abbiamo creato un curriculum rigoroso e una comunità solidale.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Un grafico del tasso di crescita dei posti di lavoro contro la crescita di laureati in informatica (in USA). Ci sono 1,4 milioni di posti e solo 400 mila persone adatte ad occuparli.", + "Ci sono migliaia di posizioni da Sviluppatore Software attualmente vacanti, e la domanda di programmatori cresce ogni anno.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Foto di tre camper che hanno ottenuto un lavoro dopo aver imparato a programmare con Free Code Camp.", + "Free Code Camp è un modo collaudato per ottenere il primo lavoro da sviluppatore. In effetti, nessuno ha ancora completato tutto il nostro programma, perché i campers trovano lavoro prima di finire il corso.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Un esempio che mostra che qui si imparano HTML5, CSS3, JavaScript, Database, Git, Node.js, React e D3.", + "Abbiamo centinaia di problemi di programmazione opzionali che vi insegneranno tecnologie di sviluppo web fondamentali come HTML5, Node.js e Database.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Un'immagine di un camper in un bar che lavora ai progetti di Free Code Camp.", + "Crediamo che gli esseri umani imparino meglio facendo. Quindi lavorerai per la maggior parte del tempo a dei progetti pratici. Ti daremo una lista di specifiche (Storie-Utente 'Agili'), e Tu dovrai decidere come sviluppare delle applicazioni che soddisfino queste specifiche.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Un'immagine che mostra le nostre certificazioni front-end, back-end, e visualizzazione dei dati (400 ore ciascuno), i nostri progetti no-profit (800 ore), e la preparazione ai colloqui (80 ore) per un totale di 2.080 ore di esperienza.", + "Il nostro curriculum è diviso in 4 certificazioni. Queste certificazioni sono standardizzate, e immediatamente verificabili dai tuoi clienti come freelance e dai futuri datori di lavoro. Come tutto il resto di Free Code Camp, queste certificazioni sono gratuite. Ti consigliamo di farle in ordine, ma non è obbligatorio. Per le prime tre certificazioni, ci vogliono 400 ore ciascuna, per la certificazione finale ci vogliono 800 ore, e questa prevede lo sviluppo di progetti reali per delle organizzazioni no-profit. ", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Uno screenshot del nostro certificato di sviluppatore Front-End", + "Per ottenere la certificazione verificata di Sviluppatore Front-End, dovrai realizzare 10 progetti utilizzando HTML, CSS, jQuery, e JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Uno screenshot del nostro certificato di Visualizzazione Dati", + "Per ottenere la certificazione di Visualizzazione Dati, dovrai realizzare 10 progetti utilizzando React, Sass e D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Uno screenshot del nostro certificato di sviluppatore Back-End", + "Per ottenere la certificazione di Sviluppatore Back-End, dovrai realizzare 10 progetti utilizzando Node.js, Express e MongoDB. Userai Git e Heroku per distribuirli in rete.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Una schermata della nostra directory dei progetti no-profit.", + "Dopo aver ottenuto tutti e tre i certificati, potrai collaborare con un altro camper e utilizzerai metodologie di sviluppo 'Agili' per sviluppare due progetti reali per delle organizzazioni no-profit. Inoltre dovrai aggiungere funzionalità a due progetti no-profit sviluppati precedentemente. Quando avrai finito, avrai un portafoglio di applicazioni reali utilizzate quotidianamente.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Un'immagine di alcuni campers che lavorano insieme ai progetti in un bar a Seoul.", + "Una volta completati tutti i problemi e i progetti, per l'equivalente di 2080 ore, potrai ottenere la nostra Certificazione di sviluppatore Full-Stack. Offriamo gratuitamente anche delle simulazioni di colloqui di lavoro. Abbiamo anche una Bacheca in cui i datori di lavoro stanno cercando dei campers che abbiano completato le certificazioni di Free Code Camp. ", + "" + ] + ] + } + } }, { "id": "560add37cb82ac38a17513bf", - "descriptionJa": [ - [ - "//i.imgur.com/EAR7Lvh.jpg", - "Gitterチャットルームの一場面です。", - "コーディングを始める前に、Free Code Camp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に GitHub アカウントが必要です。", - "" - ], - [ - "//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" - ], - [ - "//i.imgur.com/hFqAEr8.gif", - "この gif は GitHub の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。", - "GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます", - "https://github.com/settings/profile" - ], - [ - "//i.imgur.com/pYk0wOk.gif", - "この gif は GitHub のレポジトリへのスターをつける方法です。", - "オープンソースの Free Code Camp のレポジトリを開いてください。これは私たちボランティアチームの協力者が Free Code Camp で作っているものです。", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "//i.imgur.com/OmRmLB4.gif", - "この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。", - "あなたは GitHub のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって Free Code Camp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "//i.imgur.com/Ecs5XAd.gif", - "この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。", - "私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。", - "" - ], - [ - "//i.imgur.com/T0bGJPe.gif", - "この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。", - "私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。", - "" - ], - [ - "//i.imgur.com/vDTMJSh.gif", - "この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。", - "私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。", - "" - ], - [ - "//i.imgur.com/WvQvNGN.gif", - "この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。", - "チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。", - "https://gitter.im/apps" - ] - ], "title": "Create a GitHub Account and Join our Chat Rooms", "description": [ [ @@ -504,237 +458,305 @@ "challengeSeed": [], "tests": [], "type": "Waypoint", - "titleFr": "Créer un compte GitHub et rejoignez nos Salons de chat", - "descriptionFr": [ - [ - "//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.", - "" - ], - [ - "//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" - ], - [ - "//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" - ], - [ - "//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.", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "//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" - ], - [ - "//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.", - "" - ], - [ - "//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é.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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": [ - [ - "//i.imgur.com/EAR7Lvh.jpg", - "Una imagen de una de nuestras salas de chat en Gitter.", - "Ahora únete a las salas de chat de Free Code Camp. Puedes venir aquí en cualquier momento para charlar, hacer preguntas, o encontrar otro campista para programar juntos. Primero necesitarás una cuenta de GitHub.", - "" - ], - [ - "//i.imgur.com/n6GeSEm.gif", - "Una imagen mostrándote como pulsar en el enlace inferior para ir a GitHub, llenar los campos necesarios y enviarlos.", - "Crea una cuenta en GitHub. Asegúrate de usar tu dirección de correo real - GitHub mantendrá esto en privado.", - "https://github.com/join" - ], - [ - "//i.imgur.com/hFqAEr8.gif", - "Un gif mostrándote como pulsar en la imagen de perfil en la esquina superior derecha de GitHub. Sube una foto tuya o continuaras usando la imagen de píxeles generada automáticamente. Entonces llena los campos restantes y haz clic en enviar.", - "En la esquina superior derecha pulsa sobre la imagen de píxeles, entonces selecciona configuraciones. Sube una imagen tuya. Una foto de tu cara es mejor. Así es como tus compañeros campistas te verán en nuestras salas de chat, así que toma tu mejor ángulo. Puedes añadir tu ciudad y tu nombre si lo deseas.", - "https://github.com/settings/profile" - ], - [ - "//i.imgur.com/pYk0wOk.gif", - "Un gif mostrándote como puedes dar una estrella a un repositorio de GitHub.", - "Ve al repositorio de código libre de Free Code Camp y dale una \"estrella\". Las \"estrellas\" son el equivalente en GitHub de los \"me gusta\".", - "Si quieres, ve al repositorio de código libre de Free Code Camp.", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "//i.imgur.com/OmRmLB4.gif", - "Un gif mostrándote como pulsar en el enlace inferior para ir a nuestra sala de chat y pulsar en el botón de \"iniciar sesión con GitHub\". Entonces puedes pulsar en el próximo campo de texto y escribir un mensaje a tus compañeros campistas.", - "Ahora que tienes una cuenta de GitHub, puedes unirte a nuestro chat principal al iniciar sesión con GitHub. Preséntate diciendo \"Hello world!\" Cuéntales a los tus compañeros campistas como encontraste Free Code Camp. Además cuéntanos porque deseas aprender a programar.", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "//i.imgur.com/Ecs5XAd.gif", - "Un gif mostrándote como puedes pulsar en el botón de configuraciones en la esquina superior derecha y modificar tus configuraciones de notificaciones.", - "Nuestras salas de chat son extremadamente activas. Deberías cambiar tus configuraciones para ser notificado únicamente si alguien te menciona.", - "" - ], - [ - "//i.imgur.com/T0bGJPe.gif", - "Un gif mostrándote como puedes pulsar en la imagen de perfil de un usuario para iniciar una conversación privada con ese usuario.", - "Por favor nota que todas nuestras salas de chat son visibles para el público. Si necesitas compartir información privada, como una dirección de correo o un número de teléfono, hazlo en un mensaje privado.", - "" - ], - [ - "//i.imgur.com/vDTMJSh.gif", - "Un gif mostrándote que puedes cambiar entre desafíos y nuestras salas de chat.", - "Mantén nuestra sala de chat abierta mientras trabajas en nuestros desafíos. De esta manera, puedes pedir ayuda si quedas atascado. Además puedes socializar con otros campistas cuando quieras tomar un descanso.", - "" - ], - [ - "//i.imgur.com/WvQvNGN.gif", - "Un gif mostrándote como puedes pulsar abajo para descargar una aplicación de chat nativa para tu computadora.", - "También puedes descargar la aplicación de chat para tu computadora o teléfono móvil.", - "https://gitter.im/apps" - ] - ], - "titleJa": "Githubアカウントを作成し、チャットに参加しましょう", - "titleDe": "Erstelle einen GitHub Account und tritt unserem Chat bei", - "descriptionDe": [ - [ - "//i.imgur.com/EAR7Lvh.jpg", - "Ein Screenshot von einem userer Gitter Chats.", - "Bevor wir zu programmieren beginnen, lass uns den Free Code Camp Chats beitreten. Hier kannst du zu jeder Tageszeit kommen, Fragen stellen oder einen anderen Camper suchen um gemeinsam zu programmieren. Doch zuerst benötigst du einen GitHub Account.", - "" - ], - [ - "//i.imgur.com/n6GeSEm.gif", - "Ein GIF das zeigt wie der unten stehenden Link angeklickt wird um auf GitHub zu kommen. Füll die notwendigen Felder aus und bestätige. Dann schau in deine Mails nach einer Nachricht von GitHub um deinen Account zu verifizieren.", - "Klicke unten auf den \"Link in neuem Tab öffnen\" Button um GitHub zu öffnen. Erstelle einen GitHub Account indem du die Felder in dem Formular ausfüllst. Überprüfe ob du deine echte Emailadresse verwendest - GitHub wird sie nicht weitergeben. Dann suche in deinem Posteingang nach einer Nachricht von GitHub. Öffne sie und klicke den darin befindenden \"Emailadresse bestätigen\" Button.
Hinweis: Wenn du bereits einen GitHub Account besitzt, kannst du diesen Schritt überspringen, indem du \"Link in neuem Tab öffnen\" drückst, den neuen Tab schließt und dann auf \"Gehe zu nächstem Schritt\" klickst. Wir haben den \"Schritt überspringen\" Button entfernt weil viele Leute sich einfach durchgeklickt haben ohne diese wichtigen Schritte zu tun
", - "https://github.com/join" - ], - [ - "//i.imgur.com/hFqAEr8.gif", - "Ein GIF das dir zeigt wie man sein Profilebild im rechten oberen Eck von GitHub anklickt. Lade ein Foto von dir hoch oder verwende weiterhin das automatisch generierte Pixelbild. Dann fülle die übrigen Formularfelder aus und klicke auf Bestätigung.", - "Klicke auf das Pixel-Art Bild in der rechten oberen Ecke von GitHub, dann gehe auf Einstellungen (settings). Lade ein Bild von dir hoch. Ein Foto von deinem Gesicht bietet sich am Besten an. So sehen dich die anderen Camper im Chat, also mach dich schick. Du kannst deine Stadt und deinen Namen hinzufügen, falls du willst.", - "https://github.com/settings/profile" - ], - [ - "//i.imgur.com/pYk0wOk.gif", - "Ein GIF das dir zeigt wie man einem GitHub Repository einen Stern gibt", - "Öffne Free Code Camp's open-source Repository. Hier arbeitet das ehrenamtliche Team zusammen an Free Code Camp. Du kannst unserem Repositoy einen Stern geben. Das ist das GitHub Äquivalent für etwas \"liken\"", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "//i.imgur.com/OmRmLB4.gif", - "Ein GIF das dir zeigt wie der unten stehende Link geklickt, auf den Chat weitergeleitet und mit dem \"Melde dich mit GitHub an\" Button man angemeldet wird. Dann kannst du auf das Textfeld klicken und eine Nachricht an andere Camper schicken", - "Jetzt, da du einen GitHub Account besitzt, kannst du unserem Hauptchat beitreten indem du dich mit GitHub anmeldest. Stell dich vor indem du \"Hello World\" schreibst. Erzähl den anderen Campern wie du Free Code Camp gefunden hast. Außerdem könntest du uns erzählen warum du programmieren lernen willst.", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "//i.imgur.com/Ecs5XAd.gif", - "Ein Gif das dir zeigt wie man den Einstellungsbutton im oberen rechten Eck anklickt und die Benachrichtigungseinstellungen ändert.", - "Unsere Chats sind sehr aktiv. Du solltest die Einstellungen ändern, damit du nur benachrichtigt wirst falls dich jemand erwähnt", - "" - ], - [ - "//i.imgur.com/T0bGJPe.gif", - "Ein GIF das dir zeigt wie man ein Profilbild von einem anderen User anklickt um eine private Nachricht zu versenden.", - "Sei dir bitte bewusst, dass alle unsere Chats komplett öffentlich sind. Falls du also sensible Informationen, wie zum Beispiel Emailadressen oder Telefonnummern, austauschen willst, verwende Privatnachrichten.", - "" - ], - [ - "//i.imgur.com/vDTMJSh.gif", - "Ein GIF das dir zeigt, dass du mithilfe mehrerer Tabs zwischen Aufgaben und dem Chat hin und her wechseln kannst", - "Halte den Chat offen, während du an den Aufgaben arbeitest. So kannst du jederzeit nach Hilfe fragen falls du nicht weiterkommst. Außerdem kannst du dich mit anderen Campern unterhalten falls du eine Pause brauchst.", - "" - ], - [ - "//i.imgur.com/WvQvNGN.gif", - "Ein GIF das dir zeigt wie du den den untenstehenden Link klickst um die native Chatapp für deinen Computer herunterzuladen.", - "Du kannst dir auch die Chatapp für deinen Computer oder dein Smartphone herunterladen.", - "https://gitter.im/apps" - ] - ], - "TitleIt": "Crea un account GitHub e iscriviti alle nostre Chat Rooms", - "DescriptionIt": [ - [ - "//i.imgur.com/EAR7Lvh.jpg", - "Uno screenshot di una delle nostre chat rooms in Gitter.", - "Prima di iniziare a scrivere codice, entra nelle chat di Free Code Camp. Potrai venire qui in ogni momento della giornata per chiacchierare, fare domande, o trovare un altro camper per programmare in coppia. Prima di tutto avrai bisogno di un account GitHub.", - "" - ], - [ - "//i.imgur.com/n6GeSEm.gif", - "Una gif che invita a cliccare sul link qui sotto per andare su GitHub. Compila i campi necessari e fare clic su Invia. Quindi controlla la tua casella di posta elettronica, riceverai una e-mail da GitHub per verificare il tuo account.", - "Clicca sul pulsante \" Apri link in una nuova scheda \" qui sotto per aprire GitHub. Crea un account compilando il modulo. Assicurati di utilizzare un indirizzo email reale - GitHub lo terrà privato. Poi controlla la tua casella di posta, riceverai un'e-mail da GitHub. Aprila e clicca il pulsante \"verificare l'indirizzo e-mail \" al suo interno
. Nota: Se disponi già di un account GitHub, è possibile saltare questo passaggio cliccando \"Apri link in una nuova scheda \", chiudendo poi la scheda appena aperta, quindi facendo clic su \"Vai al mio prossimo passo \". Abbiamo rimosso il pulsante \"Salta il passaggio \" perché molte persone lo premerebbero ripetutamente, saltando questi importanti passaggi. ", - "https://github.com/join" - ], - [ - "//i.imgur.com/hFqAEr8.gif", - "Una gif che mostra come cliccare l'immagine del profilo nell'angolo in alto a destra di GitHub. Carica una foto di te altrimenti continuerai ad utilizzare la pixel art generata automaticamente. Poi, compila gli altri campi del modulo e fai clic su Invia.", - "Clicca sulla pixel art nell'angolo in alto a destra di GitHub, quindi seleziona impostazioni. Carica una foto di te stesso. Una foto del viso è la scelta migliore. Gli altri campers ti vedranno così nelle nostre chat rooms, quindi cerca di apparire al meglio . È anche possibile aggiungere la tua città e il tuo nome.", - "https://github.com/settings/profile" - ], - [ - "//i.imgur.com/pYk0wOk.gif", - "Una gif che mostra la repository GitHub di Free Code Camp.", - "Apri la repository open-source di Free Code Camp. E' qui che il nostro team di volontari collabora allo sviluppo di Free Code Camp.", - "https://github.com/freecodecamp/freecodecamp" - ], - [ - "//i.imgur.com/OmRmLB4.gif", - "Una gif che mostra come cliccare sul link qui sotto per andare alla nostra chat room e fare clic sul pulsante \" accedi con GitHub \". Quindi potrai cliccare nel campo di immissione testo e digitare un messaggio agli altri campers.", - "Ora che disponi di un account GitHub, puoi aggiungerti alla nostra chat principale effettuando il login con GitHub. Presentati dicendo \" Hello World! \"Dì ai campers come hai trovato Free Code Camp. Dicci anche perché vuoi imparare a programmare. ", - "https://gitter.im/FreeCodeCamp/FreeCodeCamp" - ], - [ - "//i.imgur.com/Ecs5XAd.gif", - "Una gif che mostra come cliccare sul pulsante Impostazioni nell'angolo in alto a destra e modificare le impostazioni di notifica.", - "Le nostre chat rooms sono estremamente attive. È preferibile modificare le impostazioni in modo da essere notificati solo se qualcuno ti menziona direttamente.", - "" - ], - [ - "//i.imgur.com/T0bGJPe.gif", - "Una gif che mostra come cliccare sull'immagine di un profilo utente per avviare una conversazione privata con quell'utente.", - "Ti preghiamo di notare che tutte le nostre chat rooms sono visibili al pubblico. Se hai bisogno di condividere le informazioni sensibili, come ad esempio un indirizzo email o il numero di telefono, fallo in un messaggio privato.", - "" - ], - [ - "//i.imgur.com/vDTMJSh.gif", - "Una gif che mostra come passare ripetutamente tra i problemi e le nostre chat rooms.", - "Mantieni aperta la nostra chat mentre lavori ai nostri problemi. In questo modo, potrai chiedere aiuto se ti troverai in ​​difficoltà. Potrai anche socializzare con gli altri campers, quando avrai voglia di prendere una pausa.", - "" - ], - [ - "//i.imgur.com/WvQvNGN.gif", - "Una gif che mostra come è possibile fare clic sul link qui sotto per scaricare applicazione di chat nativa per il computer.", - "È anche possibile scaricare un'applicazione nativa per il computer o il telefono.", - "https://gitter.im/apps" - ] - ], - "challengeType": 7 + "challengeType": 7, + "translations": { + "de": { + "title": "Erstelle einen GitHub Account und tritt unserem Chat bei", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Ein Screenshot von einem userer Gitter Chats.", + "Bevor wir zu programmieren beginnen, lass uns den Free Code Camp Chats beitreten. Hier kannst du zu jeder Tageszeit kommen, Fragen stellen oder einen anderen Camper suchen um gemeinsam zu programmieren. Doch zuerst benötigst du einen GitHub Account.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Ein GIF das zeigt wie der unten stehenden Link angeklickt wird um auf GitHub zu kommen. Füll die notwendigen Felder aus und bestätige. Dann schau in deine Mails nach einer Nachricht von GitHub um deinen Account zu verifizieren.", + "Klicke unten auf den \"Link in neuem Tab öffnen\" Button um GitHub zu öffnen. Erstelle einen GitHub Account indem du die Felder in dem Formular ausfüllst. Überprüfe ob du deine echte Emailadresse verwendest - GitHub wird sie nicht weitergeben. Dann suche in deinem Posteingang nach einer Nachricht von GitHub. Öffne sie und klicke den darin befindenden \"Emailadresse bestätigen\" Button.
Hinweis: Wenn du bereits einen GitHub Account besitzt, kannst du diesen Schritt überspringen, indem du \"Link in neuem Tab öffnen\" drückst, den neuen Tab schließt und dann auf \"Gehe zu nächstem Schritt\" klickst. Wir haben den \"Schritt überspringen\" Button entfernt weil viele Leute sich einfach durchgeklickt haben ohne diese wichtigen Schritte zu tun
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Ein GIF das dir zeigt wie man sein Profilebild im rechten oberen Eck von GitHub anklickt. Lade ein Foto von dir hoch oder verwende weiterhin das automatisch generierte Pixelbild. Dann fülle die übrigen Formularfelder aus und klicke auf Bestätigung.", + "Klicke auf das Pixel-Art Bild in der rechten oberen Ecke von GitHub, dann gehe auf Einstellungen (settings). Lade ein Bild von dir hoch. Ein Foto von deinem Gesicht bietet sich am Besten an. So sehen dich die anderen Camper im Chat, also mach dich schick. Du kannst deine Stadt und deinen Namen hinzufügen, falls du willst.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/pYk0wOk.gif", + "Ein GIF das dir zeigt wie man einem GitHub Repository einen Stern gibt", + "Öffne Free Code Camp's open-source Repository. Hier arbeitet das ehrenamtliche Team zusammen an Free Code Camp. Du kannst unserem Repositoy einen Stern geben. Das ist das GitHub Äquivalent für etwas \"liken\"", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Ein GIF das dir zeigt wie der unten stehende Link geklickt, auf den Chat weitergeleitet und mit dem \"Melde dich mit GitHub an\" Button man angemeldet wird. Dann kannst du auf das Textfeld klicken und eine Nachricht an andere Camper schicken", + "Jetzt, da du einen GitHub Account besitzt, kannst du unserem Hauptchat beitreten indem du dich mit GitHub anmeldest. Stell dich vor indem du \"Hello World\" schreibst. Erzähl den anderen Campern wie du Free Code Camp gefunden hast. Außerdem könntest du uns erzählen warum du programmieren lernen willst.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/Ecs5XAd.gif", + "Ein Gif das dir zeigt wie man den Einstellungsbutton im oberen rechten Eck anklickt und die Benachrichtigungseinstellungen ändert.", + "Unsere Chats sind sehr aktiv. Du solltest die Einstellungen ändern, damit du nur benachrichtigt wirst falls dich jemand erwähnt", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Ein GIF das dir zeigt wie man ein Profilbild von einem anderen User anklickt um eine private Nachricht zu versenden.", + "Sei dir bitte bewusst, dass alle unsere Chats komplett öffentlich sind. Falls du also sensible Informationen, wie zum Beispiel Emailadressen oder Telefonnummern, austauschen willst, verwende Privatnachrichten.", + "" + ], + [ + "//i.imgur.com/vDTMJSh.gif", + "Ein GIF das dir zeigt, dass du mithilfe mehrerer Tabs zwischen Aufgaben und dem Chat hin und her wechseln kannst", + "Halte den Chat offen, während du an den Aufgaben arbeitest. So kannst du jederzeit nach Hilfe fragen falls du nicht weiterkommst. Außerdem kannst du dich mit anderen Campern unterhalten falls du eine Pause brauchst.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Ein GIF das dir zeigt wie du den den untenstehenden Link klickst um die native Chatapp für deinen Computer herunterzuladen.", + "Du kannst dir auch die Chatapp für deinen Computer oder dein Smartphone herunterladen.", + "https://gitter.im/apps" + ] + ] + }, + "es": { + "title": "Crea una Cuenta de GitHub y Únete a nuestras Salas de Chat", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Una imagen de una de nuestras salas de chat en Gitter.", + "Ahora únete a las salas de chat de Free Code Camp. Puedes venir aquí en cualquier momento para charlar, hacer preguntas, o encontrar otro campista para programar juntos. Primero necesitarás una cuenta de GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Una imagen mostrándote como pulsar en el enlace inferior para ir a GitHub, llenar los campos necesarios y enviarlos.", + "Crea una cuenta en GitHub. Asegúrate de usar tu dirección de correo real - GitHub mantendrá esto en privado.", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Un gif mostrándote como pulsar en la imagen de perfil en la esquina superior derecha de GitHub. Sube una foto tuya o continuaras usando la imagen de píxeles generada automáticamente. Entonces llena los campos restantes y haz clic en enviar.", + "En la esquina superior derecha pulsa sobre la imagen de píxeles, entonces selecciona configuraciones. Sube una imagen tuya. Una foto de tu cara es mejor. Así es como tus compañeros campistas te verán en nuestras salas de chat, así que toma tu mejor ángulo. Puedes añadir tu ciudad y tu nombre si lo deseas.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/pYk0wOk.gif", + "Un gif mostrándote como puedes dar una estrella a un repositorio de GitHub.", + "Ve al repositorio de código libre de Free Code Camp y dale una \"estrella\". Las \"estrellas\" son el equivalente en GitHub de los \"me gusta\".", + "Si quieres, ve al repositorio de código libre de Free Code Camp.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Un gif mostrándote como pulsar en el enlace inferior para ir a nuestra sala de chat y pulsar en el botón de \"iniciar sesión con GitHub\". Entonces puedes pulsar en el próximo campo de texto y escribir un mensaje a tus compañeros campistas.", + "Ahora que tienes una cuenta de GitHub, puedes unirte a nuestro chat principal al iniciar sesión con GitHub. Preséntate diciendo \"Hello world!\" Cuéntales a los tus compañeros campistas como encontraste Free Code Camp. Además cuéntanos porque deseas aprender a programar.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/Ecs5XAd.gif", + "Un gif mostrándote como puedes pulsar en el botón de configuraciones en la esquina superior derecha y modificar tus configuraciones de notificaciones.", + "Nuestras salas de chat son extremadamente activas. Deberías cambiar tus configuraciones para ser notificado únicamente si alguien te menciona.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Un gif mostrándote como puedes pulsar en la imagen de perfil de un usuario para iniciar una conversación privada con ese usuario.", + "Por favor nota que todas nuestras salas de chat son visibles para el público. Si necesitas compartir información privada, como una dirección de correo o un número de teléfono, hazlo en un mensaje privado.", + "" + ], + [ + "//i.imgur.com/vDTMJSh.gif", + "Un gif mostrándote que puedes cambiar entre desafíos y nuestras salas de chat.", + "Mantén nuestra sala de chat abierta mientras trabajas en nuestros desafíos. De esta manera, puedes pedir ayuda si quedas atascado. Además puedes socializar con otros campistas cuando quieras tomar un descanso.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Un gif mostrándote como puedes pulsar abajo para descargar una aplicación de chat nativa para tu computadora.", + "También puedes descargar la aplicación de chat para tu computadora o teléfono móvil.", + "https://gitter.im/apps" + ] + ] + }, + "fr": { + "title": "Créer un compte GitHub et rejoignez nos Salons de chat", + "description": [ + [ + "//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.", + "" + ], + [ + "//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" + ], + [ + "//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" + ], + [ + "//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.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//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" + ], + [ + "//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.", + "" + ], + [ + "//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é.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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" + ] + ] + }, + "it": { + "title": "Crea un account GitHub e iscriviti alle nostre Chat Rooms", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Uno screenshot di una delle nostre chat rooms in Gitter.", + "Prima di iniziare a scrivere codice, entra nelle chat di Free Code Camp. Potrai venire qui in ogni momento della giornata per chiacchierare, fare domande, o trovare un altro camper per programmare in coppia. Prima di tutto avrai bisogno di un account GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Una gif che invita a cliccare sul link qui sotto per andare su GitHub. Compila i campi necessari e fare clic su Invia. Quindi controlla la tua casella di posta elettronica, riceverai una e-mail da GitHub per verificare il tuo account.", + "Clicca sul pulsante \" Apri link in una nuova scheda \" qui sotto per aprire GitHub. Crea un account compilando il modulo. Assicurati di utilizzare un indirizzo email reale - GitHub lo terrà privato. Poi controlla la tua casella di posta, riceverai un'e-mail da GitHub. Aprila e clicca il pulsante \"verificare l'indirizzo e-mail \" al suo interno
. Nota: Se disponi già di un account GitHub, è possibile saltare questo passaggio cliccando \"Apri link in una nuova scheda \", chiudendo poi la scheda appena aperta, quindi facendo clic su \"Vai al mio prossimo passo \". Abbiamo rimosso il pulsante \"Salta il passaggio \" perché molte persone lo premerebbero ripetutamente, saltando questi importanti passaggi. ", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Una gif che mostra come cliccare l'immagine del profilo nell'angolo in alto a destra di GitHub. Carica una foto di te altrimenti continuerai ad utilizzare la pixel art generata automaticamente. Poi, compila gli altri campi del modulo e fai clic su Invia.", + "Clicca sulla pixel art nell'angolo in alto a destra di GitHub, quindi seleziona impostazioni. Carica una foto di te stesso. Una foto del viso è la scelta migliore. Gli altri campers ti vedranno così nelle nostre chat rooms, quindi cerca di apparire al meglio . È anche possibile aggiungere la tua città e il tuo nome.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/pYk0wOk.gif", + "Una gif che mostra la repository GitHub di Free Code Camp.", + "Apri la repository open-source di Free Code Camp. E' qui che il nostro team di volontari collabora allo sviluppo di Free Code Camp.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Una gif che mostra come cliccare sul link qui sotto per andare alla nostra chat room e fare clic sul pulsante \" accedi con GitHub \". Quindi potrai cliccare nel campo di immissione testo e digitare un messaggio agli altri campers.", + "Ora che disponi di un account GitHub, puoi aggiungerti alla nostra chat principale effettuando il login con GitHub. Presentati dicendo \" Hello World! \"Dì ai campers come hai trovato Free Code Camp. Dicci anche perché vuoi imparare a programmare. ", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/Ecs5XAd.gif", + "Una gif che mostra come cliccare sul pulsante Impostazioni nell'angolo in alto a destra e modificare le impostazioni di notifica.", + "Le nostre chat rooms sono estremamente attive. È preferibile modificare le impostazioni in modo da essere notificati solo se qualcuno ti menziona direttamente.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Una gif che mostra come cliccare sull'immagine di un profilo utente per avviare una conversazione privata con quell'utente.", + "Ti preghiamo di notare che tutte le nostre chat rooms sono visibili al pubblico. Se hai bisogno di condividere le informazioni sensibili, come ad esempio un indirizzo email o il numero di telefono, fallo in un messaggio privato.", + "" + ], + [ + "//i.imgur.com/vDTMJSh.gif", + "Una gif che mostra come passare ripetutamente tra i problemi e le nostre chat rooms.", + "Mantieni aperta la nostra chat mentre lavori ai nostri problemi. In questo modo, potrai chiedere aiuto se ti troverai in ​​difficoltà. Potrai anche socializzare con gli altri campers, quando avrai voglia di prendere una pausa.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Una gif che mostra come è possibile fare clic sul link qui sotto per scaricare applicazione di chat nativa per il computer.", + "È anche possibile scaricare un'applicazione nativa per il computer o il telefono.", + "https://gitter.im/apps" + ] + ] + }, + "ja": { + "title": "Githubアカウントを作成し、チャットに参加しましょう", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Gitterチャットルームの一場面です。", + "コーディングを始める前に、Free Code Camp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に GitHub アカウントが必要です。", + "" + ], + [ + "//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" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "この gif は GitHub の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。", + "GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/pYk0wOk.gif", + "この gif は GitHub のレポジトリへのスターをつける方法です。", + "オープンソースの Free Code Camp のレポジトリを開いてください。これは私たちボランティアチームの協力者が Free Code Camp で作っているものです。", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。", + "あなたは GitHub のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって Free Code Camp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/Ecs5XAd.gif", + "この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。", + "私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。", + "私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。", + "" + ], + [ + "//i.imgur.com/vDTMJSh.gif", + "この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。", + "私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。", + "チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。", + "https://gitter.im/apps" + ] + ] + } + } }, { "id": "560add56cb82ac38a17513c0", @@ -751,42 +773,52 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Configura tu portafolio de código", - "descriptionEs": [ - [ - "//i.imgur.com/tP2ccTE.gif", - "Un gif mostrándote como puedes pulsar en tu imagen de perfil en la esquina superior derecha conectar tu portafolio y GitHub.", - "Dale un vistazo de tu portafolio de código. Pulsa en tu imagen en la esquina superior derecha. Para activar tu portafolio de código, necesitaras conectar tu cuenta de GitHub con Free Code Camp. Tu portafolio de código muestra tu progreso y cuantos Puntos Cafés tienes. Puedes obtener Puntos Cafés completando desafíos y ayudando a otros campistas en nuestras salas de chat. Si obtienes Puntos Cafés varios días consecutivos, obtendrás una racha.", - "" - ] - ], - "titleDe": "Erstelle dein Code Portfolio", - "descriptionDe": [ - [ - "//i.imgur.com/tP2ccTE.gif", - "Ein GIF das dir zeigt wie man sein Profilbild in der rechten oberen Ecke anklickt um zu deinem Code Portfolio zu gelangen und mit GitHub zu verbinden", - "Schau dir dein Code Portfolio an. Klick auf dein Profilbild in der rechten oberen Ecke. Um dein Portfolio zu aktivieren musst du deinen GitHub Account mit Free Code Camp verbinden. Dein Code Portfolio zeigt deinen Fortschritt und wieviele Brownie Punkte du hast. Du bekommst Brownie Punkte wenn du Aufgaben löst oder anderen Campern im Chat hilfst. Wenn du an mehreren Tagen in Folge Brownie Punkte erhälst bekommst du einen \"streak\"", - "" - ] - ], - "titleFr": "Configurer votre code portefeuille", - "descriptionFr": [ - [ - "//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.", - "" - ] - ], - "TitleIt": "Configura il tuo portfolio codice", - "DescriptionIt": [ - [ - "//i.imgur.com/tP2ccTE.gif", - "Una gif che mostra come cliccare l'immagine del profilo in alto a destra per collegare a GitHub il tuo portfolio codice.", - "Controlla il tuo portfolio codice. Clicca l'immagine in alto a destra. Per attivare il portfolio codice, è necessario collegare il tuo account GitHub con Free Code Camp. Il tuo portfolio codice mostra i tuoi progressi e quanti Brownie Points hai. È possibile ottenere i Brownie Points completando i problemi e aiutando altri campers nelle nostre chat rooms. Se si ricevono Brownie Points per diversi giorni di fila, si otterrà uno \"Streak\". ", - "" - ] - ] + "translations": { + "de": { + "title": "Erstelle dein Code Portfolio", + "description": [ + [ + "//i.imgur.com/tP2ccTE.gif", + "Ein GIF das dir zeigt wie man sein Profilbild in der rechten oberen Ecke anklickt um zu deinem Code Portfolio zu gelangen und mit GitHub zu verbinden", + "Schau dir dein Code Portfolio an. Klick auf dein Profilbild in der rechten oberen Ecke. Um dein Portfolio zu aktivieren musst du deinen GitHub Account mit Free Code Camp verbinden. Dein Code Portfolio zeigt deinen Fortschritt und wieviele Brownie Punkte du hast. Du bekommst Brownie Punkte wenn du Aufgaben löst oder anderen Campern im Chat hilfst. Wenn du an mehreren Tagen in Folge Brownie Punkte erhälst bekommst du einen \"streak\"", + "" + ] + ] + }, + "es": { + "title": "Configura tu portafolio de código", + "description": [ + [ + "//i.imgur.com/tP2ccTE.gif", + "Un gif mostrándote como puedes pulsar en tu imagen de perfil en la esquina superior derecha conectar tu portafolio y GitHub.", + "Dale un vistazo de tu portafolio de código. Pulsa en tu imagen en la esquina superior derecha. Para activar tu portafolio de código, necesitaras conectar tu cuenta de GitHub con Free Code Camp. Tu portafolio de código muestra tu progreso y cuantos Puntos Cafés tienes. Puedes obtener Puntos Cafés completando desafíos y ayudando a otros campistas en nuestras salas de chat. Si obtienes Puntos Cafés varios días consecutivos, obtendrás una racha.", + "" + ] + ] + }, + "fr": { + "title": "Configurer votre code portefeuille", + "description": [ + [ + "//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.", + "" + ] + ] + }, + "it": { + "title": "Configura il tuo portfolio codice", + "description": [ + [ + "//i.imgur.com/tP2ccTE.gif", + "Una gif che mostra come cliccare l'immagine del profilo in alto a destra per collegare a GitHub il tuo portfolio codice.", + "Controlla il tuo portfolio codice. Clicca l'immagine in alto a destra. Per attivare il portfolio codice, è necessario collegare il tuo account GitHub con Free Code Camp. Il tuo portfolio codice mostra i tuoi progressi e quanti Brownie Points hai. È possibile ottenere i Brownie Points completando i problemi e aiutando altri campers nelle nostre chat rooms. Se si ricevono Brownie Points per diversi giorni di fila, si otterrà uno \"Streak\". ", + "" + ] + ] + } + } }, { "id": "560add71cb82ac38a17513c2", @@ -809,51 +841,59 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Únete a un Campamento en Tu Ciudad", - "descriptionEs": [ - [ - "//i.imgur.com/NAOFJWN.jpg", - "Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.", - "Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.", - "" - ], - [ - "//i.imgur.com/fTFMjwf.gif", - "Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.", - "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.", - "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" - ] - ], - "titleDe": "Tritt einem Campsite in deiner Stadt bei", - "descriptionDe": [ - [ - "//i.imgur.com/XugIMb4.jpg", - "Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.", - "Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren", - "" - ], - [ - "//i.imgur.com/fTFMjwf.gif", - "Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.", - "Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen. Falls deine Stadt nicht auf der Liste ist, scrolle zum Ende des Wiki Artikels für eine Anleitung wie du ein Campsite für deine Stadt erstellst.", - "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" - ] - ], - "TitleIt": "Unisciti ad un gruppo Free Code Camp nella tua città", - "DescriptionIt": [ - [ - "//i.imgur.com/XugIMb4.jpg", - "Una foto di alcuni dei nostri camper riuniti in un bar locale.", - "È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo Free Code Camp vicino a te.", - "" - ], - [ - "//i.imgur.com/fTFMjwf.gif", - "Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.", - "Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ", - "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" - ] - ] + "translations": { + "de": { + "title": "Tritt einem Campsite in deiner Stadt bei", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.", + "Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren", + "" + ], + [ + "//i.imgur.com/fTFMjwf.gif", + "Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.", + "Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen. Falls deine Stadt nicht auf der Liste ist, scrolle zum Ende des Wiki Artikels für eine Anleitung wie du ein Campsite für deine Stadt erstellst.", + "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "es": { + "title": "Únete a un Campamento en Tu Ciudad", + "description": [ + [ + "//i.imgur.com/NAOFJWN.jpg", + "Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.", + "Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.", + "" + ], + [ + "//i.imgur.com/fTFMjwf.gif", + "Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.", + "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.", + "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "it": { + "title": "Unisciti ad un gruppo Free Code Camp nella tua città", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Una foto di alcuni dei nostri camper riuniti in un bar locale.", + "È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo Free Code Camp vicino a te.", + "" + ], + [ + "//i.imgur.com/fTFMjwf.gif", + "Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.", + "Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ", + "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + } + } }, { "id": "560adf65cb82ac38a17513c2", @@ -871,33 +911,41 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Lee noticias de codificación en nuestros canal de publicaciones Medium", - "descriptionEs": [ - [ - "//i.imgur.com/AZNLvEC.gif", - "Un gif mostrando cómo crear una cuenta en Medium.", - "Nuestra comunidad tiene un canal de publicaciones Medium, donde escribimos un montón de artículos sobre desarrollo de software. Ir al canal de publicaciones de Free Code Camp Medium y pulsar \"follow\". Nuestros campistas publican varios artículos cada semana. Si aún no dispones de una cuenta Medium, puedes seguir el enlace y registrarte usando una red social o ingresando un correo electrónico (enviarán un correo electrónico que debes abrirlo para crear tu cuenta.)", - "https://www.medium.com" - ] - ], - "titleFr": "Lisez les nouvelles de la programmation sur notre Publication Medium", - "descriptionFr": [ - [ - "//i.imgur.com/AZNLvEC.gif", - "Une gif montrant comment tu peux créer un compte sur Medium.", - "Notre communauté a une publication sur Medium où on écrit plusieurs articles sur la programmation. Tu peux visiter la publication de Free Code Camp sur Medium et cliquer sur \"follow\". Nos campers publient plusieurs articles chaque semaine. Si tu n’as pas encore un compte Medium, utilise le lien ci-dessous pour s’inscrire en utilisant un compte sur les médias sociaux ou en utilisant ton email (un email de confirmation sera envoyé à votre email pour terminer l’inscription). Une fois un sujet qui t’intéresse est choisi, tu peux continuer les étapes.", - "https://www.medium.com" - ] - ], - "titleDe": "Lese Programmier-Nachrichten auf unserer Medium Seite", - "descriptionDe": [ - [ - "//i.imgur.com/AZNLvEC.gif", - "Ein GIF, das dir zeigt, wie du einen Medium Account anlegen kannst.", - "Unsere Community hat eine Medium Seite, auf der wir viele Artikel über Software Entwicklung veröffentlichen. Kannst du auf die Medium Seite von Free Code Camp gehen und den \"follow\" Button klicken. Unsere Camper veröffentlichen jede Woche mehrere Artikel. Wenn du noch keinen Medium Account hast, kannst du dem Link folgen und dich entweder mit einem Account aus einem Social Network oder einer E-Mail Adresse (sie senden dir eine E-Mail, die du durchklicken kannst, um dir einen Account anzulegen.). Wenn du ein Thema ausgewählt hast, das dich interessiert, kannst du den weiteren Schritten folgen.", - "https://www.medium.com" - ] - ] + "translations": { + "de": { + "title": "Lese Programmier-Nachrichten auf unserer Medium Seite", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Ein GIF, das dir zeigt, wie du einen Medium Account anlegen kannst.", + "Unsere Community hat eine Medium Seite, auf der wir viele Artikel über Software Entwicklung veröffentlichen. Kannst du auf die Medium Seite von Free Code Camp gehen und den \"follow\" Button klicken. Unsere Camper veröffentlichen jede Woche mehrere Artikel. Wenn du noch keinen Medium Account hast, kannst du dem Link folgen und dich entweder mit einem Account aus einem Social Network oder einer E-Mail Adresse (sie senden dir eine E-Mail, die du durchklicken kannst, um dir einen Account anzulegen.). Wenn du ein Thema ausgewählt hast, das dich interessiert, kannst du den weiteren Schritten folgen.", + "https://www.medium.com" + ] + ] + }, + "es": { + "title": "Lee noticias de codificación en nuestros canal de publicaciones Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Un gif mostrando cómo crear una cuenta en Medium.", + "Nuestra comunidad tiene un canal de publicaciones Medium, donde escribimos un montón de artículos sobre desarrollo de software. Ir al canal de publicaciones de Free Code Camp Medium y pulsar \"follow\". Nuestros campistas publican varios artículos cada semana. Si aún no dispones de una cuenta Medium, puedes seguir el enlace y registrarte usando una red social o ingresando un correo electrónico (enviarán un correo electrónico que debes abrirlo para crear tu cuenta.)", + "https://www.medium.com" + ] + ] + }, + "fr": { + "title": "Lisez les nouvelles de la programmation sur notre Publication Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Une gif montrant comment tu peux créer un compte sur Medium.", + "Notre communauté a une publication sur Medium où on écrit plusieurs articles sur la programmation. Tu peux visiter la publication de Free Code Camp sur Medium et cliquer sur \"follow\". Nos campers publient plusieurs articles chaque semaine. Si tu n’as pas encore un compte Medium, utilise le lien ci-dessous pour s’inscrire en utilisant un compte sur les médias sociaux ou en utilisant ton email (un email de confirmation sera envoyé à votre email pour terminer l’inscription). Une fois un sujet qui t’intéresse est choisi, tu peux continuer les étapes.", + "https://www.medium.com" + ] + ] + } + } }, { "id": "560add8ccb82ac38a17513c4", @@ -956,211 +1004,220 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleFr": "Apprenez quoi faire quand vous êtes bloqué ?", - "descriptionFr": [ - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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" - ], - [ - "//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": [ - [ - "//i.imgur.com/lzKvwU2.jpg", - "El texto \"Programar es difícil.\"", - "Programar es difícil. Quedarás atascado. Incluso programadores experimentados quedan atascados. La clave es saber como desatascarse.", - "" - ], - [ - "//i.imgur.com/sfsidp6.jpg", - "El texto \"Volverse bueno programando requiere tiempo.\"", - "Volverse bueno programando requiere tiempo. No esperarías derrotar a un maestro del ajedrez después de jugar por 3 meses. No esperes crear el próximo Facebook después de programar 3 meses.", - "" - ], - [ - "//i.imgur.com/EoTfOyC.jpg", - "Una imagen de algunos de nuestros campistas programando juntos en Montreal.", - "Sigue practicando programación cada día y sal con otras personas que programen, y te volverás un programador listo para un trabajo.", - "" - ], - [ - "//i.imgur.com/EWWZBag.jpg", - "Una imagen con el texto \"1. Lee el error 2. Busca en Google 3. Pide ayuda.", - "En cualquier momento en el que te quedes atascado o no sepas que hacer a continuación: Lee-Busca-Pregunta.", - "" - ], - [ - "//i.imgur.com/99BfAcK.jpg", - "Una imagen mostrando la documentación de jQuery", - "Primero, lee la documentación o el mensaje de error. Una habilidad clave que los buenos programadores poseen es el poder interpretar y seguir instrucciones.", - "" - ], - [ - "//i.imgur.com/GxvrsFb.gif", - "Un gif mostrándote como hacer una búsqueda avanzada en Google. Primero, escribimos la consulta \"jquery no corre cuando mi página carga\". Entonces damos clic en el botón de herramientas y cambiamos la selección de \"En cualquier momento\" a \"en el último año\". Entonces hacemos clic en un resultado o leemos a través del artículo y encontramos nuestra respuesta.", - "Si eso no ayudo, busca en Google. Realizar buenas búsquedas en Google requiere mucha práctica. Cuando buscas en Google, usualmente querrás incluir el lenguaje o entorno (framework) que estás usando. También querrás limitar los resultados a un período reciente.", - "" - ], - [ - "//i.imgur.com/LZYU7p2.gif", - "Un gif mostrándonos como seguir el enlace inferior para ir a nuestra sala de chat de ayuda y preguntar \"jquery no corre cuando mi página carga\".", - "Si eso no te ayudó, pregúntale a tus amigos. Si tienes problemas, puedes preguntar a tus compañeros campistas en nuestra sala de chat.", - "https://gitter.im/FreeCodeCamp/Help" - ], - [ - "//i.imgur.com/ZRgXraT.gif", - "Un gif mostrándonos nuestro mapa de desafíos.", - "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\".", - "" - ] - ], - "titleDe": "Lerne was du tun kannst falls du nicht weiterkommst", - "descriptionDe": [ - [ - "//i.imgur.com/lzKvwU2.jpg", - "Der Text \"Coding is hard.\"", - "Programmieren ist hart. Du wirst zeitweise nicht weiterkommen. Sogar erfahrene Programmierer bleiben manchmal hängen. Der Schlüssel zum Erfolg ist zu wissen wie man in so einer Situation weitermacht", - "" - ], - [ - "//i.imgur.com/sfsidp6.jpg", - "Der Text \"It takes time to get good at coding.\"", - "Es dauert seine Zeit bis man gut programmieren kann. Du erwartest auch nicht einen Schachmeister nach 3 Monaten Übung zu schlagen. Erwarte also auch nicht das nächste Facebook nach 3 Monaten zu programmieren", - "" - ], - [ - "//i.imgur.com/EoTfOyC.jpg", - "Ein Foto von einigen Campern die gemeinsam in Montreal programmieren.", - "Übe programmieren jeden Tag und triff dich mit anderen Leuten die programmieren, dann wirst du bereit für einen Programmierjob.", - "" - ], - [ - "//i.imgur.com/EWWZBag.jpg", - "Ein Bild mit dem Text \"1. Read the error 2. Search Google 3. Ask for help.", - "Wann immer du nicht weiterkommst oder nicht weißt was du als nächstes tun sollst: Lesen-Suchen-Fragen", - "" - ], - [ - "//i.imgur.com/99BfAcK.jpg", - "Ein Bild von der jQuery Dokumentation", - "Ließ zuerst die Dokumentation oder Fehlermeldung. Eine Schlüsselfähigkeit von guten Programmierern ist die ist die Fähigkeit zu interpretieren und dann Anweisungen zu folgen", - "" - ], - [ - "//i.imgur.com/GxvrsFb.gif", - "Ein GIF das eine erweiterte Google Suche zeigt. Zuerst wird die Suchanfrage \"jquery doesn't run when my page loads\" eingegeben. Dann wird in den Suchoptionen die Auswahl \"Beliebige Zeit\" zu \"Letztes Jahr\" geändert. Dann wird auf ein Ergebnis geklickt, der Artikel gelesen und die Antwort gefunden", - "Wenn das nicht geholfen hat, durchsuche Google. Gute Google Abfragen brauchen einiges an Übung. Wenn du Google durchsuchst, wirst du normalerweise die Programmiersprache oder das Framework, das du verwendest, inkludieren. Außerdem solltest du die Ergebnisse auf einen aktuellen Zeitraum limitieren.", - "" - ], - [ - "//i.imgur.com/LZYU7p2.gif", - "Ein GIF das zeigt wie der untenstehende Link aufgerufen wird um in den \"Help Chat\" zu kommen um dort zu fragen: \"jquery doesn't run when my page loads\".", - "Falls das nicht geholfen hat, frag deine Freunde. Wenn du Probleme hast kannst du die anderen Camper in unserem Hilfe Chat fragen.", - "https://gitter.im/FreeCodeCamp/Help" - ], - [ - "//i.imgur.com/ZRgXraT.gif", - "Ein GIF das zeigt wie durch die Challenge Übersicht gescrollt wird", - "Jetzt bist du bereit mit Programmieren zu starten. Der \"Map\" Button in der rechten oberen Ecke zeigt dir deine Challenge Übersicht. Wir empfehlen dir diese von Oben nach Unten in einer angemessenen Geschwindikeit durchzuführen. Unsere Open-Source Gemeinschaft ist permanent am Verbessern der Challenges, wundere dich also nicht falls diese sich ändern oder verschieben. Hab keine Angst davor zurück zu gehen - schau nur dass du vorankommst. Du kommst immer zu deiner aktuellsten Aufgabe indem du den \"Learn\" Button drückst.", - "" - ] - ], - "TitleIt": "Impara Cosa fare se ti trovi in ​​difficoltà", - "DescriptionIt": [ - [ - "//i.imgur.com/lzKvwU2.jpg", - "Il testo \" Programmare è difficile. \"", - "Programmare è difficile. Prima o poi rimarrai bloccato. Succede anche ai programmatori esperti. La chiave è sapere come uscirne.", - "" - ], - [ - "//i.imgur.com/sfsidp6.jpg", - "Il testo \" Ci vuole tempo per diventare bravi sviluppatori. \"", - "Ci vuole tempo per diventare bravi sviluppatori. Non ti aspetteresti di battere un campione di scacchi dopo aver giocato per 3 mesi. Non aspettarti di realizzare il prossimo Facebook dopo aver programmato per 3 mesi.", - "" - ], - [ - "//i.imgur.com/EoTfOyC.jpg", - "Un'immagine di alcuni dei nostri campers che programmano insieme a Montreal.", - "Continua ad esercitarti a programmare tutti i giorni e discuti con altre persone che programmano, e potrai diventare uno sviluppatore pronto per il lavoro.", - "" - ], - [ - "//i.imgur.com/EWWZBag.jpg", - "Un'immagine con il testo \" 1. Leggi l'errore 2. Cerca su Google 3. Chiedi aiuto. ", - "Ogni volta che ti trovi in ​​difficoltà o non sai cosa fare. Leggi-Cerca-Chiedi", - "" - ], - [ - "//i.imgur.com/99BfAcK.jpg", - "Un'immagine che mostra la documentazione di jQuery", - "Innanzitutto, leggi la documentazione o il messaggio di errore. Una competenza chiave che i buoni programmatori hanno è la capacità di interpretare e seguire le istruzioni.", - "" - ], - [ - "//i.imgur.com/GxvrsFb.gif", - "Una gif che mostra come fare una ricerca avanzata su Google. Prima di tutto, si inserisce la query \"jquery non viene eseguito quando la mia pagina si carica\". Poi si clicca sul pulsante strumenti di ricerca e si cambia l'opzione \"Qualsiasi data\" selezionando a \"Ultimo Anno\". Poi si clicca su un risultato, si legge l'articolo e troviamo la nostra risposta.", - "Se ciò non è stato d'aiuto, cerca su Google. Ci vuole un sacco di pratica per formulare delle buone query. Quando si esegue una ricerca su Google, di solito si preferisce includere il linguaggio o il framework che si sta utilizzando. Inoltre è meglio limitare i risultati ad un periodo recente.", - "" - ], - [ - "//i.imgur.com/LZYU7p2.gif", - "Una gif che mostra come seguire il link qui sotto per andare alla chat room di supporto e chiedere \"jquery non viene eseguito quando la mia pagina si carica\".", - "Se anche questo non ha aiutato, chiedi ai tuoi amici. In caso di problemi, puoi chiedere ai tuoi amici campers nelle nostre chat rooms di supporto.", - "https://gitter.im/FreeCodeCamp/Help" - ], - [ - "//i.imgur.com/ZRgXraT.gif", - "Una gif che mostra come scorrere la nostra mappa di problemi.", - "Ora sei pronto per iniziare a scrivere codice. Il tasto \"Mappa\" in alto a destra ti mostrerà la nostra mappa dei problemi. Ti consigliamo di completarli dall'alto verso il basso, ad un ritmo sostenibile. La nostra comunità open source sta migliorando costantemente i nostri problemi, quindi non stupirti se cambiano o se vengono spostati. Non preoccuparti di tornare indietro - continua ad andare avanti.", - "" - ] - ] - + "translations": { + "de": { + "title": "Lerne was du tun kannst falls du nicht weiterkommst", + "description": [ + [ + "//i.imgur.com/lzKvwU2.jpg", + "Der Text \"Coding is hard.\"", + "Programmieren ist hart. Du wirst zeitweise nicht weiterkommen. Sogar erfahrene Programmierer bleiben manchmal hängen. Der Schlüssel zum Erfolg ist zu wissen wie man in so einer Situation weitermacht", + "" + ], + [ + "//i.imgur.com/sfsidp6.jpg", + "Der Text \"It takes time to get good at coding.\"", + "Es dauert seine Zeit bis man gut programmieren kann. Du erwartest auch nicht einen Schachmeister nach 3 Monaten Übung zu schlagen. Erwarte also auch nicht das nächste Facebook nach 3 Monaten zu programmieren", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Ein Foto von einigen Campern die gemeinsam in Montreal programmieren.", + "Übe programmieren jeden Tag und triff dich mit anderen Leuten die programmieren, dann wirst du bereit für einen Programmierjob.", + "" + ], + [ + "//i.imgur.com/EWWZBag.jpg", + "Ein Bild mit dem Text \"1. Read the error 2. Search Google 3. Ask for help.", + "Wann immer du nicht weiterkommst oder nicht weißt was du als nächstes tun sollst: Lesen-Suchen-Fragen", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Ein Bild von der jQuery Dokumentation", + "Ließ zuerst die Dokumentation oder Fehlermeldung. Eine Schlüsselfähigkeit von guten Programmierern ist die ist die Fähigkeit zu interpretieren und dann Anweisungen zu folgen", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Ein GIF das eine erweiterte Google Suche zeigt. Zuerst wird die Suchanfrage \"jquery doesn't run when my page loads\" eingegeben. Dann wird in den Suchoptionen die Auswahl \"Beliebige Zeit\" zu \"Letztes Jahr\" geändert. Dann wird auf ein Ergebnis geklickt, der Artikel gelesen und die Antwort gefunden", + "Wenn das nicht geholfen hat, durchsuche Google. Gute Google Abfragen brauchen einiges an Übung. Wenn du Google durchsuchst, wirst du normalerweise die Programmiersprache oder das Framework, das du verwendest, inkludieren. Außerdem solltest du die Ergebnisse auf einen aktuellen Zeitraum limitieren.", + "" + ], + [ + "//i.imgur.com/LZYU7p2.gif", + "Ein GIF das zeigt wie der untenstehende Link aufgerufen wird um in den \"Help Chat\" zu kommen um dort zu fragen: \"jquery doesn't run when my page loads\".", + "Falls das nicht geholfen hat, frag deine Freunde. Wenn du Probleme hast kannst du die anderen Camper in unserem Hilfe Chat fragen.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/ZRgXraT.gif", + "Ein GIF das zeigt wie durch die Challenge Übersicht gescrollt wird", + "Jetzt bist du bereit mit Programmieren zu starten. Der \"Map\" Button in der rechten oberen Ecke zeigt dir deine Challenge Übersicht. Wir empfehlen dir diese von Oben nach Unten in einer angemessenen Geschwindikeit durchzuführen. Unsere Open-Source Gemeinschaft ist permanent am Verbessern der Challenges, wundere dich also nicht falls diese sich ändern oder verschieben. Hab keine Angst davor zurück zu gehen - schau nur dass du vorankommst. Du kommst immer zu deiner aktuellsten Aufgabe indem du den \"Learn\" Button drückst.", + "" + ] + ] + }, + "es": { + "title": "Aprende que hacer si te quedas atascado", + "description": [ + [ + "//i.imgur.com/lzKvwU2.jpg", + "El texto \"Programar es difícil.\"", + "Programar es difícil. Quedarás atascado. Incluso programadores experimentados quedan atascados. La clave es saber como desatascarse.", + "" + ], + [ + "//i.imgur.com/sfsidp6.jpg", + "El texto \"Volverse bueno programando requiere tiempo.\"", + "Volverse bueno programando requiere tiempo. No esperarías derrotar a un maestro del ajedrez después de jugar por 3 meses. No esperes crear el próximo Facebook después de programar 3 meses.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Una imagen de algunos de nuestros campistas programando juntos en Montreal.", + "Sigue practicando programación cada día y sal con otras personas que programen, y te volverás un programador listo para un trabajo.", + "" + ], + [ + "//i.imgur.com/EWWZBag.jpg", + "Una imagen con el texto \"1. Lee el error 2. Busca en Google 3. Pide ayuda.", + "En cualquier momento en el que te quedes atascado o no sepas que hacer a continuación: Lee-Busca-Pregunta.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Una imagen mostrando la documentación de jQuery", + "Primero, lee la documentación o el mensaje de error. Una habilidad clave que los buenos programadores poseen es el poder interpretar y seguir instrucciones.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Un gif mostrándote como hacer una búsqueda avanzada en Google. Primero, escribimos la consulta \"jquery no corre cuando mi página carga\". Entonces damos clic en el botón de herramientas y cambiamos la selección de \"En cualquier momento\" a \"en el último año\". Entonces hacemos clic en un resultado o leemos a través del artículo y encontramos nuestra respuesta.", + "Si eso no ayudo, busca en Google. Realizar buenas búsquedas en Google requiere mucha práctica. Cuando buscas en Google, usualmente querrás incluir el lenguaje o entorno (framework) que estás usando. También querrás limitar los resultados a un período reciente.", + "" + ], + [ + "//i.imgur.com/LZYU7p2.gif", + "Un gif mostrándonos como seguir el enlace inferior para ir a nuestra sala de chat de ayuda y preguntar \"jquery no corre cuando mi página carga\".", + "Si eso no te ayudó, pregúntale a tus amigos. Si tienes problemas, puedes preguntar a tus compañeros campistas en nuestra sala de chat.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/ZRgXraT.gif", + "Un gif mostrándonos nuestro mapa de desafíos.", + "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\".", + "" + ] + ] + }, + "fr": { + "title": "Apprenez quoi faire quand vous êtes bloqué ?", + "description": [ + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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" + ], + [ + "//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\".", + "" + ] + ] + }, + "it": { + "title": "Impara Cosa fare se ti trovi in ​​difficoltà", + "description": [ + [ + "//i.imgur.com/lzKvwU2.jpg", + "Il testo \" Programmare è difficile. \"", + "Programmare è difficile. Prima o poi rimarrai bloccato. Succede anche ai programmatori esperti. La chiave è sapere come uscirne.", + "" + ], + [ + "//i.imgur.com/sfsidp6.jpg", + "Il testo \" Ci vuole tempo per diventare bravi sviluppatori. \"", + "Ci vuole tempo per diventare bravi sviluppatori. Non ti aspetteresti di battere un campione di scacchi dopo aver giocato per 3 mesi. Non aspettarti di realizzare il prossimo Facebook dopo aver programmato per 3 mesi.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Un'immagine di alcuni dei nostri campers che programmano insieme a Montreal.", + "Continua ad esercitarti a programmare tutti i giorni e discuti con altre persone che programmano, e potrai diventare uno sviluppatore pronto per il lavoro.", + "" + ], + [ + "//i.imgur.com/EWWZBag.jpg", + "Un'immagine con il testo \" 1. Leggi l'errore 2. Cerca su Google 3. Chiedi aiuto. ", + "Ogni volta che ti trovi in ​​difficoltà o non sai cosa fare. Leggi-Cerca-Chiedi", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Un'immagine che mostra la documentazione di jQuery", + "Innanzitutto, leggi la documentazione o il messaggio di errore. Una competenza chiave che i buoni programmatori hanno è la capacità di interpretare e seguire le istruzioni.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Una gif che mostra come fare una ricerca avanzata su Google. Prima di tutto, si inserisce la query \"jquery non viene eseguito quando la mia pagina si carica\". Poi si clicca sul pulsante strumenti di ricerca e si cambia l'opzione \"Qualsiasi data\" selezionando a \"Ultimo Anno\". Poi si clicca su un risultato, si legge l'articolo e troviamo la nostra risposta.", + "Se ciò non è stato d'aiuto, cerca su Google. Ci vuole un sacco di pratica per formulare delle buone query. Quando si esegue una ricerca su Google, di solito si preferisce includere il linguaggio o il framework che si sta utilizzando. Inoltre è meglio limitare i risultati ad un periodo recente.", + "" + ], + [ + "//i.imgur.com/LZYU7p2.gif", + "Una gif che mostra come seguire il link qui sotto per andare alla chat room di supporto e chiedere \"jquery non viene eseguito quando la mia pagina si carica\".", + "Se anche questo non ha aiutato, chiedi ai tuoi amici. In caso di problemi, puoi chiedere ai tuoi amici campers nelle nostre chat rooms di supporto.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/ZRgXraT.gif", + "Una gif che mostra come scorrere la nostra mappa di problemi.", + "Ora sei pronto per iniziare a scrivere codice. Il tasto \"Mappa\" in alto a destra ti mostrerà la nostra mappa dei problemi. Ti consigliamo di completarli dall'alto verso il basso, ad un ritmo sostenibile. La nostra comunità open source sta migliorando costantemente i nostri problemi, quindi non stupirti se cambiano o se vengono spostati. Non preoccuparti di tornare indietro - continua ad andare avanti.", + "" + ] + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json b/seed/challenges/01-front-end-development-certification/advanced-bonfires.json index 3ed7bf6ff8..8f39b42037 100644 --- a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json +++ b/seed/challenges/01-front-end-development-certification/advanced-bonfires.json @@ -61,22 +61,28 @@ "RegExp" ], "challengeType": 5, - "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:", - "
555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555
", - "Para esta prueba se te presentará una cadena de texto como por ejemplo: 800-692-7753 o 8oo-six427676;laskdjf. Tu trabajo consiste en validar o rechazar el número telefónico tomando como base cualquier combinación de los formatos anteriormente presentados. El código de área es requrido. Si el código de país es provisto, debes confirmar que este es 1. La función debe devolver true si la cadena de texto es un número telefónico válido en los EEUU; de lo contrario, debe devolver false.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Verifica i numeri telefonici degli Stati Uniti", - "descriptionIt": [ - "Ritorna true se la stringa passata come argomento è un numero valido negli Stati Uniti.", - "L'utente può digitare qualunque stringa nel campo di inserimento, purchè sia un numero di telefono valido negli Stati Uniti. Qui sotto alcuni esempi di numeri di telefono validi negli Stati Uniti (fai riferimento ai test per le altre varianti):", - "
555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555
", - "In questo problema ti saranno presentate delle stringe come 800-692-7753 o 8oo-six427676;laskdjf. Il tuo obiettivo è di validare o rigettare il numero di telefono basato su una qualunque combinazione dei formati specificati sopra. Il prefisso di zona è obbligatorio. Se il prefisso nazionale è presente, devi confermare che corrisponda a 1. Ritorna true se la stringa è un numero di telefono valido negli Stati Uniti; altrimenti ritorna false.", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Valida Números Telefónicos de los EEUU", + "description": [ + "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:", + "
555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555
", + "Para esta prueba se te presentará una cadena de texto como por ejemplo: 800-692-7753 o 8oo-six427676;laskdjf. Tu trabajo consiste en validar o rechazar el número telefónico tomando como base cualquier combinación de los formatos anteriormente presentados. El código de área es requrido. Si el código de país es provisto, debes confirmar que este es 1. La función debe devolver true si la cadena de texto es un número telefónico válido en los EEUU; de lo contrario, debe devolver false.", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Verifica i numeri telefonici degli Stati Uniti", + "description": [ + "Ritorna true se la stringa passata come argomento è un numero valido negli Stati Uniti.", + "L'utente può digitare qualunque stringa nel campo di inserimento, purchè sia un numero di telefono valido negli Stati Uniti. Qui sotto alcuni esempi di numeri di telefono validi negli Stati Uniti (fai riferimento ai test per le altre varianti):", + "
555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555
", + "In questo problema ti saranno presentate delle stringe come 800-692-7753 o 8oo-six427676;laskdjf. Il tuo obiettivo è di validare o rigettare il numero di telefono basato su una qualunque combinazione dei formati specificati sopra. Il prefisso di zona è obbligatorio. Se il prefisso nazionale è presente, devi confermare che corrisponda a 1. Ritorna true se la stringa è un numero di telefono valido negli Stati Uniti; altrimenti ritorna false.", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a3f503de51cf954ede28891d", @@ -114,18 +120,24 @@ "Symmetric Difference" ], "challengeType": 5, - "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.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Differenza simmetrica", - "descriptionIt": [ - "Crea una funzione che accetti due o più array e che ritorni un array contenente la differenza simmetrica (△ o ⊕) degli stessi.", - "Dati due insiemi (per esempio l'insieme A = {1, 2, 3} e l'insieme B = {2, 3, 4}, il termine matematico \"differenza simmetrica\" di due insiemi è l'insieme degli elementi che sono in almeno uno dei due insiemi, ma non in entrambi (A △ B = C = {1, 4}). Per ogni differenza simmetrica aggiuntiva che fai (per esempio su un insieme D = {2, 3}), devi prendere l'insieme degli elementi che sono in almeno uno dei due insiemi ma non in entrambi (C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}).", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Diferencia simétrica", + "description": [ + "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.", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Differenza simmetrica", + "description": [ + "Crea una funzione che accetti due o più array e che ritorni un array contenente la differenza simmetrica (△ o ⊕) degli stessi.", + "Dati due insiemi (per esempio l'insieme A = {1, 2, 3} e l'insieme B = {2, 3, 4}, il termine matematico \"differenza simmetrica\" di due insiemi è l'insieme degli elementi che sono in almeno uno dei due insiemi, ma non in entrambi (A △ B = C = {1, 4}). Per ogni differenza simmetrica aggiuntiva che fai (per esempio su un insieme D = {2, 3}), devi prendere l'insieme degli elementi che sono in almeno uno dei due insiemi ma non in entrambi (C △ D = {1, 4} △ {2, 3} = {1, 2, 3, 4}).", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "aa2e6f85cab2ab736c9a9b24", @@ -175,22 +187,28 @@ "Global Object" ], "challengeType": 5, - "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", - "La función debe devolver la cadena de texto \"Insufficient Funds\" si el cid es menor al cambio requerido. También debe devolver \"Closed\" si el cid es igual al cambio", - "De no ser el caso, devuelve el cambio en monedas y billetes, ordenados de mayor a menor denominación.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Cambio esatto", - "descriptionIt": [ - "Scrivi una funzione che simuli un registro di cassa chiamata checkCashRegister() che accetti il prezzo degli articoli come primo argomento (price), la somma pagata (cash), e la somma disponibile nel registratore di cassa (cid) come terzo argomento.", - "cid è un array a due dimensioni che contiene la quantità di monete e banconote disponibili.", - "Ritorna la stringa \"Insufficient Funds\" se la quantità di denaro disponibile nel registratore di cassa non è abbastanza per restituire il resto. Ritorna la stringa \"Closed\" se il denaro disponibile è esattamente uguale al resto.", - "Altrimenti, ritorna il resto in monete e banconote, ordinate da quelle con valore maggiore a quelle con valore minore.", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Cambio exacto", + "description": [ + "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", + "La función debe devolver la cadena de texto \"Insufficient Funds\" si el cid es menor al cambio requerido. También debe devolver \"Closed\" si el cid es igual al cambio", + "De no ser el caso, devuelve el cambio en monedas y billetes, ordenados de mayor a menor denominación.", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Cambio esatto", + "description": [ + "Scrivi una funzione che simuli un registro di cassa chiamata checkCashRegister() che accetti il prezzo degli articoli come primo argomento (price), la somma pagata (cash), e la somma disponibile nel registratore di cassa (cid) come terzo argomento.", + "cid è un array a due dimensioni che contiene la quantità di monete e banconote disponibili.", + "Ritorna la stringa \"Insufficient Funds\" se la quantità di denaro disponibile nel registratore di cassa non è abbastanza per restituire il resto. Ritorna la stringa \"Closed\" se il denaro disponibile è esattamente uguale al resto.", + "Altrimenti, ritorna il resto in monete e banconote, ordinate da quelle con valore maggiore a quelle con valore minore.", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a56138aff60341a09ed6c480", @@ -238,16 +256,22 @@ "Global Array Object" ], "challengeType": 5, - "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." - ], - "titleIt": "Aggiornamento dell'inventario", - "descriptionIt": [ - "Confronta e aggiorna l'inventario, contenuto in un array bidimensionale, con un secondo array bidimensionale relativo ad una nuova consegna. Aggiorna le quantità disponibili in inventario (dentro arr1). Se uno degli articoli non è presente nell'inventario, aggiungi allo stesso il nuovo articolo e la sua quantità. Ritorna un array con l'inventario aggiornato, che deve essere ordinato alfabeticamente per articolo.", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Actualizando el inventario", + "description": [ + "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." + ] + }, + "it": { + "title": "Aggiornamento dell'inventario", + "description": [ + "Confronta e aggiorna l'inventario, contenuto in un array bidimensionale, con un secondo array bidimensionale relativo ad una nuova consegna. Aggiorna le quantità disponibili in inventario (dentro arr1). Se uno degli articoli non è presente nell'inventario, aggiungi allo stesso il nuovo articolo e la sua quantità. Ritorna un array con l'inventario aggiornato, che deve essere ordinato alfabeticamente per articolo.", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a7bf700cd123b9a54eef01d5", @@ -285,18 +309,24 @@ "RegExp" ], "challengeType": 5, - "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').", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Niente ripetizioni, per favore", - "descriptionIt": [ - "Ritorna il numero totale di permutazioni della stringa passata che non hanno lettere consecutive riptetute. Assumi che tutti i caratteri nella stringa passata siano unici.", - "Per esempio, aab deve ritornare 2, perchè la stringa ha 6 permutazioni possibili in totale (aab, aab, aba, aba, baa, baa), ma solo 2 di loro (aba e aba) non contengono la stessa lettera (in questo caso a ripetuta).", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Sin repeticiones, por favor", + "description": [ + "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').", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Niente ripetizioni, per favore", + "description": [ + "Ritorna il numero totale di permutazioni della stringa passata che non hanno lettere consecutive riptetute. Assumi che tutti i caratteri nella stringa passata siano unici.", + "Per esempio, aab deve ritornare 2, perchè la stringa ha 6 permutazioni possibili in totale (aab, aab, aba, aba, baa, baa), ma solo 2 di loro (aba e aba) non contengono la stessa lettera (in questo caso a ripetuta).", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a19f0fbe1872186acd434d5a", @@ -338,26 +368,32 @@ "parseInt()" ], "challengeType": 5, - "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", - "", - "La presentación amigable debería usar nombres de meses en inglés en lugar de números y fechas ordinales en lugar de cardinales (\"1st\" en lugar de \"1\").", - "No presentes información redundante o que pueda ser inferida por el usuario: si el rango de fechas termina en menos de un año desde la fecha incial, no presentes el año final. Si el rango termina en el mismo mes de la fecha inicial, no presentes ni el mes ni el año final.", - "Además, si el rango de fechas comienza en el año actual y termina en un año o menos, no debes presentar el año al comienzo del rango amigable." - ], - "titleIt": "Intervalli di date leggibili", - "descriptionIt": [ - "Converti un intervallo di date composto da due date in formato YYYY-MM-DD in un formato più leggibile.", - "Il formato leggibile deve usare i nomi dei mesi (in inglese) e le i numeri dei giorni in formato ordinale invece che cardinale (sempre in inglese. Ad esempio 1st invece di 1).", - "Non mostrare informazioni ridondanti o che siano ricavabili dall'utente: se l'intervallo di date termina in meno di un anno da quando inizia, non mostrare l'anno in cui l'intervallo termina.", - "In più, se l'intervallo di date incomincia nell'anno corrente (siamo nell'anno 2016) e finisce nel giro di un anno, l'anno non deve essere mostrato all'inizio del risultato.", - "Se l'intervallo di date finisce nello stesso mese in cui incomincia, non mostrare l'anno di termine nè il mese.", - "Esempi:", - "makeFriendlyDates([\"2016-07-01\", \"2016-07-04\"]) deve ritornare [\"July 1st\",\"4th\"]", - "makeFriendlyDates([\"2016-07-01\", \"2018-07-04\"]) deve ritornare [\"July 1st, 2016\", \"July 4th, 2018\"].", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Rangos de fechas amigables", + "description": [ + "Convierte un rango de fecha que conste de dos fechas en formato AAAA-MM-DD a un formato más legible", + "", + "La presentación amigable debería usar nombres de meses en inglés en lugar de números y fechas ordinales en lugar de cardinales (\"1st\" en lugar de \"1\").", + "No presentes información redundante o que pueda ser inferida por el usuario: si el rango de fechas termina en menos de un año desde la fecha incial, no presentes el año final. Si el rango termina en el mismo mes de la fecha inicial, no presentes ni el mes ni el año final.", + "Además, si el rango de fechas comienza en el año actual y termina en un año o menos, no debes presentar el año al comienzo del rango amigable." + ] + }, + "it": { + "title": "Intervalli di date leggibili", + "description": [ + "Converti un intervallo di date composto da due date in formato YYYY-MM-DD in un formato più leggibile.", + "Il formato leggibile deve usare i nomi dei mesi (in inglese) e le i numeri dei giorni in formato ordinale invece che cardinale (sempre in inglese. Ad esempio 1st invece di 1).", + "Non mostrare informazioni ridondanti o che siano ricavabili dall'utente: se l'intervallo di date termina in meno di un anno da quando inizia, non mostrare l'anno in cui l'intervallo termina.", + "In più, se l'intervallo di date incomincia nell'anno corrente (siamo nell'anno 2016) e finisce nel giro di un anno, l'anno non deve essere mostrato all'inizio del risultato.", + "Se l'intervallo di date finisce nello stesso mese in cui incomincia, non mostrare l'anno di termine nè il mese.", + "Esempi:", + "makeFriendlyDates([\"2016-07-01\", \"2016-07-04\"]) deve ritornare [\"July 1st\",\"4th\"]", + "makeFriendlyDates([\"2016-07-01\", \"2018-07-04\"]) deve ritornare [\"July 1st, 2016\", \"July 4th, 2018\"].", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a2f1d72d9b908d0bd72bb9f6", @@ -401,24 +437,30 @@ "Details of the Object Model" ], "challengeType": 5, - "titleEs": "Crea una Persona", - "descriptionEs": [ - "Completa el constructor de objetos con los métodos especificados a continuación:", - "
getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)
", - "Ejecuta las pruebas para ver el resultado esperado de cada método.", - "Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.", - "Estos métodos deben ser el único medio para interactuar con el objeto.", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Crea una Persona", - "descriptionIt": [ - "Completa il costruttore dell'oggetto con i metodi specificati qui sotto:", - "
getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)
", - "Esegui i test per vedere il risultato atteso per ogni metodo.", - "I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.", - "Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Crea una Persona", + "description": [ + "Completa el constructor de objetos con los métodos especificados a continuación:", + "
getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)
", + "Ejecuta las pruebas para ver el resultado esperado de cada método.", + "Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.", + "Estos métodos deben ser el único medio para interactuar con el objeto.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Crea una Persona", + "description": [ + "Completa il costruttore dell'oggetto con i metodi specificati qui sotto:", + "
getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)
", + "Esegui i test per vedere il risultato atteso per ogni metodo.", + "I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.", + "Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "af4afb223120f7348cdfc9fd", @@ -452,24 +494,30 @@ "Math.pow()" ], "challengeType": 5, - "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}.", - "Puedes leer acerca de períodos orbitales en wikipedia.", - "Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra", - "El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km3s-2.", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "Mappa i detriti", - "descriptionIt": [ - "Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.", - "L'array conterrà oggetti in formato {name: 'name', avgAlt: avgAlt}.", - "Puoi leggere riguardo i periodi orbitali su wikipedia.", - "I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.", - "Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km3s-2.", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "Ubica los escombros", + "description": [ + "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}.", + "Puedes leer acerca de períodos orbitales en wikipedia.", + "Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra", + "El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km3s-2.", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "Mappa i detriti", + "description": [ + "Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.", + "L'array conterrà oggetti in formato {name: 'name', avgAlt: avgAlt}.", + "Puoi leggere riguardo i periodi orbitali su wikipedia.", + "I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.", + "Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km3s-2.", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } }, { "id": "a3f503de51cfab748ff001aa", @@ -505,23 +553,29 @@ "Array.prototype.reduce()" ], "challengeType": 5, - "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", - "pairwise([1, 3, 2, 4], 4) devolvería el valor de 1, porque solo los primeros dos elementos pueden ser emparejados para sumar 4. ¡Recuerda que el primer elemento tiene un índice de 0!", - "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ], - "titleIt": "A coppie", - "descriptionIt": [ - "Dato un array arr, trova le coppie di elementi la cui somma è uguale al secondo argomento passato arg. Ritorna quindi la somma dei loro indici.", - "Se ci sono più coppie possibili che hanno lo stesso valore numerico ma indici differenti, ritorna la somma degli indici minore. Una volta usato un elemento, lo stesso non può essere riutilizzato per essere accoppiato con un altro.", - "Per esempio pairwise([7, 9, 11, 13, 15], 20) ritorna 6. Le coppia la cui somma è 20 sono [7, 13] e [9, 11]. Possiamo quindi osservare l'array con i loro indici e valori.", - "
Indice01234
Valore79111315
", - "Qui sotto prendiamo gli indici corrispondenti e li sommiamo.", - "7 + 13 = 20 → Indici 0 + 3 = 3
9 + 11 = 20 → Indici 1 + 2 = 3
3 + 3 = 6 → Ritorna 6", - "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." - ] + "translations": { + "es": { + "title": "En parejas", + "description": [ + "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", + "pairwise([1, 3, 2, 4], 4) devolvería el valor de 1, porque solo los primeros dos elementos pueden ser emparejados para sumar 4. ¡Recuerda que el primer elemento tiene un índice de 0!", + "Recuerda utilizar Read-Search-Ask si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + }, + "it": { + "title": "A coppie", + "description": [ + "Dato un array arr, trova le coppie di elementi la cui somma è uguale al secondo argomento passato arg. Ritorna quindi la somma dei loro indici.", + "Se ci sono più coppie possibili che hanno lo stesso valore numerico ma indici differenti, ritorna la somma degli indici minore. Una volta usato un elemento, lo stesso non può essere riutilizzato per essere accoppiato con un altro.", + "Per esempio pairwise([7, 9, 11, 13, 15], 20) ritorna 6. Le coppia la cui somma è 20 sono [7, 13] e [9, 11]. Possiamo quindi osservare l'array con i loro indici e valori.", + "
Indice01234
Valore79111315
", + "Qui sotto prendiamo gli indici corrispondenti e li sommiamo.", + "7 + 13 = 20 → Indici 0 + 3 = 3
9 + 11 = 20 → Indici 1 + 2 = 3
3 + 3 = 6 → Ritorna 6", + "Ricorda di usare Leggi-Cerca-Chiedi se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te." + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/advanced-ziplines.json b/seed/challenges/01-front-end-development-certification/advanced-ziplines.json index b06079a84d..515afaa728 100644 --- a/seed/challenges/01-front-end-development-certification/advanced-ziplines.json +++ b/seed/challenges/01-front-end-development-certification/advanced-ziplines.json @@ -24,19 +24,23 @@ "tests": [], "type": "zipline", "challengeType": 3, - "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a esta: https://codepen.io/FreeCodeCamp/full/PNKdjo/.", - "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que necesites. Dale tu estilo personal.", - "Historia de usuario: Puedo sumar, restar, multiplicar y dividir dos números.", - "Historia de usuario opcional: Puedo limpiar la pantalla con un botón de borrar.", - "Historia de usuario opcional: Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.", - "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, - "titleEs": "Crea una calculadora JavaScript" + "translations": { + "es": { + "title": "Crea una calculadora JavaScript", + "description": [ + "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a esta: https://codepen.io/FreeCodeCamp/full/PNKdjo/.", + "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo sumar, restar, multiplicar y dividir dos números.", + "Historia de usuario opcional: Puedo limpiar la pantalla con un botón de borrar.", + "Historia de usuario opcional: Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.", + "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)." + ] + } + } }, { "id": "bd7158d8c442eddfaeb5bd0f", @@ -59,32 +63,38 @@ "type": "zipline", "isRequired": true, "challengeType": 3, - "titleRu": "Создайте таймер Pomodoro", - "descriptionRu": [ - "Задание: Создайте CodePen.io который успешно копирует вот этот: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", - "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", - "Правило #2: Можете использовать любые библиотеки или API, которые потребуются.", - "Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.", - "Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:", - "Пользовательская история: В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.", - "Бонусная пользовательская история: В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.", - "Бонусная пользовательская история: В качестве пользователя, я могу выбирать длительность 'помидорки'.", - "Если что-то не получается, воспользуйтесь Read-Search-Ask.", - "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", - "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" - ], - "titleEs": "Crea un reloj pomodoro", - "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", - "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", - "Historia de usuario: Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.", - "Historia de usuario: Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.", - "Historia de usuario: Como usuario, puedo personalizar la longitud de cada pomodoro.", - "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)." - ] + "translations": { + "es": { + "title": "Crea un reloj pomodoro", + "description": [ + "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", + "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.", + "Historia de usuario: Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.", + "Historia de usuario: Como usuario, puedo personalizar la longitud de cada pomodoro.", + "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)." + ] + }, + "ru": { + "title": "Создайте таймер Pomodoro", + "description": [ + "Задание: Создайте CodePen.io который успешно копирует вот этот: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", + "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", + "Правило #2: Можете использовать любые библиотеки или API, которые потребуются.", + "Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.", + "Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:", + "Пользовательская история: В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.", + "Бонусная пользовательская история: В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.", + "Бонусная пользовательская история: В качестве пользователя, я могу выбирать длительность 'помидорки'.", + "Если что-то не получается, воспользуйтесь Read-Search-Ask.", + "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", + "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" + ] + } + } }, { "id": "bd7158d8c442eedfaeb5bd1c", @@ -106,19 +116,23 @@ "tests": [], "type": "zipline", "challengeType": 3, - "descriptionEs": [ - "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/KzXQgy/.", - "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", - "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", - "Historia de usuario: Puedo jugar un juego de Tic Tac Toe contra el computador.", - "Historia de usuario: Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.", - "Historia de usuario: Puedo elegir si quiero jugar como X o como O.", - "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, - "titleEs": "Crea un juego de Tic Tac Toe" + "translations": { + "es": { + "title": "Crea un juego de Tic Tac Toe", + "description": [ + "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/KzXQgy/.", + "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", + "Historia de usuario: Puedo jugar un juego de Tic Tac Toe contra el computador.", + "Historia de usuario: Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.", + "Historia de usuario: Puedo elegir si quiero jugar como X o como O.", + "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)." + ] + } + } }, { "id": "bd7158d8c442eddfaeb5bd1c", @@ -146,25 +160,29 @@ "tests": [], "type": "zipline", "challengeType": 3, - "descriptionEs": [ - "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://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.", - "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", - "Historia de usuario: Se me presenta una serie aleatoria de pulsaciones a botones.", - "Historia de usuario: Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.", - "Historia de usuario: Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.", - "Historia de usuario: Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.", - "Historia de usuario: Puedo ver cuántos pasos hay en la serie de pulsaciones actual.", - "Historia de usuario: Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.", - "Historia de usuario: Puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.", - "Historia de usuario: Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.", - "Pista: Aquí hay algunos mp3s que puedes utilizar para tus botones: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.", - "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, - "titleEs": "Construye un juego de Simon" + "translations": { + "es": { + "title": "Construye un juego de Simon", + "description": [ + "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://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.", + "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", + "Historia de usuario: Se me presenta una serie aleatoria de pulsaciones a botones.", + "Historia de usuario: Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.", + "Historia de usuario: Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.", + "Historia de usuario: Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.", + "Historia de usuario: Puedo ver cuántos pasos hay en la serie de pulsaciones actual.", + "Historia de usuario: Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.", + "Historia de usuario: Puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.", + "Historia de usuario: Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.", + "Pista: Aquí hay algunos mp3s que puedes utilizar para tus botones: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.", + "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)." + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/basic-bonfires.json b/seed/challenges/01-front-end-development-certification/basic-bonfires.json index 0fca207e54..da6b1e5d26 100644 --- a/seed/challenges/01-front-end-development-certification/basic-bonfires.json +++ b/seed/challenges/01-front-end-development-certification/basic-bonfires.json @@ -37,34 +37,38 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "descriptionEs": [ - [ - "//i.imgur.com/sJkp30a.png", - "Una imagen de un desafio sobre algoritmos que presenta instrucciones, pruebas y el editor de código.", - "Nuestros desafios sobre algoritmos te enseñarán como pensar como un programador.", - "" - ], - [ - "//i.imgur.com/d8LuRNh.png", - "Una mamá pájaro saca un bebé pájaro fuer de su nido.", - "Nuestros desafios anteriores te introdujeron a los conceptos de programación. Pero para estos desafios sobre algoritmos, ahora necesitarás aplicar lo que has aprendido y resolver problemas de respuesta abierta", - "" - ], - [ - "//i.imgur.com/WBetuBa.jpg", - "Un programador frustado golpeando la pantalla de su computador.", - "Nuestros desafíos sobre algortimos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas.", - "" - ], - [ - "//i.imgur.com/p2TpOQd.jpg", - "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", - "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar.
No te preocupes - ya lo has entendido.", - "" - ] - ], "isRequired": false, - "titleEs": "Prepárate para nuestros Desafíos sobre Algoritmos" + "translations": { + "es": { + "title": "Prepárate para nuestros Desafíos sobre Algoritmos", + "description": [ + [ + "//i.imgur.com/sJkp30a.png", + "Una imagen de un desafio sobre algoritmos que presenta instrucciones, pruebas y el editor de código.", + "Nuestros desafios sobre algoritmos te enseñarán como pensar como un programador.", + "" + ], + [ + "//i.imgur.com/d8LuRNh.png", + "Una mamá pájaro saca un bebé pájaro fuer de su nido.", + "Nuestros desafios anteriores te introdujeron a los conceptos de programación. Pero para estos desafios sobre algoritmos, ahora necesitarás aplicar lo que has aprendido y resolver problemas de respuesta abierta", + "" + ], + [ + "//i.imgur.com/WBetuBa.jpg", + "Un programador frustado golpeando la pantalla de su computador.", + "Nuestros desafíos sobre algortimos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas.", + "" + ], + [ + "//i.imgur.com/p2TpOQd.jpg", + "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", + "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar.
No te preocupes - ya lo has entendido.", + "" + ] + ] + } + } }, { "id": "a202eed8fc186c8434cb6d61", @@ -100,13 +104,17 @@ "Array.prototype.join()" ], "challengeType": 5, - "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", - "El resultado debe ser una cadena de texto", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Invierte el texto", + "description": [ + "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", + "El resultado debe ser una cadena de texto", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "a302f7aae1aa3152a5b413bc", @@ -141,14 +149,18 @@ "Arithmetic Operators" ], "challengeType": 5, - "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", - "Los factoriales son comúnmente representados con la notación n!", - "Por ejemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Factoriza un número", + "description": [ + "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", + "Los factoriales son comúnmente representados con la notación n!", + "Por ejemplo: 5! = 1 * 2 * 3 * 4 * 5 = 120", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "aaa48de84e1ecc7c742e1124", @@ -196,15 +208,19 @@ "String.prototype.toLowerCase()" ], "challengeType": 5, - "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.", - "Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.", - "Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.", - "También vamos a pasar cadenas con símbolos especiales, tales como \"2A3*3a2\", \"2A3 3a2\", y \"2_A3*3#A2\".", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Verifica si es palíndromo", + "description": [ + "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.", + "Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.", + "Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.", + "También vamos a pasar cadenas con símbolos especiales, tales como \"2A3*3a2\", \"2A3 3a2\", y \"2_A3*3#A2\".", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "a26cbbe9ad8655a977e1ceb5", @@ -239,12 +255,16 @@ "String.length" ], "challengeType": 5, - "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", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Encuentra la palabra más larga", + "description": [ + "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", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "ab6137d4e35944e21037b769", @@ -276,12 +296,16 @@ "String.prototype.split()" ], "challengeType": 5, - "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\".", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Aplica formato de título", + "description": [ + "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\".", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "a789b3483989747d63b0e427", @@ -313,13 +337,17 @@ "Comparison Operators" ], "challengeType": 5, - "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].", - "Si escribes tu propio test con Chai.js, asegúrate de utilizar un operador de igualdad estricto en lugar de un operador de igualdad cuando compares arreglos. ", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Devuelve el mayor entero de cada arreglo", + "description": [ + "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].", + "Si escribes tu propio test con Chai.js, asegúrate de utilizar un operador de igualdad estricto en lugar de un operador de igualdad cuando compares arreglos. ", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "acda2fb1324d9b0fa741e6b5", @@ -358,11 +386,15 @@ "String.prototype.substring()" ], "challengeType": 5, - "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." - ] + "translations": { + "es": { + "title": "Confirma la terminación", + "description": [ + "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." + ] + } + } }, { "id": "afcc8d540bea9ea2669306b6", @@ -396,11 +428,15 @@ "Global String Object" ], "challengeType": 5, - "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." - ] + "translations": { + "es": { + "title": "Repite el texto Repite el texto", + "description": [ + "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." + ] + } + } }, { "id": "ac6993d51946422351508a41", @@ -436,13 +472,17 @@ "String.prototype.slice()" ], "challengeType": 5, - "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.", - "Si el numLeer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Trunca una cadena de texto", + "description": [ + "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.", + "Si el numLeer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "a9bd25c716030ec90084d8a1", @@ -478,11 +518,15 @@ "Array.prototype.slice()" ], "challengeType": 5, - "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." - ] + "translations": { + "es": { + "title": "En mil pedazos", + "description": [ + "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." + ] + } + } }, { "id": "ab31c21b530c0dafa9e241ee", @@ -518,12 +562,16 @@ "Array.prototype.splice()" ], "challengeType": 5, - "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.", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Vuélale la cabeza", + "description": [ + "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.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "af2170cad53daa0770fabdea", @@ -562,14 +610,18 @@ "String.prototype.indexOf()" ], "challengeType": 5, - "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.", - "En el caso de [\"hello\", \"hey\"] la función debe devolver false porque la cadena de texto \"hello\" no contiene una \"y\".", - "Finalmente, [\"Alien\", \"line\"], la función debe devolver true porque todas las letras en \"line\" están presentes en \"Alien\".", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Mutaciones", + "description": [ + "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.", + "En el caso de [\"hello\", \"hey\"] la función debe devolver false porque la cadena de texto \"hello\" no contiene una \"y\".", + "Finalmente, [\"Alien\", \"line\"], la función debe devolver true porque todas las letras en \"line\" están presentes en \"Alien\".", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "adf08ec01beb4f99fc7a68f2", @@ -603,12 +655,16 @@ "Array.prototype.filter()" ], "challengeType": 5, - "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.", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "Detector de mentiras", + "description": [ + "Remueve todos los valores falsy de un arreglo dado", + "En javascript, los valores falsy son los siguientes: false, null, 0, \"\", undefined, y NaN.", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "a39963a4c10bc8b4d4f06d7e", @@ -642,11 +698,15 @@ "Array.prototype.filter()" ], "challengeType": 5, - "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." - ] + "translations": { + "es": { + "title": "Buscar y destruir", + "description": [ + "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." + ] + } + } }, { "id": "a24c1a4622e3c05097f71d67", @@ -683,13 +743,17 @@ "Array.prototype.sort()" ], "challengeType": 5, - "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).", - "Mientras que where([20,3,5], 19) debe devolver 2 porque una vez ordenado el arreglo se verá com [3,5,20] y 19 es menor que 20 (índice 2) y mayor que 5 (índice 1).", - "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." - ] + "translations": { + "es": { + "title": "¿Cuál es mi asiento?", + "description": [ + "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).", + "Mientras que where([20,3,5], 19) debe devolver 2 porque una vez ordenado el arreglo se verá com [3,5,20] y 19 es menor que 20 (índice 2) y mayor que 5 (índice 1).", + "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado. Intenta programar en pareja. Escribe tu propio código." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244e2", @@ -728,16 +792,20 @@ "String.fromCharCode()" ], "challengeType": 5, - "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" + "releasedOn": "January 1, 2016", + "translations": { + "es": { + "title": "Cifrado César", + "description": [ + "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." + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/01-front-end-development-certification/basic-javascript.json index e673e9bda0..16efb62eb5 100644 --- a/seed/challenges/01-front-end-development-certification/basic-javascript.json +++ b/seed/challenges/01-front-end-development-certification/basic-javascript.json @@ -31,29 +31,35 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "El comentario de doble barra comentará el resto del texto en la línea donde se ubica:", - "// Este es un comentario.", - "El comentario de barra-estrella-estrella-barra, comentará todo lo que haya entre los caracteres /* y */:", - "/* Este es también un comentario */", - "Trata de crear uno de cada uno." - ], - "titleFr" : "Commentez votre code JavaScript", - "descriptionFr" : [ - "Les commentaires sont des lignes de code que Javascript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.", - "Il y a deux façons d'écrire des commentaires en JavaScript.", - "Utiliser // indiquera à JavaScript d'ignorer le reste du texte sur cette même ligne:", - "// Voici un commentaire sur une ligne.", - "Vous pouvez commenter plusieurs lignes en commençant par /* et en finissant par */:", - "/*Voici un commentaire
sur plusieurs lignes */", - "Conseils", - "Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres et vous-même à mieux comprendre votre code.", - "

Instructions

", - "Essayez de créer un commentaire de chaque type." - ] + "translations": { + "es": { + "title": "Agrega comentarios a tu código JavaScript", + "description": [ + "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.", + "El comentario de doble barra comentará el resto del texto en la línea donde se ubica:", + "// Este es un comentario.", + "El comentario de barra-estrella-estrella-barra, comentará todo lo que haya entre los caracteres /* y */:", + "/* Este es también un comentario */", + "Trata de crear uno de cada uno." + ] + }, + "fr": { + "title": "Commentez votre code JavaScript", + "description": [ + "Les commentaires sont des lignes de code que Javascript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.", + "Il y a deux façons d'écrire des commentaires en JavaScript.", + "Utiliser // indiquera à JavaScript d'ignorer le reste du texte sur cette même ligne:", + "// Voici un commentaire sur une ligne.", + "Vous pouvez commenter plusieurs lignes en commençant par /* et en finissant par */:", + "/*Voici un commentaire
sur plusieurs lignes */", + "Conseils", + "Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres et vous-même à mieux comprendre votre code.", + "

Instructions

", + "Essayez de créer un commentaire de chaque type." + ] + } + } }, { "id": "bd7123c9c443eddfaeb5bdef", @@ -89,28 +95,34 @@ ], "type": "waypoint", "challengeType": 1, - "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\".", - "Te darás cuenta que en myName, no usamos un espacio, y que la \" N\"se escribe con mayúscula. Las variables en JavaScript se escriben con capitalización camello (camel case). Un ejemplo de capitalización camello: capitalizacionCamello.", - "Ahora, utiliza la palabra clave var para crear una variable llamada myName. Establecele como valor tu nombre, entre comillas dobles. ", - "Mira el ejemplo con ourName si te quedas atascado." - ], - "titleFr" : "Déclarer des variables en JavaScript", - "descriptionFr" : [ - "En informatique, une donnée comporte tout ce qui peut avoir du sens pour l'ordinateur. Javascript dispose de sept types de données différents qui sont undefined, null, boolean, string, symbol, number et object.", - "Par exemple, les ordinateurs font la différence entre les nombres tel que 12 et les strings, tels que \"12\", \"dog\", ou \"123 cats\", qui sont des collections de caractères. Les ordinateurs peuvent faire des opérations mathématiques sur un nombre, mais pas sur une chaîne de caractères.", - "Les variables permettent aux ordinateurs de stocker et manipuler les données de façon dynamique. Ils font cela en utilisant un
label
qui réfère à la donnée plutôt que d'utiliser la donnée elle-même. Les sept types de données peuvent être stockés dans une variable.", - "Les variables sont similaires aux x et y que vous utilisez en mathématiques, ce qui veut dire que ce sont des noms simples qui représentent les données que l'on veut utiliser. Les variables de l'ordinateur diffèrent de celles des mathématiques car elles peuvent stocker différentes valeurs à différents moments.", - "On peut dire à JavaScript de créer ou déclarer une variable en la précédant du mot-clé var, comme ceci:", - "var notreNom;", - "crée une variable appelée notreNom.On termine nos expressions avec un point virgule en JavaScript.", - "Le nom d'une variable peut être composé de nombres, lettres et $ ou _, mais ne peut contenir d'espaces ou commencer par un nombre.", - "

Instructions

", - "Utilisez le mot-clé var pour créer une variable appelée monNom", - "Conseil
Regardez à l'exemple de notreNom si vous vous êtes bloqué." - ] + "translations": { + "es": { + "title": "Declara variables en JavaScript", + "description": [ + "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\".", + "Te darás cuenta que en myName, no usamos un espacio, y que la \" N\"se escribe con mayúscula. Las variables en JavaScript se escriben con capitalización camello (camel case). Un ejemplo de capitalización camello: capitalizacionCamello.", + "Ahora, utiliza la palabra clave var para crear una variable llamada myName. Establecele como valor tu nombre, entre comillas dobles. ", + "Mira el ejemplo con ourName si te quedas atascado." + ] + }, + "fr": { + "title": "Déclarer des variables en JavaScript", + "description": [ + "En informatique, une donnée comporte tout ce qui peut avoir du sens pour l'ordinateur. Javascript dispose de sept types de données différents qui sont undefined, null, boolean, string, symbol, number et object.", + "Par exemple, les ordinateurs font la différence entre les nombres tel que 12 et les strings, tels que \"12\", \"dog\", ou \"123 cats\", qui sont des collections de caractères. Les ordinateurs peuvent faire des opérations mathématiques sur un nombre, mais pas sur une chaîne de caractères.", + "Les variables permettent aux ordinateurs de stocker et manipuler les données de façon dynamique. Ils font cela en utilisant un
label
qui réfère à la donnée plutôt que d'utiliser la donnée elle-même. Les sept types de données peuvent être stockés dans une variable.", + "Les variables sont similaires aux x et y que vous utilisez en mathématiques, ce qui veut dire que ce sont des noms simples qui représentent les données que l'on veut utiliser. Les variables de l'ordinateur diffèrent de celles des mathématiques car elles peuvent stocker différentes valeurs à différents moments.", + "On peut dire à JavaScript de créer ou déclarer une variable en la précédant du mot-clé var, comme ceci:", + "var notreNom;", + "crée une variable appelée notreNom.On termine nos expressions avec un point virgule en JavaScript.", + "Le nom d'une variable peut être composé de nombres, lettres et $ ou _, mais ne peut contenir d'espaces ou commencer par un nombre.", + "

Instructions

", + "Utilisez le mot-clé var pour créer une variable appelée monNom", + "Conseil
Regardez à l'exemple de notreNom si vous vous êtes bloqué." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244a8", @@ -157,18 +169,22 @@ ], "type": "waypoint", "challengeType": 1, - "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;", - "Asigna el valor númerico de 5 a miVariable.", - "La asignación siempre va de derecha a izquierda. Todo a la derecha del operador = es resuelto antes que el valor es asignado a la variable a la izquierda del operador.", - "
miVar = 5;
miNum = miVar;
", - "Asigna 5 a miVar y entonces resuelve miVar a 5 otra vez y asigna esta a miNum.", - "

Instrucciones

", - "Asigna el valor 7 a la variable a.", - "Asigna el contenido de a a la variable b." - ] + "translations": { + "es": { + "title": "Almacenar valores con el operador igual", + "description": [ + "En JavaScript, puedes almacenar un valor en una variable con la asignación o con el operador igual (=).", + "miVariable = 5;", + "Asigna el valor númerico de 5 a miVariable.", + "La asignación siempre va de derecha a izquierda. Todo a la derecha del operador = es resuelto antes que el valor es asignado a la variable a la izquierda del operador.", + "
miVar = 5;
miNum = miVar;
", + "Asigna 5 a miVar y entonces resuelve miVar a 5 otra vez y asigna esta a miNum.", + "

Instrucciones

", + "Asigna el valor 7 a la variable a.", + "Asigna el contenido de a a la variable b." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244a9", @@ -199,14 +215,18 @@ ], "type": "waypoint", "challengeType": 1, - "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;", - "Crea una nueva variable llamada miVar y le asigna un valor inicial de 0.", - "

Instrucciones

", - "Define una variable a con var e inicializala a un valor de 9." - ] + "translations": { + "es": { + "title": "Inicializar variables con el operador igual", + "description": [ + "Es común inicializar una variable a un valor inicial en la misma línea que es declarada.", + "var miVar = 0;", + "Crea una nueva variable llamada miVar y le asigna un valor inicial de 0.", + "

Instrucciones

", + "Define una variable a con var e inicializala a un valor de 9." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244aa", @@ -244,12 +264,16 @@ ], "type": "waypoint", "challengeType": 1, - "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

", - "Inicializa las tres variables a, b, y c con 5, 10, y \"I am a\" respectivamente de manera que no sean undefined." - ] + "translations": { + "es": { + "title": "Entendiendo variables sin inicializar", + "description": [ + "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

", + "Inicializa las tres variables a, b, y c con 5, 10, y \"I am a\" respectivamente de manera que no sean undefined." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ab", @@ -289,17 +313,21 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Mejor Práctica

", - "Escribe nombres de variables en Javascript en capitalizaciónCamello (camelCase). En capitalizaciónCamello, los nombres de variables con múltiples palabras tienen la primera palabra en minúsculas y la primera letra de cada palabra subsecuente es capitalizada.", - "Ejemplos:", - "
var algunaVariable;
var otraVariable;
var esteNombreDeVariableEsMuyLargo;
", - "

Instrucciones

", - "Repara las declaraciones y asignaciones de variables de manera que sus nombres usen capitalizaciónCamello." - ] + "translations": { + "es": { + "title": "Entendiendo la distinción en variables", + "description": [ + "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.", + "

Mejor Práctica

", + "Escribe nombres de variables en Javascript en capitalizaciónCamello (camelCase). En capitalizaciónCamello, los nombres de variables con múltiples palabras tienen la primera palabra en minúsculas y la primera letra de cada palabra subsecuente es capitalizada.", + "Ejemplos:", + "
var algunaVariable;
var otraVariable;
var esteNombreDeVariableEsMuyLargo;
", + "

Instrucciones

", + "Repara las declaraciones y asignaciones de variables de manera que sus nombres usen capitalizaciónCamello." + ] + } + } }, { "id": "cf1111c1c11feddfaeb3bdef", @@ -331,12 +359,16 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Suma dos números con JavaScript", - "descriptionEs": [ - "Intentemos sumar dos números con JavaScript.", - "JavaScript utiliza el símbolo + para la adición.", - "Cambie el 0 para que la suma seá igual a 20." - ] + "translations": { + "es": { + "title": "Suma dos números con JavaScript", + "description": [ + "Intentemos sumar dos números con JavaScript.", + "JavaScript utiliza el símbolo + para la adición.", + "Cambie el 0 para que la suma seá igual a 20." + ] + } + } }, { "id": "cf1111c1c11feddfaeb4bdef", @@ -369,12 +401,16 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "Cambia el 0 para que la diferencia sea 12." - ] + "translations": { + "es": { + "title": "Resta un número de otro con JavaScript", + "description": [ + "También podemos restar un número de otro.", + "JavaScript utiliza el símbolo - de sustracción", + "Cambia el 0 para que la diferencia sea 12." + ] + } + } }, { "id": "cf1231c1c11feddfaeb5bdef", @@ -406,12 +442,16 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Cambie el 0 para que el producto sea igual a 80." - ] + "translations": { + "es": { + "title": "Multiplica dos números con JavaScript", + "description": [ + "También podemos multiplicar un número por otro.", + "JavaScript utiliza el símbolo * de la multiplicación.", + "Cambie el 0 para que el producto sea igual a 80." + ] + } + } }, { "id": "cf1111c1c11feddfaeb6bdef", @@ -443,12 +483,16 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Cambia el 0 para que el cociente sea igual a 2." - ] + "translations": { + "es": { + "title": "Divide un número por otro con JavaScript", + "description": [ + "También podemos dividir un número por otro.", + "JavaScript utiliza el símbolo / para dividir.", + "Cambia el 0 para que el cociente sea igual a 2." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ac", @@ -485,16 +529,20 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Incrementa un número con JavaScript", - "descriptionEs": [ - "Tu puedes fácilmente incrementar o agregar uno a una variable con el operador ++.", - "i++", - "es el equivalente de", - "i = i + 1;", - "Nota
Toda la línea equivale a i++, sin necesidad del signo igual.", - "

Instrucciones

", - "Cambia el código para usar el operador ++ sobre myVar." - ] + "translations": { + "es": { + "title": "Incrementa un número con JavaScript", + "description": [ + "Tu puedes fácilmente incrementar o agregar uno a una variable con el operador ++.", + "i++", + "es el equivalente de", + "i = i + 1;", + "Nota
Toda la línea equivale a i++, sin necesidad del signo igual.", + "

Instrucciones

", + "Cambia el código para usar el operador ++ sobre myVar." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ad", @@ -529,16 +577,20 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Decrementar un número con JavaScript", - "descriptionEs": [ - "Fácilmente puedes decrementar o disminuir una variable por uno con el operador --.", - "i--;", - "es el equivalente a", - "i = i - 1;", - "Nota
Toda la línea equivale a i--;, sin necesidad del signo igual.", - "

Instrucciones

", - "Cambia el código para usar el operador -- en myVar." - ] + "translations": { + "es": { + "title": "Decrementar un número con JavaScript", + "description": [ + "Fácilmente puedes decrementar o disminuir una variable por uno con el operador --.", + "i--;", + "es el equivalente a", + "i = i - 1;", + "Nota
Toda la línea equivale a i--;, sin necesidad del signo igual.", + "

Instrucciones

", + "Cambia el código para usar el operador -- en myVar." + ] + } + } }, { "id": "cf1391c1c11feddfaeb4bdef", @@ -568,13 +620,17 @@ ], "type": "waypoint", "challengeType": 1, - "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í.", - "

Instrucciones

", - "Crea una variable myDecimal y dale un valor decimal con una parte fraccional (p.e. 5.7)." - ] + "translations": { + "es": { + "title": "Crea números decimales con JavaScript", + "description": [ + "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í.", + "

Instrucciones

", + "Crea una variable myDecimal y dale un valor decimal con una parte fraccional (p.e. 5.7)." + ] + } + } }, { "id": "bd7993c9c69feddfaeb7bdef", @@ -602,13 +658,17 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Cambia el 0.0 para que el producto sea igual a 5.0." - ] + "translations": { + "es": { + "title": "Multiplicar dos decimales con JavaScript", + "description": [ + "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.", + "

Instrucciones

", + "Cambia el 0.0 para que el producto sea igual a 5.0." + ] + } + } }, { "id": "bd7993c9ca9feddfaeb7bdef", @@ -635,12 +695,16 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Divide un número decimal por otro con JavaScript", - "descriptionEs": [ - "Ahora vamos a dividir un decimal por otro.", - "

Instrucciones

", - "Cambia el 0.0 para que tu cociente sea igual a 2.2." - ] + "translations": { + "es": { + "title": "Divide un número decimal por otro con JavaScript", + "description": [ + "Ahora vamos a dividir un decimal por otro.", + "

Instrucciones

", + "Cambia el 0.0 para que tu cociente sea igual a 2.2." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ae", @@ -675,17 +739,21 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Encontrar un cociente en JavaScript", - "descriptionEs": [ - "El operador residuo % da el residuo de la división de dos números.", - "Ejemplo", - "
5 % 2 = 1 por que
Math.floor(5 / 2) = 2 (Cociente)
2 * 2 = 4
5 - 4 = 1 (Residuo)
", - "Uso
En matemáticas, se puede comprobar si un número es par o impar revisando en residuo de la división del número por 2.", - "
17 % 2 = 1 (17 es Impar)
48 % 2 = 0 (48 es Par)
", - "Nota
El operador residuo es a veces incorrectamente referenciado como el operador \"módulo\". Este es muy parecido a módulo, pero no trabaja apropiadamente con números negativos.", - "

Instrucciones

", - "Asigna remainder igual al residuo de 11 dividido por 3 usando el operador residuo (%)." - ] + "translations": { + "es": { + "title": "Encontrar un cociente en JavaScript", + "description": [ + "El operador residuo % da el residuo de la división de dos números.", + "Ejemplo", + "
5 % 2 = 1 por que
Math.floor(5 / 2) = 2 (Cociente)
2 * 2 = 4
5 - 4 = 1 (Residuo)
", + "Uso
En matemáticas, se puede comprobar si un número es par o impar revisando en residuo de la división del número por 2.", + "
17 % 2 = 1 (17 es Impar)
48 % 2 = 0 (48 es Par)
", + "Nota
El operador residuo es a veces incorrectamente referenciado como el operador \"módulo\". Este es muy parecido a módulo, pero no trabaja apropiadamente con números negativos.", + "

Instrucciones

", + "Asigna remainder igual al residuo de 11 dividido por 3 usando el operador residuo (%)." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244af", @@ -727,16 +795,20 @@ ], "type": "waypoint", "challengeType": 1, - "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;", - "para agregar 5 a miVar. Dado que este es un patrón común, hay operadores que realizan tanto una operación matemática como una asignación en un paso.", - "Uno de tales operadores es el operador +=.", - "miVar += 5; añadirá 5 a miVar.", - "

Instrucciones

", - "Convierte las asignaciones para a, b y c usando el operador +=." - ] + "translations": { + "es": { + "title": "Asignación con más", + "description": [ + "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;", + "para agregar 5 a miVar. Dado que este es un patrón común, hay operadores que realizan tanto una operación matemática como una asignación en un paso.", + "Uno de tales operadores es el operador +=.", + "miVar += 5; añadirá 5 a miVar.", + "

Instrucciones

", + "Convierte las asignaciones para a, b y c usando el operador +=." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b0", @@ -778,15 +850,19 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Asignación con menos", - "descriptionEs": [ - "Al igual que el operador +=, -= substrae un número de una variable.", - "miVar = miVar - 5;", - "substraerá 5 de miVar. Esto puede ser reescrito como: ", - "miVar -= 5;", - "

Instrucciones

", - "Convierte las asignaciones para a, b, y c para usar el operador -=." - ] + "translations": { + "es": { + "title": "Asignación con menos", + "description": [ + "Al igual que el operador +=, -= substrae un número de una variable.", + "miVar = miVar - 5;", + "substraerá 5 de miVar. Esto puede ser reescrito como: ", + "miVar -= 5;", + "

Instrucciones

", + "Convierte las asignaciones para a, b, y c para usar el operador -=." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b1", @@ -828,15 +904,19 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Asignación con veces igual", - "descriptionEs": [ - "El operador *= multiplica una variable por un número.", - "miVar = miVar * 5;", - "multiplicará miVar por 5. Esto puede ser reescrito como: ", - "miVar *= 5;", - "

Instrucciones

", - "Convierte las asignaciones para a, b y c usando el operador *=." - ] + "translations": { + "es": { + "title": "Asignación con veces igual", + "description": [ + "El operador *= multiplica una variable por un número.", + "miVar = miVar * 5;", + "multiplicará miVar por 5. Esto puede ser reescrito como: ", + "miVar *= 5;", + "

Instrucciones

", + "Convierte las asignaciones para a, b y c usando el operador *=." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b2", @@ -877,15 +957,19 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Asignación con división", - "descriptionEs": [ - "El operador /= divide una variable por otro número.", - "miVar = miVar / 5;", - "Dividirá miVar por 5. Esto puede ser reescrito como: ", - "miVar /= 5;", - "

Instrucciones

", - "Convierte las asignaciones para a, b y c para usar el operador /=." - ] + "translations": { + "es": { + "title": "Asignación con división", + "description": [ + "El operador /= divide una variable por otro número.", + "miVar = miVar / 5;", + "Dividirá miVar por 5. Esto puede ser reescrito como: ", + "miVar /= 5;", + "

Instrucciones

", + "Convierte las asignaciones para a, b y c para usar el operador /=." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b3", @@ -923,12 +1007,16 @@ ], "type": "checkpoint", "challengeType": 1, - "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.", - "Se te da una variable celsius representando una temperatura en Celsius. Crea una variable fahrenheit y aplica el algoritmo para asignar la correspondiente temperatura en Fahrenheit." - ] + "translations": { + "es": { + "title": "Convierte celsius a fahrenheit", + "description": [ + "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.", + "Se te da una variable celsius representando una temperatura en Celsius. Crea una variable fahrenheit y aplica el algoritmo para asignar la correspondiente temperatura en Fahrenheit." + ] + } + } }, { "id": "bd7123c9c444eddfaeb5bdef", @@ -961,11 +1049,15 @@ ], "type": "waypoint", "challengeType": 1, - "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." - ] + "translations": { + "es": { + "title": "Declara variables tipo cadena", + "description": [ + "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." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b5", @@ -1004,17 +1096,21 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "var cadenaEjem = \"Alan dijo, \\\"Pedro está aprendiendo JavaScript\\\".\";", - "Esto le indica a JavaScript que la comilla siguiente no es el fin de la cadena, sino que debe aparecer dentro de la cadena. Así que si fueras a imprimir esto en la consola, tu obtendrías:", - "Alan dijo, \"Pedro está aprendiendo JavaScript\".", - "

Instructiones

", - "Usa barras invertidaspara asigar una cadena a la variable myStr de modo que si tu fueras a imprimirla en la consola, tu verías:", - "I am a \"double quoted\" string inside \"double quotes\"." - ] + "translations": { + "es": { + "title": "Escapar comillas en cadenas de texto", + "description": [ + "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.", + "var cadenaEjem = \"Alan dijo, \\\"Pedro está aprendiendo JavaScript\\\".\";", + "Esto le indica a JavaScript que la comilla siguiente no es el fin de la cadena, sino que debe aparecer dentro de la cadena. Así que si fueras a imprimir esto en la consola, tu obtendrías:", + "Alan dijo, \"Pedro está aprendiendo JavaScript\".", + "

Instructiones

", + "Usa barras invertidaspara asigar una cadena a la variable myStr de modo que si tu fueras a imprimirla en la consola, tu verías:", + "I am a \"double quoted\" string inside \"double quotes\"." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b4", @@ -1047,15 +1143,19 @@ ], "type": "waypoint", "challengeType": 1, - "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\"", - "La ventaja de usar una o la otra tiene que ver con la necesidad de escapar comillas. Si tu tienes una cadena con algunas comillas, esta puede ser difícil de leer y escribir. En su lugar, usa apóstrofes:", - "'Esta cadena tiene \"comillas\" en esta. Y \"probablemente\" muchas de ellas.'", - "

Instrucciones

", - "Cambia la cadena dada de comillas a apóstrofes y quita el escape." - ] + "translations": { + "es": { + "title": "Citando cadenas con comillas simples", + "description": [ + "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\"", + "La ventaja de usar una o la otra tiene que ver con la necesidad de escapar comillas. Si tu tienes una cadena con algunas comillas, esta puede ser difícil de leer y escribir. En su lugar, usa apóstrofes:", + "'Esta cadena tiene \"comillas\" en esta. Y \"probablemente\" muchas de ellas.'", + "

Instrucciones

", + "Cambia la cadena dada de comillas a apóstrofes y quita el escape." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b6", @@ -1094,14 +1194,18 @@ ], "type": "waypoint", "challengeType": 1, - "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
", - "Nota que la barra invertida por si misma tiene que ser escapada con el fin de mostrarse como una barra invertida.", - "

Instrucciones

", - "Codifica la siguiente secuencia, separada por espacios:
barra invertida tabulación tabulación retorno de carro nueva línea y asignala a myStr" - ] + "translations": { + "es": { + "title": "Secuencias de escape en cadenas", + "description": [ + "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
", + "Nota que la barra invertida por si misma tiene que ser escapada con el fin de mostrarse como una barra invertida.", + "

Instrucciones

", + "Codifica la siguiente secuencia, separada por espacios:
barra invertida tabulación tabulación retorno de carro nueva línea y asignala a myStr" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b7", @@ -1145,15 +1249,19 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "
'Mi nombre es Alan,' + ' Yo concateno.'
", - "Nota
Cuidado con los espacios. La concatenación no agrega espacios entre cadenas concatenadas, así que necesitarás agregarlos tu mismo.", - "

Instrucciones

", - "Construye myStr con las cadenas \"This is the start. \" y \"This is the end.\" usando el operador+." - ] + "translations": { + "es": { + "title": "Concatenar cadenas con el operador más", + "description": [ + "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", + "
'Mi nombre es Alan,' + ' Yo concateno.'
", + "Nota
Cuidado con los espacios. La concatenación no agrega espacios entre cadenas concatenadas, así que necesitarás agregarlos tu mismo.", + "

Instrucciones

", + "Construye myStr con las cadenas \"This is the start. \" y \"This is the end.\" usando el operador+." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b8", @@ -1194,13 +1302,17 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Construye myStr sobre varias líneas concatenando estas dos cadenas:
\"This is the first sentence. \" y \"This is the second sentence.\" usando el operador +=." - ] + "translations": { + "es": { + "title": "Concatenar cadenas con el operador mas igual", + "description": [ + "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.", + "

Instrucciones

", + "Construye myStr sobre varias líneas concatenando estas dos cadenas:
\"This is the first sentence. \" y \"This is the second sentence.\" usando el operador +=." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244b9", @@ -1247,12 +1359,16 @@ ], "type": "waypoint", "challengeType": 1, - "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

", - "Asigna myName a una cadena igual a tu nombre y construye myStr con myName entre las cadenas \"My name is \" and \" and I am swell!\"" - ] + "translations": { + "es": { + "title": "Construir cadenas con variables", + "description": [ + "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

", + "Asigna myName a una cadena igual a tu nombre y construye myStr con myName entre las cadenas \"My name is \" and \" and I am swell!\"" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ed", @@ -1300,12 +1416,16 @@ ], "type": "waypoint", "challengeType": 1, - "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

", - "Asigna someAdjective y anexalo a myStr usando el operador +=." - ] + "translations": { + "es": { + "title": "Anexando variables a cadenas", + "description": [ + "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

", + "Asigna someAdjective y anexalo a myStr usando el operador +=." + ] + } + } }, { "id": "bd7123c9c448eddfaeb5bdef", @@ -1346,12 +1466,16 @@ ], "type": "waypoint", "challengeType": 1, - "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. ", - "Usa la propiedad .length para contar el número de caracteres en el variable lastName." - ] + "translations": { + "es": { + "title": "Comprueba la propiedad longitud (length) de una variable tipo cadena", + "description": [ + "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. ", + "Usa la propiedad .length para contar el número de caracteres en el variable lastName." + ] + } + } }, { "id": "bd7123c9c549eddfaeb5bdef", @@ -1392,14 +1516,18 @@ ], "type": "waypoint", "challengeType": 1, - "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 ", - "Por ejemplo, el caracter en el índice 0 en la palabra \"Charles \" es \"C\". Entonces si var firstName = \"Charles\", puedes obtener la primera letra de la cadena usando firstName[0] .", - "Usa la notación de corchetes para encontrar el primer caracter en la variable lastName y asignarlo a firstLetterOfLastName.", - "Si te atascas intenta mirar la declaración de la variable firstLetterOfFirstName." - ] + "translations": { + "es": { + "title": "Usa la notación de corchetes para encontrar el primer carácter de una cadena", + "description": [ + "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 ", + "Por ejemplo, el caracter en el índice 0 en la palabra \"Charles \" es \"C\". Entonces si var firstName = \"Charles\", puedes obtener la primera letra de la cadena usando firstName[0] .", + "Usa la notación de corchetes para encontrar el primer caracter en la variable lastName y asignarlo a firstLetterOfLastName.", + "Si te atascas intenta mirar la declaración de la variable firstLetterOfFirstName." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ba", @@ -1436,16 +1564,20 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
var miCad = \"Bob\";
myCad[0] = \"J\";
", - "no puede cambiar el valor de miCad a \"Job\" porque el contenido de miCad no puede ser alterado. Nota que esto no significa que miCad no puede ser cambiado, solo que los valores individuales de una cadena literal no pueden ser cambiados. La única manera de cambiar miCad sería asignandola a una nueva cadena, como esta:", - "
var miCad = \"Bob\";
miCad = \"Job\";
", - "

Instrucciones

", - "Corrige la asignación de myStr para lograr el efecto deseado." - ] + "translations": { + "es": { + "title": "Comprender la inmutabilidad de cadenas", + "description": [ + "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:", + "
var miCad = \"Bob\";
myCad[0] = \"J\";
", + "no puede cambiar el valor de miCad a \"Job\" porque el contenido de miCad no puede ser alterado. Nota que esto no significa que miCad no puede ser cambiado, solo que los valores individuales de una cadena literal no pueden ser cambiados. La única manera de cambiar miCad sería asignandola a una nueva cadena, como esta:", + "
var miCad = \"Bob\";
miCad = \"Job\";
", + "

Instrucciones

", + "Corrige la asignación de myStr para lograr el efecto deseado." + ] + } + } }, { "id": "bd7123c9c450eddfaeb5bdef", @@ -1482,14 +1614,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Vamos a tratar de asignar a thirdLetterOfLastName la tercera letra de la variable lastName.", - "Pista
Si te atascas intenta mirar la declaración de la variable secondLetterOfFirstName." - ] + "translations": { + "es": { + "title": "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena", + "description": [ + "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.", + "

Instrucciones

", + "Vamos a tratar de asignar a thirdLetterOfLastName la tercera letra de la variable lastName.", + "Pista
Si te atascas intenta mirar la declaración de la variable secondLetterOfFirstName." + ] + } + } }, { "id": "bd7123c9c451eddfaeb5bdef", @@ -1526,14 +1662,18 @@ ], "type": "waypoint", "challengeType": 1, - "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]. ", - "

Instrucciones

", - "Utiliza notación de corchetes para encontrar el último caracter de la variabel lastName.", - "Si te atascas intenta mirando la declaración de la variable lastLetterOfFirstName." - ] + "translations": { + "es": { + "title": "Usa notación de corchetes para encontrar el último caracter de una cadena", + "description": [ + "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]. ", + "

Instrucciones

", + "Utiliza notación de corchetes para encontrar el último caracter de la variabel lastName.", + "Si te atascas intenta mirando la declaración de la variable lastLetterOfFirstName." + ] + } + } }, { "id": "bd7123c9c452eddfaeb5bdef", @@ -1570,14 +1710,18 @@ ], "type": "waypoint", "challengeType": 1, - "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] ", - "

Instrucciones

", - "Usa notación de corchete para encontrar el segundo último caracter de la cadena en lastName.", - "Pista
Si te atascas intenta mirando la declaración de la variable thirdToLastLetterOfFirstName." - ] + "translations": { + "es": { + "title": "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena", + "description": [ + "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] ", + "

Instrucciones

", + "Usa notación de corchete para encontrar el segundo último caracter de la cadena en lastName.", + "Pista
Si te atascas intenta mirando la declaración de la variable thirdToLastLetterOfFirstName." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244bb", @@ -1616,13 +1760,17 @@ ], "type": "checkpoint", "challengeType": 1, - "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.", - "Además, necesitarás proporcionar cadenas adicionales, las cuales no cambiarán entre las palabras proporcionadas.", - "Nosotros hemos proporcionado un marco de referencia para probar tus resultados con diferentes palabras. La prueba correrá tu función con varias palabras diferentes para asegurarse que todas las palabras proporcionadas aparezcan en la salida, así como en tus cadenas adicionales." - ] + "translations": { + "es": { + "title": "Espacios en blanco de palabras", + "description": [ + "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.", + "Además, necesitarás proporcionar cadenas adicionales, las cuales no cambiarán entre las palabras proporcionadas.", + "Nosotros hemos proporcionado un marco de referencia para probar tus resultados con diferentes palabras. La prueba correrá tu función con varias palabras diferentes para asegurarse que todas las palabras proporcionadas aparezcan en la salida, así como en tus cadenas adicionales." + ] + } + } }, { "id": "bd7993c9c69feddfaeb8bdef", @@ -1656,14 +1804,18 @@ ], "type": "waypoint", "challengeType": 1, - "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\"]. ", - "

Instrucciones

", - "Ahora vamos a crear un nuevo vector llamado myArray que contenga una cadena y un número (en ese orden).", - "Consulta el código comentado en el editor de texto si te atascas." - ] + "translations": { + "es": { + "title": "Almacena múltiples valores en una variable utilizando vectores en JavaScript", + "description": [ + "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\"]. ", + "

Instrucciones

", + "Ahora vamos a crear un nuevo vector llamado myArray que contenga una cadena y un número (en ese orden).", + "Consulta el código comentado en el editor de texto si te atascas." + ] + } + } }, { "id": "cf1111c1c11feddfaeb7bdef", @@ -1692,12 +1844,16 @@ ], "type": "waypoint", "challengeType": 1, - "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

", - "Ahora vamos a crear un vector anidado llamado myArray." - ] + "translations": { + "es": { + "title": "Anida un vector dentro de otro vector", + "description": [ + "También puedes anidar vectores dentro de otros vectores, como este: [[\"Bulls\", 23], [\"White Sox\", 45]].", + "

Instrucciones

", + "Ahora vamos a crear un vector anidado llamado myArray." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392ca", @@ -1733,17 +1889,21 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Por ejemplo:", - "var array = [1,2,3];", - "array[0]; //es igual a 1", - "var data = array[1];", - "

Instrucciones

", - "Crea una variable llamada myData y asignale el primer valor del vector myArray." - ] + "translations": { + "es": { + "title": "Accede a los datos de un vector mediante índices", + "description": [ + "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.", + "Por ejemplo:", + "var array = [1,2,3];", + "array[0]; //es igual a 1", + "var data = array[1];", + "

Instrucciones

", + "Crea una variable llamada myData y asignale el primer valor del vector myArray." + ] + } + } }, { "id": "cf1111c1c11feddfaeb8bdef", @@ -1779,15 +1939,19 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Modifica datos de un vector usando índices", - "descriptionEs": [ - "También podemos modificar los datos almacenados en vectores usando índices.", - "Por ejemplo:", - "var ourArray = [3,2,1];", - "ourArray[0] = 1; // equals [1,2,1]", - "

Instrucciones

", - "Ahora establece el dato almacenado en el índice 0 de myArray para que sea el valor 3." - ] + "translations": { + "es": { + "title": "Modifica datos de un vector usando índices", + "description": [ + "También podemos modificar los datos almacenados en vectores usando índices.", + "Por ejemplo:", + "var ourArray = [3,2,1];", + "ourArray[0] = 1; // equals [1,2,1]", + "

Instrucciones

", + "Ahora establece el dato almacenado en el índice 0 de myArray para que sea el valor 3." + ] + } + } }, { "id": "56592a60ddddeae28f7aa8e1", @@ -1821,14 +1985,18 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "
var vec = [
[1,2,3],
[4,5,6],
[7,8,9],
[[10,11,12], 13, 14]
];
vec[0]; // es igual [1,2,3]
vec[1][2]; // es igual 6
vec[3][0][1]; // es igual 11
", - "

Instrucciones

", - "Lee de myArray usando la notación corchete de modo que myData sea igual a 8" - ] + "translations": { + "es": { + "title": "Acceder a vectores multi-dimensionales con índices", + "description": [ + "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", + "
var vec = [
[1,2,3],
[4,5,6],
[7,8,9],
[[10,11,12], 13, 14]
];
vec[0]; // es igual [1,2,3]
vec[1][2]; // es igual 6
vec[3][0][1]; // es igual 11
", + "

Instrucciones

", + "Lee de myArray usando la notación corchete de modo que myData sea igual a 8" + ] + } + } }, { "id": "56bbb991ad1ed5201cd392cb", @@ -1864,12 +2032,16 @@ ], "type": "waypoint", "challengeType": 1, - "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

", - "Empuja [\"dog\", 3] al final de la variable myArray." - ] + "translations": { + "es": { + "title": "Manipula vectores con push()", + "description": [ + "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

", + "Empuja [\"dog\", 3] al final de la variable myArray." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392cc", @@ -1909,14 +2081,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Todo tipo de datos puede ser \"sacado\" de un vector --números, cadenas, incluso los vectores anidadas.", - "

Instrucciones

", - "Usa la función .pop() para sacar el último elemento de myArray y asigna ese valor \"sacado\" a removedFromMyArray ." - ] + "translations": { + "es": { + "title": "Manipula vectores con pop()", + "description": [ + "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.", + "Todo tipo de datos puede ser \"sacado\" de un vector --números, cadenas, incluso los vectores anidadas.", + "

Instrucciones

", + "Usa la función .pop() para sacar el último elemento de myArray y asigna ese valor \"sacado\" a removedFromMyArray ." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392cd", @@ -1953,13 +2129,17 @@ ], "type": "waypoint", "challengeType": 1, - "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. ", - "

Instrucciones

", - "Usa la función .shift() para eliminar el primer elemento de myArray, y el elemento que saques asignalo a removedFromMyArra" - ] + "translations": { + "es": { + "title": "Manipula vectores con shift()", + "description": [ + "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. ", + "

Instrucciones

", + "Usa la función .shift() para eliminar el primer elemento de myArray, y el elemento que saques asignalo a removedFromMyArra" + ] + } + } }, { "id": "56bbb991ad1ed5201cd392ce", @@ -1996,13 +2176,17 @@ ], "type": "waypoint", "challengeType": 1, - "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. ", - "

Instrucciones

", - "Añade \"Paul\" al comienzo de la variable myArray usando unshift()." - ] + "translations": { + "es": { + "title": "Manipula vectores con unshift()", + "description": [ + "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. ", + "

Instrucciones

", + "Añade \"Paul\" al comienzo de la variable myArray usando unshift()." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244bc", @@ -2058,13 +2242,17 @@ ], "type": "checkpoint", "challengeType": 1, - "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.", - "[\"Barra de Chocolate\", 15]", - "Tiene que haber por lo menos 5 sub-vectores en la lista." - ] + "translations": { + "es": { + "title": "Lista de compras", + "description": [ + "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.", + "[\"Barra de Chocolate\", 15]", + "Tiene que haber por lo menos 5 sub-vectores en la lista." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392cf", @@ -2131,18 +2319,22 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "function nombreDeFuncion(a, b) {", - "& nbsp; & nbsp; return a + b;", - "}", - "Después de escribir las líneas anteriores en nuestro código, podemos pasar valores a nuestra función y el resultado que sigue a la instrucción return será retornado.", - "Por ejemplo, podemos pasar los números 4 y 2 al \"llamar\" la función más adelante en nuestro código, así: nombreDeFuncion(4, 2). ", - "En este ejemplo, la función devolverá el número 6, ya que es el resultado de 4 + 2.", - "Crea y llama una función de nombre myFunction que devuelva la suma de a y b." - ] + "translations": { + "es": { + "title": "Escribe código JavaScript reutilizable con funciones", + "description": [ + "En JavaScript, podemos dividir nuestro código en partes reutilizables llamadas funciones.", + "He aquí un ejemplo de una función:", + "function nombreDeFuncion(a, b) {", + "& nbsp; & nbsp; return a + b;", + "}", + "Después de escribir las líneas anteriores en nuestro código, podemos pasar valores a nuestra función y el resultado que sigue a la instrucción return será retornado.", + "Por ejemplo, podemos pasar los números 4 y 2 al \"llamar\" la función más adelante en nuestro código, así: nombreDeFuncion(4, 2). ", + "En este ejemplo, la función devolverá el número 6, ya que es el resultado de 4 + 2.", + "Crea y llama una función de nombre myFunction que devuelva la suma de a y b." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244bd", @@ -2211,17 +2403,21 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
function testFun(param1, param2) {
console.log(param1, param2);
}
", - "Entonces nosotros podemos llamar testFun:", - "testFun(\"Hello\", \"World\");", - "Nosotros hemos pasado dos argumentos, \"Hello\" y \"World\". Dentro de la función, param1 será igual a \"Hello\" y param2 será igual a \"World\". Nota que puedes llamar testFun otra vez con argumentos diferentes y los parámetros asumirían el valor de los nuevos argumentos.", - "

Instrucciones

", - "
  1. Crea una función llamada functionWithArgs que acepte dos argumentos y da salida a su suma en la consola.
  2. Llama la función.
" - ] + "translations": { + "es": { + "title": "Pasando valores a funciones con argumentos", + "description": [ + "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:", + "
function testFun(param1, param2) {
console.log(param1, param2);
}
", + "Entonces nosotros podemos llamar testFun:", + "testFun(\"Hello\", \"World\");", + "Nosotros hemos pasado dos argumentos, \"Hello\" y \"World\". Dentro de la función, param1 será igual a \"Hello\" y param2 será igual a \"World\". Nota que puedes llamar testFun otra vez con argumentos diferentes y los parámetros asumirían el valor de los nuevos argumentos.", + "

Instrucciones

", + "
  1. Crea una función llamada functionWithArgs que acepte dos argumentos y da salida a su suma en la consola.
  2. Llama la función.
" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244be", @@ -2295,14 +2491,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Declara a variable global myGlobal fuera de cualquier función. Inicializala para tener un valor de 10 ", - "Dentro de la función fun1, asigna 5 a oopsGlobal sin usar la palabra clave var." - ] + "translations": { + "es": { + "title": "Alcance global y funciones", + "description": [ + "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.", + "

Instrucciones

", + "Declara a variable global myGlobal fuera de cualquier función. Inicializala para tener un valor de 10 ", + "Dentro de la función fun1, asigna 5 a oopsGlobal sin usar la palabra clave var." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244bf", @@ -2367,15 +2567,19 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "
function myTest() {
var loc = \"foo\";
console.log(loc);
}
myTest(); // \"foo\"
console.log(loc); // \"undefined\"
", - "loc no está definida fuera de la función.", - "

Instrucciones

", - "Declara una variable local myVar dentro de myLocalScope" - ] + "translations": { + "es": { + "title": "Alcance local y funciones", + "description": [ + "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.", + "
function myTest() {
var loc = \"foo\";
console.log(loc);
}
myTest(); // \"foo\"
console.log(loc); // \"undefined\"
", + "loc no está definida fuera de la función.", + "

Instrucciones

", + "Declara una variable local myVar dentro de myLocalScope" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c0", @@ -2414,15 +2618,19 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
var algunaVar = \"Sombrero\";
function miFun() {
var algunaVar = \"Cabeza\";
return algunaVar;
}
", - "La función miFun regresará \"Cabeza\" porque la versión local de la variable tiene precedencia.", - "

Instrucciones

", - "Agrega una variable local a myOutfit para sobreescribir el valor de outerWear con \"sweater\"." - ] + "translations": { + "es": { + "title": "Alcance global vs. local en funciones", + "description": [ + "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:", + "
var algunaVar = \"Sombrero\";
function miFun() {
var algunaVar = \"Cabeza\";
return algunaVar;
}
", + "La función miFun regresará \"Cabeza\" porque la versión local de la variable tiene precedencia.", + "

Instrucciones

", + "Agrega una variable local a myOutfit para sobreescribir el valor de outerWear con \"sweater\"." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c2", @@ -2460,15 +2668,19 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "
function masTres(num) {
return num + 3;
}
var respuesta = masTres(5); // 8
", - "masTres toma un argumento que es num y retorna un valor igual a num + 3.", - "

Instrucciones

", - "Crea una función timesFive que acepte un argumento, lo multiplique por 5 y retorne el nuevo valor." - ] + "translations": { + "es": { + "title": "Retorna un valor desde una función con return", + "description": [ + "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", + "
function masTres(num) {
return num + 3;
}
var respuesta = masTres(5); // 8
", + "masTres toma un argumento que es num y retorna un valor igual a num + 3.", + "

Instrucciones

", + "Crea una función timesFive que acepte un argumento, lo multiplique por 5 y retorne el nuevo valor." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c3", @@ -2515,15 +2727,19 @@ ], "type": "waypoint", "challengeType": 1, - "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: ", - "nuestraSuma = suma(5, 12);", - "llamará la función suma, la cual retornará un valor de 17 y lo asignará a la variable nuestraSuma.", - "

Instrucciones

", - "Llama la función processArg con un argumento 7 y asigna su valor de retorno a la variable processed." - ] + "translations": { + "es": { + "title": "Asignación con un valor retornado", + "description": [ + "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: ", + "nuestraSuma = suma(5, 12);", + "llamará la función suma, la cual retornará un valor de 17 y lo asignará a la variable nuestraSuma.", + "

Instrucciones

", + "Llama la función processArg con un argumento 7 y asigna su valor de retorno a la variable processed." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c6", @@ -2586,11 +2802,15 @@ ], "type": "checkpoint", "challengeType": 1, - "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 nextInLine 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 nextInLine debe entonces devolver el elemento que se ha eliminado." - ] + "translations": { + "es": { + "title": "Hacer cola", + "description": [ + "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 nextInLine 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 nextInLine debe entonces devolver el elemento que se ha eliminado." + ] + } + } }, { "id": "bd7123c9c441eddfaeb5bdef", @@ -2623,13 +2843,17 @@ ], "type": "waypoint", "challengeType": 1, - "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. ", - "

Instrucciones

", - "Vamos a modificar nuestra función welcomeToBooleans para que devuelva true en lugar de false cuando se pulse el botón de ejecución." - ] + "translations": { + "es": { + "title": "Entiende los valores booleanos", + "description": [ + "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. ", + "

Instrucciones

", + "Vamos a modificar nuestra función welcomeToBooleans para que devuelva true en lugar de false cuando se pulse el botón de ejecución." + ] + } + } }, { "id": "cf1111c1c12feddfaeb3bdef", @@ -2680,20 +2904,24 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Por ejemplo:", - "if (1 === 2) {", - "  return true;", - "} else {", - "  return false;", - "}", - "Vamos a usar la instrucción if con else (\"else\" puede traducirse como \"de lo contrario\") para hacer un juego de cara o sello.", - "

Instrucciones

", - "Crea una instrucción if con else que retorne la cadena \"heads\" si la variable flip es cero, o bien que retorne \"tails\" si la variable flip no es cero. " - ] + "translations": { + "es": { + "title": "Usa lógica condicional con instrucciones if y else", + "description": [ + "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.", + "Por ejemplo:", + "if (1 === 2) {", + "  return true;", + "} else {", + "  return false;", + "}", + "Vamos a usar la instrucción if con else (\"else\" puede traducirse como \"de lo contrario\") para hacer un juego de cara o sello.", + "

Instrucciones

", + "Crea una instrucción if con else que retorne la cadena \"heads\" si la variable flip es cero, o bien que retorne \"tails\" si la variable flip no es cero. " + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d0", @@ -2732,17 +2960,21 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "
function pruebaIgualdad(miVal) {
if (miVal == 10) {
return \"Igual\";
}
return \"No Es Igual\";
}
", - "Si miVal es igual a 10, el operador de igualdad retornará true(verdadero), así el código entre llaves será ejecutado y la función retornará \"Equal\". De otra manera, la función retornará \"Not Equal\".", - "Para que JavaScript pueda comparar dos tipos de datos diferentes (por ejemplo, números y cadenas de texto), debe convertir un tipo a otro. Una vez que lo hace, sin embargo, puede comparar términos de la siguiente manera:", - "
1 == 1 // true
1 == 2 // false
1 == '1' // true
\"3\" == 3 // true
", - "

Instrucciones

", - "Agrega el operador de igualdad a la línea indicada de manera que la función retornará \"Equal\" cuando val sea equivalente a 12" - ] + "translations": { + "es": { + "title": "La comparación con el operador de igualdad", + "description": [ + "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.", + "
function pruebaIgualdad(miVal) {
if (miVal == 10) {
return \"Igual\";
}
return \"No Es Igual\";
}
", + "Si miVal es igual a 10, el operador de igualdad retornará true(verdadero), así el código entre llaves será ejecutado y la función retornará \"Equal\". De otra manera, la función retornará \"Not Equal\".", + "Para que JavaScript pueda comparar dos tipos de datos diferentes (por ejemplo, números y cadenas de texto), debe convertir un tipo a otro. Una vez que lo hace, sin embargo, puede comparar términos de la siguiente manera:", + "
1 == 1 // true
1 == 2 // false
1 == '1' // true
\"3\" == 3 // true
", + "

Instrucciones

", + "Agrega el operador de igualdad a la línea indicada de manera que la función retornará \"Equal\" cuando val sea equivalente a 12" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d1", @@ -2779,15 +3011,19 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "
3 === 3 // true
3 === '3' // falso
", - "En el segundo ejemplo, 3 es de tipo Número y '3' es de tipo Cadena.", - "

Instrucciones

", - "Usa el operador de igualdad estricta en la sentencia if de manera que la función retorne \"Equal\" cuando val es estrictamente igual a 7" - ] + "translations": { + "es": { + "title": "La comparación con el operador de estricta igualdad", + "description": [ + "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", + "
3 === 3 // true
3 === '3' // falso
", + "En el segundo ejemplo, 3 es de tipo Número y '3' es de tipo Cadena.", + "

Instrucciones

", + "Usa el operador de igualdad estricta en la sentencia if de manera que la función retorne \"Equal\" cuando val es estrictamente igual a 7" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d2", @@ -2825,14 +3061,18 @@ ], "type": "waypoint", "challengeType": 1, - "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", - "
1 != 2 // true
1 != \"1\" // false
1 != '1' // false
1 != true // false
0 != false // false
", - "

Instrucciones

", - "Agrega el operador de desigualdad != en la sentencia if de manera que la función retorne \"Not Equal\" (No igual a) cuando val no es equivalente a 99" - ] + "translations": { + "es": { + "title": "La comparación con el operador de desigualdad", + "description": [ + "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", + "
1 != 2 // true
1 != \"1\" // false
1 != '1' // false
1 != true // false
0 != false // false
", + "

Instrucciones

", + "Agrega el operador de desigualdad != en la sentencia if de manera que la función retorne \"Not Equal\" (No igual a) cuando val no es equivalente a 99" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d3", @@ -2874,14 +3114,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Ejemplos", - "
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
", - "

Instrucciones

", - "Agrega el operador de estricta desigualdad a la sentencia if de manera que la función retorne \"Not Equal\" cuando val no es estrictamente igual a 17" - ] + "translations": { + "es": { + "title": "La comparación con el operador de estricta desigualdad", + "description": [ + "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

", + "Agrega el operador de estricta desigualdad a la sentencia if de manera que la función retorne \"Not Equal\" cuando val no es estrictamente igual a 17" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d4", @@ -2926,15 +3170,19 @@ ], "type": "waypoint", "challengeType": 1, - "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).", - "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
", - "

Instrucciones

", - "Agrega el operador mayor que para las líneas indicadas de manera que las sentencias retornadas tengan sentido." - ] + "translations": { + "es": { + "title": "La comparación con el operador mayor que", + "description": [ + "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
", + "

Instrucciones

", + "Agrega el operador mayor que para las líneas indicadas de manera que las sentencias retornadas tengan sentido." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d5", @@ -2979,15 +3227,19 @@ ], "type": "waypoint", "challengeType": 1, - "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).", - "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
", - "

Instrucciones

", - "Agrega el operador mayor o igual a las líneas indicadas de manera que las sentencias de retorno tengan sentido." - ] + "translations": { + "es": { + "title": "La comparación con el operador mayor o ogual", + "description": [ + "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
", + "

Instrucciones

", + "Agrega el operador mayor o igual a las líneas indicadas de manera que las sentencias de retorno tengan sentido." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d6", @@ -3030,14 +3282,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Ejemplos", - "
2 < 5 // true
'3' < 7 // true
5 < 5 // false
3 < 2 // false
'8' < 4 // false
", - "

Instrucciones

", - "Agregar el operador menor que a las líneas indicadas de modo que las sentencias de retorno tengan sentido." - ] + "translations": { + "es": { + "title": "La comparación con el operador menor que", + "description": [ + "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

", + "Agregar el operador menor que a las líneas indicadas de modo que las sentencias de retorno tengan sentido." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d7", @@ -3082,14 +3338,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Ejemplos", - "
4 <= 5 // true
'7' <= 7 // true
5 <= 5 // true
3 <= 2 // false
'8' <= 4 // false
", - "

Instrucciones

", - "Agrega el operador menor o igual a las líneas indicadas de modo que las sentencias de retorno tengan sentido." - ] + "translations": { + "es": { + "title": "La comparación con el operador menor o igual", + "description": [ + "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

", + "Agrega el operador menor o igual a las líneas indicadas de modo que las sentencias de retorno tengan sentido." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d8", @@ -3138,16 +3398,20 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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:", - "
if (num > 5 && num < 10) {
return \"Yes\";
}
return \"No\";
", - "

Instrucciones

", - "Combina las dos sentencias if dentro de una sentencia la cual retornará \"Yes\" si val es menor o igual a 50 y mayor o igual a 25. De otra manera, retornará \"No\"." - ] + "translations": { + "es": { + "title": "La comparación con el operador lógico y", + "description": [ + "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:", + "
if (num > 5 && num < 10) {
return \"Yes\";
}
return \"No\";
", + "

Instrucciones

", + "Combina las dos sentencias if dentro de una sentencia la cual retornará \"Yes\" si val es menor o igual a 50 y mayor o igual a 25. De otra manera, retornará \"No\"." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244d9", @@ -3198,16 +3462,20 @@ ], "type": "waypoint", "challengeType": 1, - "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 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:", - "
if (num > 10 || num < 5) {
return \"No\";
}
return \"Yes\";
", - "

Instrucciones

", - "Combina las dos sentencias if dentro de una sentencia la cual retorne \"Outside\" si val no está entre 10 y 20, inclusive. De otra manera, retorna \"Inside\"." - ] + "translations": { + "es": { + "title": "La comparación con el operador lógico o", + "description": [ + "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:", + "
if (num > 10 || num < 5) {
return \"No\";
}
return \"Yes\";
", + "

Instrucciones

", + "Combina las dos sentencias if dentro de una sentencia la cual retorne \"Outside\" si val no está entre 10 y 20, inclusive. De otra manera, retorna \"Inside\"." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244da", @@ -3254,13 +3522,17 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "
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." - ] + "translations": { + "es": { + "title": "Introducción de las sentencias else", + "description": [ + "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." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244db", @@ -3303,13 +3575,17 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "
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." - ] + "translations": { + "es": { + "title": "Introducción de las sentencias else if", + "description": [ + "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." + ] + } + } }, { "id": "5690307fddb111c6084545d7", @@ -3351,20 +3627,24 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Orden lógico en sentencias else if", - "descriptionEs": [ - "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:", - "
function foo(x) {
if (x < 1) {
return \"Menor que uno\";
} else if (x < 2) {
return \"Menor que dos\";
} else {
return \"Mayor o igual a dos\";
}
}
", - "Y el segundo solo cambia el orden de las sentencias:", - "
function bar(x) {
if (x < 2) {
return \"Menor que dos\";
} else if (x < 1) {
return \"Menor que uno\";
} else {
return \"Mayor o igual a dos\";
}
}
", - "Mientras esas dos funciones parecen casi idénticas, si nosotros pasamos un número a ambas obtendremos diferentes salidas.", - "
foo(0) // \"Menor que uno\"
bar(0) // \"Menor que dos\"
", - "

Instrucciones

", - "Cambia el orden de la lógica en la función de manera que esta retorne las sentencias correctas en todos los casos." - ] + "translations": { + "es": { + "title": "Orden lógico en sentencias else if", + "description": [ + "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:", + "
function foo(x) {
if (x < 1) {
return \"Menor que uno\";
} else if (x < 2) {
return \"Menor que dos\";
} else {
return \"Mayor o igual a dos\";
}
}
", + "Y el segundo solo cambia el orden de las sentencias:", + "
function bar(x) {
if (x < 2) {
return \"Menor que dos\";
} else if (x < 1) {
return \"Menor que uno\";
} else {
return \"Mayor o igual a dos\";
}
}
", + "Mientras esas dos funciones parecen casi idénticas, si nosotros pasamos un número a ambas obtendremos diferentes salidas.", + "
foo(0) // \"Menor que uno\"
bar(0) // \"Menor que dos\"
", + "

Instrucciones

", + "Cambia el orden de la lógica en la función de manera que esta retorne las sentencias correctas en todos los casos." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244dc", @@ -3409,14 +3689,18 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
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:", - "num < 5 - retorna \"Tiny\"
num < 10 - retorna \"Small\"
num < 15 - retorna \"Medium\"
num < 20 - retorna \"Large\"
num >= 20 - retorna \"Huge\"" - ] + "translations": { + "es": { + "title": "Encadenamiento de sentencias else if", + "description": [ + "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:", + "num < 5 - retorna \"Tiny\"
num < 10 - retorna \"Small\"
num < 15 - retorna \"Medium\"
num < 20 - retorna \"Large\"
num >= 20 - retorna \"Huge\"" + ] + } + } }, { "id": "5664820f61c48e80c9fa476c", @@ -3458,13 +3742,17 @@ ], "type": "checkpoint", "challengeType": 1, - "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.", - "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." - ] + "translations": { + "es": { + "title": "Código de golf", + "description": [ + "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." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244dd", @@ -3509,15 +3797,19 @@ "Switch Statement" ], "challengeType": 1, - "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.", - "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.", - "

Instrucciones

", - "Escribe una sentencia switch que pruebe val y establezca answer para las siguientes condiciones:
1 - \"alpha\"
2 - \"beta\"
3 - \"gamma\"
4 - \"delta\"" - ] + "translations": { + "es": { + "title": "Seleccionar desde diferentes opciones con la sentencia switch", + "description": [ + "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.", + "

Instrucciones

", + "Escribe una sentencia switch que pruebe val y establezca answer para las siguientes condiciones:
1 - \"alpha\"
2 - \"beta\"
3 - \"gamma\"
4 - \"delta\"" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244de", @@ -3559,14 +3851,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Una sentencia default debería ser el último caso.", - "
switch (num) {
case valor1:
sentencia1;
break;
case valor2:
sentencia2;
break;
...
default:
sentenciaDefault;
}
", - "

Instrucciones

", - "Escribe una sentencia switch para establecer answer para las siguientes condiciones:
\"a\" - \"apple\"
\"b\" - \"bird\"
\"c\" - \"cat\"
default - \"stuff\"" - ] + "translations": { + "es": { + "title": "Agregar una opción por omisión (default) en una sentencia switch", + "description": [ + "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

", + "Escribe una sentencia switch para establecer answer para las siguientes condiciones:
\"a\" - \"apple\"
\"b\" - \"bird\"
\"c\" - \"cat\"
default - \"stuff\"" + ] + } + } }, { "id": "56533eb9ac21ba0edf2244df", @@ -3613,15 +3909,19 @@ ], "type": "waypoint", "challengeType": 1, - "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í:", - "
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

", - "Escribe una sentencia switch para establecer answer para los siguientes rangos:
1-3 - \"Low\"
4-6 - \"Mid\"
7-9 - \"High\"", - "Nota
Necesitarás tener una sentencia case por cada número en el rango." - ] + "translations": { + "es": { + "title": "Múltiples opciones idénticas en una sentencias switch", + "description": [ + "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

", + "Escribe una sentencia switch para establecer answer para los siguientes rangos:
1-3 - \"Low\"
4-6 - \"Mid\"
7-9 - \"High\"", + "Nota
Necesitarás tener una sentencia case por cada número en el rango." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244e0", @@ -3677,15 +3977,19 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
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\";
}
", - "

Instrucciones

", - "Cambia las sentencias if/if else anidadas dentro de una sentencia switch." - ] + "translations": { + "es": { + "title": "Reemplazar cadenas if else con switch", + "description": [ + "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\";
}
", + "

Instrucciones

", + "Cambia las sentencias if/if else anidadas dentro de una sentencia switch." + ] + } + } }, { "id": "5679ceb97cbaa8c51670a16b", @@ -3726,16 +4030,20 @@ ], "type": "waypoint", "challengeType": 1, - "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).", - "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:", - "
function sonIguales(a,b) {
return a === b;
}
", - "

Instrucciones

", - "Arregla la función isLess para remover las sentencias if/else." - ] + "translations": { + "es": { + "title": "Retornar valores booleanos desde funciones", + "description": [ + "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:", + "
function sonIguales(a,b) {
return a === b;
}
", + "

Instrucciones

", + "Arregla la función isLess para remover las sentencias if/else." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c4", @@ -3781,16 +4089,20 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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.", - "

Instrucciones

", - "Modifica la función abTest de manera que si a o b son menores que 0 la función saldrá inmediatamente con un valor undefined.", - "Pista
Recuerda que undefined es una palabra clave, no una cadena." - ] + "translations": { + "es": { + "title": "Retornar un patrón temprano para funciones", + "description": [ + "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.", + "

Instrucciones

", + "Modifica la función abTest de manera que si a o b son menores que 0 la función saldrá inmediatamente con un valor undefined.", + "Pista
Recuerda que undefined es una palabra clave, no una cadena." + ] + } + } }, { "id": "565bbe00e9cc8ac0725390f4", @@ -3833,14 +4145,18 @@ ], "type": "checkpoint", "challengeType": 1, - "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.", - "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.", - "Ejemplo de Salida
\"-3 Hold\"
\"5 Bet\"" - ] + "translations": { + "es": { + "title": "Contar cartas", + "description": [ + "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.", + "Ejemplo de Salida
\"-3 Hold\"
\"5 Bet\"" + ] + } + } }, { "id": "56bbb991ad1ed5201cd392d0", @@ -3888,21 +4204,25 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Esto es un objeto de ejemplo:", - "var cat = {", - "  \"name\": \"Whiskers\",", - "  \"legs\": 4,", - "  \"tails\": 1,", - "  \"enemies\": [\"Water\", \"Dogs\"]", - "};", - "Los objetos son útiles para almacenar datos de manera estructurada, y pueden representar objetos del mundo real, como un gato.", - "Vamos a tratar de hacer un objeto que representa un perro, lo llamaremos mydog y contendrá las propiedades \"name\" (una cadena con el nombre), \"legs\" (piernas), \"tails\" (colas) y \"friends\" (amigos). ", - "Podrás establecer estas propiedades del objeto en los valores que desees, siempre y cuando \"name\" sea una cadena, \"legs\" y \"tails\" sean números, y \"friends\" sea un vector." - ] + "translations": { + "es": { + "title": "Construye objetos en JavaScript", + "description": [ + "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.", + "Esto es un objeto de ejemplo:", + "var cat = {", + "  \"name\": \"Whiskers\",", + "  \"legs\": 4,", + "  \"tails\": 1,", + "  \"enemies\": [\"Water\", \"Dogs\"]", + "};", + "Los objetos son útiles para almacenar datos de manera estructurada, y pueden representar objetos del mundo real, como un gato.", + "Vamos a tratar de hacer un objeto que representa un perro, lo llamaremos mydog y contendrá las propiedades \"name\" (una cadena con el nombre), \"legs\" (piernas), \"tails\" (colas) y \"friends\" (amigos). ", + "Podrás establecer estas propiedades del objeto en los valores que desees, siempre y cuando \"name\" sea una cadena, \"legs\" y \"tails\" sean números, y \"friends\" sea un vector." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c7", @@ -3944,15 +4264,19 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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
", - "

Instrucciones

", - "Lee los valores de propiedades de testObj usando notación punto. Asigna la variable hatValue igual a la propiedad objeto hat y asigna la variable shirtValue igual a la propiedad objeto shirt." - ] + "translations": { + "es": { + "title": "Acceder a propiedades de objetos con el operador punto", + "description": [ + "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
", + "

Instrucciones

", + "Lee los valores de propiedades de testObj usando notación punto. Asigna la variable hatValue igual a la propiedad objeto hat y asigna la variable shirtValue igual a la propiedad objeto shirt." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c8", @@ -3994,15 +4318,19 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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).", - "

Instrucciones

", - "Lee los valores de las propiedades \"an entree\" y \"the drink\" de testObj usando la notación corchete." - ] + "translations": { + "es": { + "title": "Acceder a las propiedades de objetos con la notación corchete", + "description": [ + "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).", + "

Instrucciones

", + "Lee los valores de las propiedades \"an entree\" y \"the drink\" de testObj usando la notación corchete." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244c9", @@ -4046,17 +4374,21 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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:", - "
var miPerro = \"Cazador\";
var perros = {
Fido: \"Mutt\",\n Cazador: \"Doberman\",\n Snoopie: \"Beagle\"
}
var raza = perros[miPerro]; // \"Cazador\"
console.log(raza)// \"Doberman\"
", - "Nota que no usamos comillas alrededor del nombre de la variable (miPerro) cuando la usamos para acceder a la propiedad (perros[miPerro] porque estamos usando el valor de la variable y no su nombre", - "

Instrucciones

", - "Usa la variable playerNumber para buscar y asignar a player el jugador 16 de testObj, usa la notación corchete." - ] + "translations": { + "es": { + "title": "Acceder a propiedades de objetos con variables", + "description": [ + "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:", + "
var miPerro = \"Cazador\";
var perros = {
Fido: \"Mutt\",\n Cazador: \"Doberman\",\n Snoopie: \"Beagle\"
}
var raza = perros[miPerro]; // \"Cazador\"
console.log(raza)// \"Doberman\"
", + "Nota que no usamos comillas alrededor del nombre de la variable (miPerro) cuando la usamos para acceder a la propiedad (perros[miPerro] porque estamos usando el valor de la variable y no su nombre", + "

Instrucciones

", + "Usa la variable playerNumber para buscar y asignar a player el jugador 16 de testObj, usa la notación corchete." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392d1", @@ -4107,22 +4439,26 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "var ourDog = {", - "  \"name\": \"Camper\",", - "  \"legs\": 4,", - "  \"tails\": 1,", - "  \"friends\": [\"everything!\"]", - "};", - "Dado que es un perro particularmente feliz, vamos a cambiar su nombre a \"Happy Camper\". Así es como actualizamos la propiedad nombre del objeto: ", - "ourDog.name = \"Happy Camper\";", - "Ahora, cuando ejecutemos return ourDog.name, en lugar de obtener \"Camper\", vamos a recibir su nuevo nombre, \"Happy Camper\".", - "

Instrucciones

", - "Vamos a actualizar la propiedad del objeto mydog. Cambiemos su nombre de \"Coder\" a \"Happy Coder\"." - ] + "translations": { + "es": { + "title": "Actualiza las propiedades de un objeto en JavaScript", + "description": [ + "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:", + "var ourDog = {", + "  \"name\": \"Camper\",", + "  \"legs\": 4,", + "  \"tails\": 1,", + "  \"friends\": [\"everything!\"]", + "};", + "Dado que es un perro particularmente feliz, vamos a cambiar su nombre a \"Happy Camper\". Así es como actualizamos la propiedad nombre del objeto: ", + "ourDog.name = \"Happy Camper\";", + "Ahora, cuando ejecutemos return ourDog.name, en lugar de obtener \"Camper\", vamos a recibir su nuevo nombre, \"Happy Camper\".", + "

Instrucciones

", + "Vamos a actualizar la propiedad del objeto mydog. Cambiemos su nombre de \"Coder\" a \"Happy Coder\"." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392d2", @@ -4171,15 +4507,19 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "ourDog.bark = \"bow-wow\";", - "Ahora, cuando ejecutemos return ourDog.bark, vamos a recbir su ladrido, \" bow-wow \".", - "

Instrucciones

", - "Vamos a añadir una propiedad ladra a myDog y a ponerle un sonido de perro, tal como \"woof\"." - ] + "translations": { + "es": { + "title": "Añade nuevas propiedades a un objeto JavaScript", + "description": [ + "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:", + "ourDog.bark = \"bow-wow\";", + "Ahora, cuando ejecutemos return ourDog.bark, vamos a recbir su ladrido, \" bow-wow \".", + "

Instrucciones

", + "Vamos a añadir una propiedad ladra a myDog y a ponerle un sonido de perro, tal como \"woof\"." + ] + } + } }, { "id": "56bbb991ad1ed5201cd392d3", @@ -4227,13 +4567,17 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Elimina propiedades de un objeto JavaScript", - "descriptionEs": [ - "También podemos eliminar propiedades de los objetos de esta manera:", - "delete ourDog.bark;", - "

Instrucciones

", - "Borremos la propiedad \"tails\" de myDog." - ] + "translations": { + "es": { + "title": "Elimina propiedades de un objeto JavaScript", + "description": [ + "También podemos eliminar propiedades de los objetos de esta manera:", + "delete ourDog.bark;", + "

Instrucciones

", + "Borremos la propiedad \"tails\" de myDog." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244ca", @@ -4294,14 +4638,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "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

", - "Convierte la sentencia switch en una tabla de búsqueda llamada lookup. Usala para buscar val y asigna la cadena asociada a la variable result." - ] + "translations": { + "es": { + "title": "Usar objetos para búsquedas", + "description": [ + "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

", + "Convierte la sentencia switch en una tabla de búsqueda llamada lookup. Usala para buscar val y asigna la cadena asociada a la variable result." + ] + } + } }, { "id": "567af2437cbaa8c51670a16c", @@ -4344,14 +4692,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Ejemplo", - "
var miObj = {
arriba: \"sombrero\",
abajo: \"pantalones\"
};
miObj.hasOwnProperty(\"arriba\"); // true
miObj.hasOwnProperty(\"medio\"); // false
", - "

Instrucciones

", - "Modifica la función checkObj que prueba si myObj tiene la propiedad checkProp. Si la propiedad es encontrada, retorna el valor de esa propiedad. Si no, retorna \"Not Found\"." - ] + "translations": { + "es": { + "title": "Probar si un objeto tiene cierta propiedad", + "description": [ + "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

", + "Modifica la función checkObj que prueba si myObj tiene la propiedad checkProp. Si la propiedad es encontrada, retorna el valor de esa propiedad. Si no, retorna \"Not Found\"." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244cb", @@ -4404,16 +4756,20 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Manipula objetos complicados", - "descriptionEs": [ - "Los objetos Javascript son flexibles porque permiten Estructuras de Datos con combinaciones arbitrarias de cadenas, números, booleanos, vectores, funciones, y objetos.", - "Aquí está un ejemplo de un objeto complicado:", - "
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.", - "Nota
En vectores que tengan más de un objeto, necesitarás separar un objeto de otro mediante comas.", - "

Instrucciones

", - "Agrega un nuevo álbum al objeto myMusic. Agrega las cadenas artist y title, el número release_year y un vector de cadenas formats." - ] + "translations": { + "es": { + "title": "Manipula objetos complicados", + "description": [ + "Los objetos Javascript son flexibles porque permiten Estructuras de Datos con combinaciones arbitrarias de cadenas, números, booleanos, vectores, funciones, y objetos.", + "Aquí está un ejemplo de un objeto complicado:", + "
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.", + "Nota
En vectores que tengan más de un objeto, necesitarás separar un objeto de otro mediante comas.", + "

Instrucciones

", + "Agrega un nuevo álbum al objeto myMusic. Agrega las cadenas artist y title, el número release_year y un vector de cadenas formats." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244cc", @@ -4462,14 +4818,18 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Acceder a objetos anidados", - "descriptionEs": [ - "Las sub-propiedades de los objetos pueden ser accesadas mediante encadenamiento de la notación punto o corchete.", - "Aquí está un objeto 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

", - "Accede al objeto myStorage para recuperar el contenido de glove box. Usa notación corchete para las propiedades con un espacio en su nombre." - ] + "translations": { + "es": { + "title": "Acceder a objetos anidados", + "description": [ + "Las sub-propiedades de los objetos pueden ser accesadas mediante encadenamiento de la notación punto o corchete.", + "Aquí está un objeto 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

", + "Accede al objeto myStorage para recuperar el contenido de glove box. Usa notación corchete para las propiedades con un espacio en su nombre." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244cd", @@ -4525,14 +4885,18 @@ ], "type": "waypoint", "challengeType": 1, - "titleEs": "Acceder a vectores anidados", - "descriptionEs": [ - "Como hemos visto en ejemplos anteriores, los objetos 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

", - "Recupera el segundo arbol de la variable myPlants usando notación punto para objetos y notación corchete para vectores." - ] + "translations": { + "es": { + "title": "Acceder a vectores anidados", + "description": [ + "Como hemos visto en ejemplos anteriores, los objetos 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

", + "Recupera el segundo arbol de la variable myPlants usando notación punto para objetos y notación corchete para vectores." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244cf", @@ -4608,17 +4972,21 @@ ], "type": "checkpoint", "challengeType": 1, - "titleEs": "Colección de registros", - "descriptionEs": [ - "Se te da un objeto 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.", - "Si la propiedad prop es \"tracks\" y value no está en blanco, empuja (push) el valor value al final del vector tracks.", - "Si el valor value está en blanco, elimina esa prop.", - "Siempre retorna el objeto collection entero.", - "Nota
No olvides usar notación corchete cuando accedes a propiedades de objetos con variables." - ] + "translations": { + "es": { + "title": "Colección de registros", + "description": [ + "Se te da un objeto 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.", + "Si la propiedad prop es \"tracks\" y value no está en blanco, empuja (push) el valor value al final del vector tracks.", + "Si el valor value está en blanco, elimina esa prop.", + "Siempre retorna el objeto collection entero.", + "Nota
No olvides usar notación corchete cuando accedes a propiedades de objetos con variables." + ] + } + } }, { "id": "cf1111c1c11feddfaeb5bdef", @@ -4664,24 +5032,28 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Los ciclos for se declaran con tres expresiones opcionales separadas por punto y coma:", - "for ([inicialización]; [condición]; [expresión-final])", - "La inicialización se ejecuta sólo una vez antes de que empiece el ciclo. Normalmente se utiliza para definir e inicializar su variable de ciclo. ", - "La expresión condición se evalúa al principio de cada iteración del ciclo y continuará en el ciclo siempre y cuando sea verdadera (true). Cuando la condición sea falsa (false) al comienzo de la iteración, se detendrá la ejecución del ciclo. Esto significa que si la condición inicia en el valor falso false, el ciclo no se ejecutará. ", - "La expresión final se ejecuta al final de cada repetición del ciclo, antes del siguiente chequeo de la condición y se utiliza generalmente para aumentar o disminuir el contador del ciclo.", - "En el siguiente ejemplo inicializamos con i = 0 e iteramos mientras nuestra condición i <5 sea verdadera. Vamos a incrementar i en 1 en cada iteración del ciclo con i++ como nuestra expresión final. ", - "var ourArray = [];", - "for (var i = 0; i < 5; i++) {", - "  ourArray.push(i);", - "}", - "ourArray ahora contendrá [0,1,2,3,4].", - "

Instrucciones

", - "Vamos a utilizar un ciclo for para empujar los valores del 1 al 5 en myArray." - ] + "translations": { + "es": { + "title": "Iterar en JavaScript con ciclos for", + "description": [ + "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.", + "Los ciclos for se declaran con tres expresiones opcionales separadas por punto y coma:", + "for ([inicialización]; [condición]; [expresión-final])", + "La inicialización se ejecuta sólo una vez antes de que empiece el ciclo. Normalmente se utiliza para definir e inicializar su variable de ciclo. ", + "La expresión condición se evalúa al principio de cada iteración del ciclo y continuará en el ciclo siempre y cuando sea verdadera (true). Cuando la condición sea falsa (false) al comienzo de la iteración, se detendrá la ejecución del ciclo. Esto significa que si la condición inicia en el valor falso false, el ciclo no se ejecutará. ", + "La expresión final se ejecuta al final de cada repetición del ciclo, antes del siguiente chequeo de la condición y se utiliza generalmente para aumentar o disminuir el contador del ciclo.", + "En el siguiente ejemplo inicializamos con i = 0 e iteramos mientras nuestra condición i <5 sea verdadera. Vamos a incrementar i en 1 en cada iteración del ciclo con i++ como nuestra expresión final. ", + "var ourArray = [];", + "for (var i = 0; i < 5; i++) {", + "  ourArray.push(i);", + "}", + "ourArray ahora contendrá [0,1,2,3,4].", + "

Instrucciones

", + "Vamos a utilizar un ciclo for para empujar los valores del 1 al 5 en myArray." + ] + } + } }, { "id": "56104e9e514f539506016a5c", @@ -4722,19 +5094,23 @@ ], "type": "waypoint", "challengeType": 1, - "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. ", - "var ourArray = [];", - "for (var i = 0; i < 10; i += 2) {", - "  ourArray.push(i);", - "}", - "ourArray ahora contendrá [0,2,4,6,8].", - "Vamos a cambiar nuestra inicialización y expresión final para que podamos contar los números impares.", - "

Instrucciones

", - "Empuja los números impares del 1 al 9 en myArray utilizando un ciclo for." - ] + "translations": { + "es": { + "title": "Itera por los números pares con un ciclo for", + "description": [ + "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. ", + "var ourArray = [];", + "for (var i = 0; i < 10; i += 2) {", + "  ourArray.push(i);", + "}", + "ourArray ahora contendrá [0,2,4,6,8].", + "Vamos a cambiar nuestra inicialización y expresión final para que podamos contar los números impares.", + "

Instrucciones

", + "Empuja los números impares del 1 al 9 en myArray utilizando un ciclo for." + ] + } + } }, { "id": "56105e7b514f539506016a5e", @@ -4776,20 +5152,24 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Vamos a empezar con i = 10 e iteraremos mientras i > 0. Vamos a decrementar i de a 2 por cada iteración con i -= 2. ", - "var ourArray = [];", - "for (var i = 10; i > 0; i -= 2) {", - "  ourArray.push(i);", - "}", - "ourArray ahora contendrá [10,8,6,4,2].", - "Vamos a cambiar nuestra inicialización y la expresión final para que podamos contar hacia atrás de dos en dos pero números impares.", - "

Instrucciones

", - "Empuja los números impares del 9 a 1 en myArray utilizando un ciclo for." - ] + "translations": { + "es": { + "title": "Cuenta hacia atrás con un ciclo for", + "description": [ + "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.", + "Vamos a empezar con i = 10 e iteraremos mientras i > 0. Vamos a decrementar i de a 2 por cada iteración con i -= 2. ", + "var ourArray = [];", + "for (var i = 10; i > 0; i -= 2) {", + "  ourArray.push(i);", + "}", + "ourArray ahora contendrá [10,8,6,4,2].", + "Vamos a cambiar nuestra inicialización y la expresión final para que podamos contar hacia atrás de dos en dos pero números impares.", + "

Instrucciones

", + "Empuja los números impares del 9 a 1 en myArray utilizando un ciclo for." + ] + } + } }, { "id": "5675e877dbd60be8ad28edc6", @@ -4832,14 +5212,18 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
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

", - "Declara e inicializa una variable total en 0. Usa un ciclo for para añadir el valor de cada elemento del vector myArr a total." - ] + "translations": { + "es": { + "title": "Iterar a través de un vector con un ciclo for", + "description": [ + "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

", + "Declara e inicializa una variable total en 0. Usa un ciclo for para añadir el valor de cada elemento del vector myArr a total." + ] + } + } }, { "id": "56533eb9ac21ba0edf2244e1", @@ -4878,14 +5262,18 @@ ], "type": "waypoint", "challengeType": 1, - "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:", - "
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

", - "Modifica la función multiplyAll de manera que esta multiplique la variable product por cada número en los sub-vectores de arr" - ] + "translations": { + "es": { + "title": "Anidar ciclos for", + "description": [ + "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

", + "Modifica la función multiplyAll de manera que esta multiplique la variable product por cada número en los sub-vectores de arr" + ] + } + } }, { "id": "cf1111c1c11feddfaeb1bdef", @@ -4918,20 +5306,24 @@ ], "type": "waypoint", "challengeType": 1, - "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í.", - "var ourArray = [];", - "var i = 0;", - "while(i < 5) {", - "  ourArray.push(i);", - "  i++;", - "}", - "Intentemos que un ciclo while empuje valores en un vector.", - "

Instrucciones

", - "Empuja los números de 0 a 4 para myArray utilizando un ciclo while." - ] + "translations": { + "es": { + "title": "Iterar con JavaScript con ciclos while", + "description": [ + "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í.", + "var ourArray = [];", + "var i = 0;", + "while(i < 5) {", + "  ourArray.push(i);", + "  i++;", + "}", + "Intentemos que un ciclo while empuje valores en un vector.", + "

Instrucciones

", + "Empuja los números de 0 a 4 para myArray utilizando un ciclo while." + ] + } + } }, { "id": "5688e62ea601b2482ff8422b", @@ -4996,16 +5388,20 @@ ], "type": "checkpoint", "challengeType": 1, - "titleEs": "Búsqueda de perfiles", - "descriptionEs": [ - "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.", - "Si firstName no corresponde a ningun contacto entonces retorna \"No such contact\"", - "Si prop no corresponde a ninguna propiedad válida entonces retorna \"No such property\"", - "" - ] + "translations": { + "es": { + "title": "Búsqueda de perfiles", + "description": [ + "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.", + "Si firstName no corresponde a ningun contacto entonces retorna \"No such contact\"", + "Si prop no corresponde a ninguna propiedad válida entonces retorna \"No such property\"", + "" + ] + } + } }, { "id": "cf1111c1c11feddfaeb9bdef", @@ -5040,14 +5436,18 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Cambia randomFraction para que devuelva un número al azar en lugar de devolver 0.", - "Ten en cuenta que puedes retornar lo retornado por una función, igual que harías para devolver una variable o valor." - ] + "translations": { + "es": { + "title": "Generar fracciones al azar con JavaScript", + "description": [ + "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.", + "

Instrucciones

", + "Cambia randomFraction para que devuelva un número al azar en lugar de devolver 0.", + "Ten en cuenta que puedes retornar lo retornado por una función, igual que harías para devolver una variable o valor." + ] + } + } }, { "id": "cf1111c1c12feddfaeb1bdef", @@ -5086,20 +5486,24 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Entonces vamos a multiplicar este decimal azar por 20.", - "Por último, vamos a usar otra función, Math.floor() para redondear el número hasta su número entero más próximo.", - "Esta técnica nos da un número entero entre 0 y 19.", - "Tenga en cuenta que debido a que estamos redondeando, es imposible obtener 20.", - "Poniendo todo junto, así es como se ve nuestro código:", - "Math.floor(Math.random() * 20);", - "¿Ves como Math.floor toma (Math.random() * 20) como su argumento? Así es - puedes pasar el resultado de un función como argumento de otra función.", - "

Instrucciones

", - "Usa esta técnica para generar y devolver un número entero aleatorio entre 0 y 9." - ] + "translations": { + "es": { + "title": "Genera números aleatorios enteros con JavaScript", + "description": [ + "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.", + "Entonces vamos a multiplicar este decimal azar por 20.", + "Por último, vamos a usar otra función, Math.floor() para redondear el número hasta su número entero más próximo.", + "Esta técnica nos da un número entero entre 0 y 19.", + "Tenga en cuenta que debido a que estamos redondeando, es imposible obtener 20.", + "Poniendo todo junto, así es como se ve nuestro código:", + "Math.floor(Math.random() * 20);", + "¿Ves como Math.floor toma (Math.random() * 20) como su argumento? Así es - puedes pasar el resultado de un función como argumento de otra función.", + "

Instrucciones

", + "Usa esta técnica para generar y devolver un número entero aleatorio entre 0 y 9." + ] + } + } }, { "id": "cf1111c1c12feddfaeb2bdef", @@ -5159,16 +5563,20 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "He aquí la fórmula que utilizaremos. Tómate un momento para leer y tratar de entender lo que el código está haciendo: ", - "Math.floor(Math.random() * (max - min + 1)) + min", - "Definir dos variables: myMin y myMax, y asignales valores enteros.", - "

Instrucciones

", - "A continuación, crea una función llamada myFunction que devuelva un número aleatorio mayor o igual a myMin, y menor o igual a myMax. " - ] + "translations": { + "es": { + "title": "Genera números aleatorios enteros dentro de un rango", + "description": [ + "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.", + "He aquí la fórmula que utilizaremos. Tómate un momento para leer y tratar de entender lo que el código está haciendo: ", + "Math.floor(Math.random() * (max - min + 1)) + min", + "Definir dos variables: myMin y myMax, y asignales valores enteros.", + "

Instrucciones

", + "A continuación, crea una función llamada myFunction que devuelva un número aleatorio mayor o igual a myMin, y menor o igual a myMax. " + ] + } + } }, { "id": "cf1111c1c12feddfaeb6bdef", @@ -5220,19 +5628,23 @@ ], "type": "waypoint", "challengeType": 1, - "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 ", - "Vamos a dividirla un poco:", - "el es el patrón con el que queremos coincidir.", - "g significa que queremos buscar el patrón en toda la cadena y no sólo la primera ocurrencia.", - "i significa que queremos ignorar la capitalización (en mayúsculas o minúsculas) cuando se busque el patrón.", - "Las expresiones regulares se escriben rodeando el patrón con símbolos de barra /.", - "

Instrucciones

", - "Vamos a tratar de seleccionar todas las apariciones de la palabra and en la cadena Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.", - "Podemos hacer esto sustituyendo la parte . de nuestra expresión regular por la palabra and." - ] + "translations": { + "es": { + "title": "Examina un texto con expresiones regulares", + "description": [ + "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 ", + "Vamos a dividirla un poco:", + "el es el patrón con el que queremos coincidir.", + "g significa que queremos buscar el patrón en toda la cadena y no sólo la primera ocurrencia.", + "i significa que queremos ignorar la capitalización (en mayúsculas o minúsculas) cuando se busque el patrón.", + "Las expresiones regulares se escriben rodeando el patrón con símbolos de barra /.", + "

Instrucciones

", + "Vamos a tratar de seleccionar todas las apariciones de la palabra and en la cadena Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.", + "Podemos hacer esto sustituyendo la parte . de nuestra expresión regular por la palabra and." + ] + } + } }, { "id": "cf1111c1c12feddfaeb7bdef", @@ -5274,15 +5686,19 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "Se usa así para hacer coincidir un dígito: /\\d/g.", - "Para hacer coincidir números de varios dígtios a menudo se escribe /\\d+/ g , donde el + que sigue al selector de dígito le permite a la expresión regular coincidir con uno o más dígito es decir coincide con números de varios dígitos.", - "

Instrucciones

", - "Usa el selector \\d para hacer coincidir todos los números de la cadena, permitiendo la posibilidad de hacer coincidir números de varios dígitos." - ] + "translations": { + "es": { + "title": "Encuentra números con expresiones regulares", + "description": [ + "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.", + "Se usa así para hacer coincidir un dígito: /\\d/g.", + "Para hacer coincidir números de varios dígtios a menudo se escribe /\\d+/ g , donde el + que sigue al selector de dígito le permite a la expresión regular coincidir con uno o más dígito es decir coincide con números de varios dígitos.", + "

Instrucciones

", + "Usa el selector \\d para hacer coincidir todos los números de la cadena, permitiendo la posibilidad de hacer coincidir números de varios dígitos." + ] + } + } }, { "id": "cf1111c1c12feddfaeb8bdef", @@ -5323,15 +5739,19 @@ ], "type": "waypoint", "challengeType": 1, - "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). ", - "Una expresión regular con el selector de espacios en blanco puede ser:", - "/\\s+/g", - "

Instrucciones

", - "Se usa para hacer coincidir todos los espacios en blanco en una cadena." - ] + "translations": { + "es": { + "title": "Encuentra espacios en blanco con las expresiones regulares", + "description": [ + "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). ", + "Una expresión regular con el selector de espacios en blanco puede ser:", + "/\\s+/g", + "

Instrucciones

", + "Se usa para hacer coincidir todos los espacios en blanco en una cadena." + ] + } + } }, { "id": "cf1111c1c13feddfaeb3bdef", @@ -5370,13 +5790,17 @@ ], "type": "waypoint", "challengeType": 1, - "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.", - "

Instrucciones

", - "Usa /\\S/g para contar el número de caracteres que no están en blanco en testString." - ] + "translations": { + "es": { + "title": "Hacer coincidir con una expresión regular invertida", + "description": [ + "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.", + "

Instrucciones

", + "Usa /\\S/g para contar el número de caracteres que no están en blanco en testString." + ] + } + } }, { "id": "cf1111c1c12feddfaeb9bdef", @@ -5535,14 +5959,18 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "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.", - "Guarda los tres números aleatorios en slotOne, slotTwo y slotThree.", - "Genera los números aleatorios utilizando el sistema que usamos anteriormente (puedes encontrar una explicación de la fórmula aquí):", - "Math.floor(Math.random() * (3 - 1 + 1)) + 1;" - ] + "translations": { + "es": { + "title": "Crea una máquina tragamonedas en JavaScript", + "description": [ + "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.", + "Guarda los tres números aleatorios en slotOne, slotTwo y slotThree.", + "Genera los números aleatorios utilizando el sistema que usamos anteriormente (puedes encontrar una explicación de la fórmula aquí):", + "Math.floor(Math.random() * (3 - 1 + 1)) + 1;" + ] + } + } }, { "id": "cf1111c1c13feddfaeb1bdef", @@ -5706,18 +6134,22 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "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.", - "null es una estructura de datos de JavaScript que significa \"nada\".", - "El usuario gana cuando los tres números coinciden. Cremos una instrucción if con varias condiciones, a fin de comprobar si todos los números son iguales. ", - "if(slotOne === slotTwo && slotTwo === slotThree){", - "  return null;", - "}", - "Además, tenemos que mostrar al usuario que ha ganado la partida e caso de que esté el mismo número en todas las casillas.", - "Si los tres números coinciden, también hay que poner el texto \"It's A Win\" en el elemento HTML con clase logger." - ] + "translations": { + "es": { + "title": "Añade casillas a tu tragamonedas JavaScript", + "description": [ + "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.", + "null es una estructura de datos de JavaScript que significa \"nada\".", + "El usuario gana cuando los tres números coinciden. Cremos una instrucción if con varias condiciones, a fin de comprobar si todos los números son iguales. ", + "if(slotOne === slotTwo && slotTwo === slotThree){", + "  return null;", + "}", + "Además, tenemos que mostrar al usuario que ha ganado la partida e caso de que esté el mismo número en todas las casillas.", + "Si los tres números coinciden, también hay que poner el texto \"It's A Win\" en el elemento HTML con clase logger." + ] + } + } }, { "id": "cf1111c1c13feddfaeb2bdef", @@ -5887,15 +6319,19 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "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.", - "Una vez que todas estén seleccionados, podemos usar notación de corchetes para acceder a cada casilla individual:", - "$($(\".slot\")[0]).html(slotOne);", - "Este jQuery seleccionará la primera ranura y actualizará su HTML para mostrar el número correcto.", - "Usa el selector anterior para mostrar cada número en su casilla correspondiente." - ] + "translations": { + "es": { + "title": "Da vida a tu máquina tragamonedas en JavaScript", + "description": [ + "Ahora podemos detectar una victoria. Logremos que la máquina tragamonedas funcione. ", + "Usemos un selector de jQuery $(\".slot\") para seleccionar todas las casillas.", + "Una vez que todas estén seleccionados, podemos usar notación de corchetes para acceder a cada casilla individual:", + "$($(\".slot\")[0]).html(slotOne);", + "Este jQuery seleccionará la primera ranura y actualizará su HTML para mostrar el número correcto.", + "Usa el selector anterior para mostrar cada número en su casilla correspondiente." + ] + } + } }, { "id": "cf1111c1c11feddfaeb1bdff", @@ -6073,14 +6509,18 @@ "type": "waypoint", "challengeType": 0, "isBeta": true, - "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. ", - "Aquí está como haríamos que la primera casilla muestre una imagen diferente dependiendo del número aleatorio que se genere:", - "$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');", - "Configura las tres casillas de manera análoga, a continuación, pulsa el botón \"Go\" para jugar con la máquina tragamonedas." - ] + "translations": { + "es": { + "title": "Dale a tu máquina tragamonedas JavaScript algunas imágenes con estilo", + "description": [ + "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. ", + "Aquí está como haríamos que la primera casilla muestre una imagen diferente dependiendo del número aleatorio que se genere:", + "$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');", + "Configura las tres casillas de manera análoga, a continuación, pulsa el botón \"Go\" para jugar con la máquina tragamonedas." + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/basic-ziplines.json b/seed/challenges/01-front-end-development-certification/basic-ziplines.json index f80c162894..641a031e32 100644 --- a/seed/challenges/01-front-end-development-certification/basic-ziplines.json +++ b/seed/challenges/01-front-end-development-certification/basic-ziplines.json @@ -56,84 +56,90 @@ "type": "Waypoint", "isRequired": false, "challengeType": 7, - "titleRu": "Приготовьтесь к разработке фронтенд проектов", - "descriptionRu": [ - [ - "//i.imgur.com/OAD6SJz.png", - "Игра Саймона - один из фронтенд проектов.", - "Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.", - "" - ], - [ - "//i.imgur.com/WBetuBa.jpg", - "Программист от отчаяния кулаком пробивает экран своего ноутбука.", - "Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.", - "" - ], - [ - "//i.imgur.com/p2TpOQd.jpg", - "Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.", - "Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.", - "" - ], - [ - "//i.imgur.com/G1saeDt.gif", - "Гифка показывающая как зарегистрироваться на CodePen.", - "Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\".
Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.
", - "https://codepen.io/signup/free" - ], - [ - "//i.imgur.com/U4y9RJ1.gif", - "Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.", - "В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.", - "" - ], - [ - "//i.imgur.com/G9KFQDL.gif", - "Гифка показывающая как в CodePen добавить к проекту Bootstrap.", - "Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.", - "" - ] - ], - "titleEs": "Prepárate para los Proyectos de Desarrollo de Interfaces", - "descriptionEs": [ - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ], - [ - "//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.
", - "https://codepen.io/signup/free" - ], - [ - "//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.", - "" - ], - [ - "//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.", - "" - ] - ] + "translations": { + "es": { + "title": "Prepárate para los Proyectos de Desarrollo de Interfaces", + "description": [ + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ], + [ + "//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.
", + "https://codepen.io/signup/free" + ], + [ + "//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.", + "" + ], + [ + "//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.", + "" + ] + ] + }, + "ru": { + "title": "Приготовьтесь к разработке фронтенд проектов", + "description": [ + [ + "//i.imgur.com/OAD6SJz.png", + "Игра Саймона - один из фронтенд проектов.", + "Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.", + "" + ], + [ + "//i.imgur.com/WBetuBa.jpg", + "Программист от отчаяния кулаком пробивает экран своего ноутбука.", + "Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.", + "" + ], + [ + "//i.imgur.com/p2TpOQd.jpg", + "Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.", + "Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.", + "" + ], + [ + "//i.imgur.com/G1saeDt.gif", + "Гифка показывающая как зарегистрироваться на CodePen.", + "Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\".
Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.
", + "https://codepen.io/signup/free" + ], + [ + "//i.imgur.com/U4y9RJ1.gif", + "Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.", + "В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.", + "" + ], + [ + "//i.imgur.com/G9KFQDL.gif", + "Гифка показывающая как в CodePen добавить к проекту Bootstrap.", + "Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.", + "" + ] + ] + } + } }, { "id": "bd7158d8c442eddfaeb5bd18", @@ -156,28 +162,34 @@ "type": "zipline", "isRequired": true, "challengeType": 3, - "titleRu": "Создайте страницу посвященную тому что вас вдохновляет", - "descriptionRu": [ - "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: https://codepen.io/FreeCodeCamp/full/NNvBQW/.", - "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", - "Правило #2: Реализуйте следующие пользовательские истории. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.", - "Пользовательская история: Я могу видеть на странице изображение и текст.", - "Пользовательская история: Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.", - "Если что-то не получается, воспользуйтесь Read-Search-Ask.", - "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", - "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." - ], - "titleEs": "Construye una página Tributo", - "descriptionEs": [ - "Objetivo: Crea una aplicación con CodePen.io que funcionalmente sea similar a esta: https://codepen.io/FreeCodeCamp/full/NNvBQW/", - "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)." - ] + "translations": { + "es": { + "title": "Construye una página Tributo", + "description": [ + "Objetivo: Crea una aplicación con CodePen.io que funcionalmente sea similar a esta: https://codepen.io/FreeCodeCamp/full/NNvBQW/", + "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)." + ] + }, + "ru": { + "title": "Создайте страницу посвященную тому что вас вдохновляет", + "description": [ + "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: https://codepen.io/FreeCodeCamp/full/NNvBQW/.", + "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", + "Правило #2: Реализуйте следующие пользовательские истории. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.", + "Пользовательская история: Я могу видеть на странице изображение и текст.", + "Пользовательская история: Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.", + "Если что-то не получается, воспользуйтесь Read-Search-Ask.", + "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", + "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." + ] + } + } }, { "id": "bd7158d8c242eddfaeb5bd13", @@ -205,38 +217,44 @@ "type": "zipline", "isRequired": true, "challengeType": 3, - "titleRu": "Создайте сайт-портфолио", - "descriptionRu": [ - "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: https://codepen.io/FreeCodeCamp/full/QNmvEL/.", - "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", - "Правило #2: Реализуйте следующие пользовательские истории. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.", - "Пользовательская история: Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.", - "Пользовательская история: Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.", - "Пользовательская история: Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).", - "Пользовательская история: Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.", - "Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.", - "В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.", - "Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <a target='_blank'&rt;.", - "Если что-то не получается, воспользуйтесь Read-Search-Ask.", - "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", - "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." - ], - "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: https://codepen.io/FreeCodeCamp/full/QNmvEL/.", - "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 acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.", - "Historia de usuario: Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.", - "Historia de usuario: Puedo ver una imagenes en miniatura de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa marcadores de posición.)", - "Historia de usuario: Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.", - "No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias aplicaciones en CodePen, así que puedes regresar luego para actualizar tu portafolio.", - "Hay varias plantillas buenas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.", - "Ten en mente que CodePen.io ignora la función Window.open(), así que si quieres abrir alguna ventana usando jQuery, necesitarás utilizar como objetivo un elemento de ancla invisible como el siguiente: <a target='_blank'>.", - "Recuerda utilizar 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)." - ] + "translations": { + "es": { + "title": "Construye una página web para tu portafolio", + "description": [ + "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/QNmvEL/.", + "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 acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.", + "Historia de usuario: Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.", + "Historia de usuario: Puedo ver una imagenes en miniatura de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa marcadores de posición.)", + "Historia de usuario: Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.", + "No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias aplicaciones en CodePen, así que puedes regresar luego para actualizar tu portafolio.", + "Hay varias plantillas buenas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.", + "Ten en mente que CodePen.io ignora la función Window.open(), así que si quieres abrir alguna ventana usando jQuery, necesitarás utilizar como objetivo un elemento de ancla invisible como el siguiente: <a target='_blank'>.", + "Recuerda utilizar 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)." + ] + }, + "ru": { + "title": "Создайте сайт-портфолио", + "description": [ + "Задание: Создайте приложение CodePen.io которое функционально соответствует вот этому: https://codepen.io/FreeCodeCamp/full/QNmvEL/.", + "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", + "Правило #2: Реализуйте следующие пользовательские истории. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.", + "Пользовательская история: Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.", + "Пользовательская история: Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.", + "Пользовательская история: Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).", + "Пользовательская история: Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.", + "Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.", + "В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.", + "Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <a target='_blank'&rt;.", + "Если что-то не получается, воспользуйтесь Read-Search-Ask.", + "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.", + "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index c7ad298e24..0209cf800d 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -79,26 +79,32 @@ ], "type": "waypoint", "challengeType": 0, - "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).", - "Con diseño adaptativo, no hay necesidad de diseñar una versión móvil para tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.", - "Puedes agregar Bootstrap a cualquier aplicación simplemente incluyendo el siguiente código al inicio de tu HTML:", - "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", - "En este caso, lo hemos agregado a esta página por ti.", - "Para iniciar, debemos anidar todo nuestro HTML en un elemento div con la clase container-fluid." - ], - "nameFr": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap", - "descriptionFr": [ - "Revenons à notre application de photos de chats. Cette fois-ci, nous allons lui donner un style grâce au renommé framework CSS Bootstrap.", - "Bootstrap saura reconnaître la largeur de notre écran et s'y adapter en redimensionnant les éléments HTML - d'où le nom Responsive Design (design adaptatif).", - "Avec le design responsive, il n'y a pas besoin de créer de version mobile de votre site. Il restera bien sur tous les appareils quelle que soit la taille de leurs écrans.", - "Vous pouvez ajouter Bootstrap à n'importe quelle application simplement en incluant le code suivant en haut de votre HTML:", - "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", - "Ici, nous l'avons déjà ajouté à la page pour vous dans l'arrière-boutique.", - "Pour commencer, nous devons envelopper nos éléments HTML dans un élément div possédant la classe container-fluid" - ] + "translations": { + "es": { + "title": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap", + "description": [ + "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).", + "Con diseño adaptativo, no hay necesidad de diseñar una versión móvil para tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.", + "Puedes agregar Bootstrap a cualquier aplicación simplemente incluyendo el siguiente código al inicio de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", + "En este caso, lo hemos agregado a esta página por ti.", + "Para iniciar, debemos anidar todo nuestro HTML en un elemento div con la clase container-fluid." + ] + }, + "fr": { + "title": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap", + "description": [ + "Revenons à notre application de photos de chats. Cette fois-ci, nous allons lui donner un style grâce au renommé framework CSS Bootstrap.", + "Bootstrap saura reconnaître la largeur de notre écran et s'y adapter en redimensionnant les éléments HTML - d'où le nom Responsive Design (design adaptatif).", + "Avec le design responsive, il n'y a pas besoin de créer de version mobile de votre site. Il restera bien sur tous les appareils quelle que soit la taille de leurs écrans.", + "Vous pouvez ajouter Bootstrap à n'importe quelle application simplement en incluant le code suivant en haut de votre HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", + "Ici, nous l'avons déjà ajouté à la page pour vous dans l'arrière-boutique.", + "Pour commencer, nous devons envelopper nos éléments HTML dans un élément div possédant la classe container-fluid" + ] + } + } }, { "id": "bad87fee1348bd9acde08812", @@ -175,20 +181,26 @@ ], "type": "waypoint", "challengeType": 0, - "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 https://bit.ly/fcc-running-cats.", - "Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.", - "Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase img-responsive a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página." - ], - "nameFr": "Rendre des images adaptatives aux appareils mobiles", - "descriptionFr": [ - "It would be great if this image could be exactly the width of our phone's screen.", - "Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page.", - "D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut src en https://bit.ly/fcc-running-cats.", - "Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.", - "Heureusement, avec Bootstrap, il faut seulement ajouter la classe img-responsive à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page." - ] + "translations": { + "es": { + "title": "Haz que las imágenes sean adaptativas en dispositivos móviles", + "description": [ + "Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo src sea https://bit.ly/fcc-running-cats.", + "Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.", + "Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase img-responsive a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página." + ] + }, + "fr": { + "title": "Rendre des images adaptatives aux appareils mobiles", + "description": [ + "It would be great if this image could be exactly the width of our phone's screen.", + "Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page.", + "D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut src en https://bit.ly/fcc-running-cats.", + "Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.", + "Heureusement, avec Bootstrap, il faut seulement ajouter la classe img-responsive à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page." + ] + } + } }, { "id": "bad87fee1348bd8acde08812", @@ -263,18 +275,24 @@ ], "type": "waypoint", "challengeType": 0, - "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:", - "<h2 class=\"red-text text-center\">your text</h2>" - ], - "nameFr": "Centrer du texte avec Bootstrap", - "descriptionFr": [ - "Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe text-center à notre élément h2.", - "Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:", - "<h2 class=\"red-text text-center\">Votre texte</h2>" - ] + "translations": { + "es": { + "title": "Centra el texto con Bootstrap", + "description": [ + "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:", + "<h2 class=\"red-text text-center\">your text</h2>" + ] + }, + "fr": { + "title": "Centrer du texte avec Bootstrap", + "description": [ + "Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe text-center à notre élément h2.", + "Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:", + "<h2 class=\"red-text text-center\">Votre texte</h2>" + ] + } + } }, { "id": "bad87fee1348cd8acdf08812", @@ -350,16 +368,22 @@ ], "type": "waypoint", "challengeType": 0, - "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\"." - ], - "nameFr": "Créer un bouton avec Bootstrap", - "descriptionFr": [ - "Bootstrap possède ses propres styles pour les éléments button, qui sont beaucoup plus beaux que ceux issus du HTML seul.", - "Créez un nouvel élément button en dessous de votre grande photo de chaton. Donnez lui comme classe btn et comme texte \"Like\"." - ] + "translations": { + "es": { + "title": "Crea un botón con Bootstrap", + "description": [ + "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\"." + ] + }, + "fr": { + "title": "Créer un bouton avec Bootstrap", + "description": [ + "Bootstrap possède ses propres styles pour les éléments button, qui sont beaucoup plus beaux que ceux issus du HTML seul.", + "Créez un nouvel élément button en dessous de votre grande photo de chaton. Donnez lui comme classe btn et comme texte \"Like\"." + ] + } + } }, { "id": "bad87fee1348cd8acef08812", @@ -443,32 +467,38 @@ ], "type": "waypoint", "challengeType": 0, - "titleEs": "Crea un elemento botón de bloque con Bootstrap", - "descriptionEs": [ - "Normalmente , los elementos de button con una clase de btn sólo son tan ancha como el texto que contienen. Por ejemplo:", - "<button class=\"btn\">Enviar</button>", - "Este botón sólo sería tan amplia como la palabra \"Enviar\"", - "", - "Haciéndolos bloquean elementos con la clase adicional de btn-block, el botón se amplía para llenar toda espacio horizontal de la página y los elementos siguientes fluirá sobre una \"nueva línea\" debajo del bloque .", - "<button class=\"btn btn-block\">Enviar</button>", - "Este botón llevaría hasta el 100% de la anchura disponible.", - "", - "Ten en cuenta que estos botones todavía necesitan la clase btn.", - "Agrega la clase de Bootstrap btn-block a tu botón Bootstrap." - ], - "nameFr": "Créer un bouton bloc Bootstrap", - "descriptionFr": [ - "Normalement , vos éléments de button avec une classe de btn ne sont aussi larges que le texte qu'ils contiennent . Par exemple:", - "<button class=\"btn\">Soumettre</button>", - "Ce bouton ne serait plus large que le mot \"Soumettre\" .", - "", - "En leur faisant bloquer les éléments avec la classe supplémentaire de btn-block, votre bouton étirer pour remplir tout l'espace horizontal de votre page et tous les éléments suivants, il coulera sur une \"nouvelle ligne\" en dessous du bloc .", - "<button class=\"btn btn-block\">Soumettre</button>", - "Ce bouton prendrait 100% de la largeur disponible .", - "", - "Notez que ces boutons ont toujours besoin de la classe btn", - "Ajoutez la classe Bootstrap btn-block à votre bouton Bootstrap." - ] + "translations": { + "es": { + "title": "Crea un elemento botón de bloque con Bootstrap", + "description": [ + "Normalmente , los elementos de button con una clase de btn sólo son tan ancha como el texto que contienen. Por ejemplo:", + "<button class=\"btn\">Enviar</button>", + "Este botón sólo sería tan amplia como la palabra \"Enviar\"", + "", + "Haciéndolos bloquean elementos con la clase adicional de btn-block, el botón se amplía para llenar toda espacio horizontal de la página y los elementos siguientes fluirá sobre una \"nueva línea\" debajo del bloque .", + "<button class=\"btn btn-block\">Enviar</button>", + "Este botón llevaría hasta el 100% de la anchura disponible.", + "", + "Ten en cuenta que estos botones todavía necesitan la clase btn.", + "Agrega la clase de Bootstrap btn-block a tu botón Bootstrap." + ] + }, + "fr": { + "title": "Créer un bouton bloc Bootstrap", + "description": [ + "Normalement , vos éléments de button avec une classe de btn ne sont aussi larges que le texte qu'ils contiennent . Par exemple:", + "<button class=\"btn\">Soumettre</button>", + "Ce bouton ne serait plus large que le mot \"Soumettre\" .", + "", + "En leur faisant bloquer les éléments avec la classe supplémentaire de btn-block, votre bouton étirer pour remplir tout l'espace horizontal de votre page et tous les éléments suivants, il coulera sur une \"nouvelle ligne\" en dessous du bloc .", + "<button class=\"btn btn-block\">Soumettre</button>", + "Ce bouton prendrait 100% de la largeur disponible .", + "", + "Notez que ces boutons ont toujours besoin de la classe btn", + "Ajoutez la classe Bootstrap btn-block à votre bouton Bootstrap." + ] + } + } }, { "id": "bad87fee1348cd8acef08811", @@ -545,18 +575,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Ten en mente que este botón todavía necesita las clases btn y btn-block." - ], - "nameFr": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap", - "descriptionFr": [ - "La classe btn-primary est la couleur principale que vous utiliserez dans votre application. Elle est utile pour mettre en valeur les actions que vous voulez faire réaliser par vos utilisateurs.", - "Ajoutez la classe Bootstrap btn-primary à votre bouton.", - "Notez que ce bouton a toujours besoin des classes btn et btn-block" - ] + "translations": { + "es": { + "title": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap", + "description": [ + "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.", + "Ten en mente que este botón todavía necesita las clases btn y btn-block." + ] + }, + "fr": { + "title": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap", + "description": [ + "La classe btn-primary est la couleur principale que vous utiliserez dans votre application. Elle est utile pour mettre en valeur les actions que vous voulez faire réaliser par vos utilisateurs.", + "Ajoutez la classe Bootstrap btn-primary à votre bouton.", + "Notez que ce bouton a toujours besoin des classes btn et btn-block" + ] + } + } }, { "id": "bad87fee1348cd8acef08813", @@ -634,18 +670,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Ten en mente que estos botones todavía necesitan las clases btn y btn-block." - ], - "nameFr": "Indiquez les actions optionelles avec des boutons informatifs", - "descriptionFr": [ - "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-info est utilisée pour indiquer des actions optionelles pour vos utilisateurs.", - "Créez un nouveau bouton Bootstrap bloc en dessous de votre bouton \"Like\" avec le texte \"Info\" et donnez lui les classes Bootstrap btn-info et btn-block.", - "Notez que ces boutons ont toujours besoins des classes btn and btn-block." - ] + "translations": { + "es": { + "title": "Señala acciones opcionales con botones informativos", + "description": [ + "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.", + "Ten en mente que estos botones todavía necesitan las clases btn y btn-block." + ] + }, + "fr": { + "title": "Indiquez les actions optionelles avec des boutons informatifs", + "description": [ + "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-info est utilisée pour indiquer des actions optionelles pour vos utilisateurs.", + "Créez un nouveau bouton Bootstrap bloc en dessous de votre bouton \"Like\" avec le texte \"Info\" et donnez lui les classes Bootstrap btn-info et btn-block.", + "Notez que ces boutons ont toujours besoins des classes btn and btn-block." + ] + } + } }, { "id": "bad87fee1348ce8acef08814", @@ -724,19 +766,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Recuerda que estos botones todavía requieren las clases btn y btn-block." - ], - "nameFr": "Prévenez vos utilisateurs d'une action dangereuse", - "descriptionFr": [ - "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-danger est utilisée pour indiquer aux utilisateurs que le bouton actionne un processus destructif comme supprimer une photo de chat.", - "Créez un bouton ayant le texte \"Delete\" et donnez lui la classe btn-danger.", - "Notez que ces boutons ont toujours besoins des classes btn and btn-block." - - ] + "translations": { + "es": { + "title": "Advierte a tus usuarios sobre acciones peligrosas", + "description": [ + "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.", + "Recuerda que estos botones todavía requieren las clases btn y btn-block." + ] + }, + "fr": { + "title": "Prévenez vos utilisateurs d'une action dangereuse", + "description": [ + "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-danger est utilisée pour indiquer aux utilisateurs que le bouton actionne un processus destructif comme supprimer une photo de chat.", + "Créez un bouton ayant le texte \"Delete\" et donnez lui la classe btn-danger.", + "Notez que ces boutons ont toujours besoins des classes btn and btn-block." + ] + } + } }, { "id": "bad88fee1348ce8acef08815", @@ -820,26 +867,32 @@ ], "type": "waypoint", "challengeType": 0, - "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:", - "\"una", - "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.", - "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", - "Pon los botones de Like, Info y Delete lado a lado. Esto se hace anidando los tres botones dentro de un elemento <div class=\"row\">, y luego cada uno de ellos dentro de un elemento <div class=\"col-xs-4\">.", - "La clase row se aplica al elemento div, dentro del cual van anidados los botones." - ], - "nameFr": "Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.", - "descriptionFr": [ - "Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément div", - "Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:", - "\"Une", - "Notez que dans cet exemple, nous avons utilisé la classe col-md-*. Ici, md signifie medium, et * donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.", - "Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons col-xs-*, où xs signifie extrêmement petit (comme un écran de téléphone mobile), et * est le nombre de colonnes en largeur de l'élément.", - "Mettez les boutons Like, info et Delete côte-à-côte en les enveloppant tous dans un élément <div class=\"row\">, puis chacun d'entre eux dans un élément <div class=\"col-xs-4\"> element.", - "La classe row est donnée à un div, et les boutons peuvent être insérés à l'intérieur de celui-ci." - ] + "translations": { + "es": { + "title": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado", + "description": [ + "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:", + "\"una", + "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.", + "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", + "Pon los botones de Like, Info y Delete lado a lado. Esto se hace anidando los tres botones dentro de un elemento <div class=\"row\">, y luego cada uno de ellos dentro de un elemento <div class=\"col-xs-4\">.", + "La clase row se aplica al elemento div, dentro del cual van anidados los botones." + ] + }, + "fr": { + "title": "Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.", + "description": [ + "Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément div", + "Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:", + "\"Une", + "Notez que dans cet exemple, nous avons utilisé la classe col-md-*. Ici, md signifie medium, et * donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.", + "Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons col-xs-*, où xs signifie extrêmement petit (comme un écran de téléphone mobile), et * est le nombre de colonnes en largeur de l'élément.", + "Mettez les boutons Like, info et Delete côte-à-côte en les enveloppant tous dans un élément <div class=\"row\">, puis chacun d'entre eux dans un élément <div class=\"col-xs-4\"> element.", + "La classe row est donnée à un div, et les boutons peuvent être insérés à l'intérieur de celui-ci." + ] + } + } }, { "id": "bad87fee1347bd9aedf08845", @@ -930,22 +983,28 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Elimina las declaraciones CSS .red-text, p, y .smaller-image de tu elemento style, de forma que las únicas declaraciones que queden en tu elemento style sean h2 y thick-green-border.", - "Luego elimina el elemento p que contiene un enlace nulo. Después, elimina la clase red-text de tu elemento h2 y reemplázalo con la clase text-primary de Bootstrap.", - "Por último, elimina la clase \"smaller-image\" de tu primer elemento img y reemplázalo con la clase img-responsive." - ], - "nameFr": "Remplacez le CSS personnalisé par les styles Bootstrap", - "descriptionFr": [ - "Nous pouvons nettoyer notre code et rendre le look de notre appli Cat Photos plus conventionnel en utilisant les styles intégrés à Bootstrap à la place des styles personnalisés que nous avons créés auparavant.", - "Ne vous inquiétez pas - nous auront beaucoup de temps pour personnaliser notre CSS plus tard.", - "Supprimez les déclarations CSS .red-text, p, et .smaller-image de votre élément style pour que les seules déclarations restantes dans l'élément style soient h2 et thick-green-border.", - "Ensuite supprimez l'élément p contenant un lien fantôme. Puis enlevez la classe red-text de votre élément h2 et remplacez la par la classe Bootstrap text-primary", - "Enfin, enlevez la classe \"smaller-image\" dde votre premier élément img et remplacez le par la classe img-responsive." - ] + "translations": { + "es": { + "title": "Reemplaza el CSS personalizado por Bootstrap", + "description": [ + "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.", + "Elimina las declaraciones CSS .red-text, p, y .smaller-image de tu elemento style, de forma que las únicas declaraciones que queden en tu elemento style sean h2 y thick-green-border.", + "Luego elimina el elemento p que contiene un enlace nulo. Después, elimina la clase red-text de tu elemento h2 y reemplázalo con la clase text-primary de Bootstrap.", + "Por último, elimina la clase \"smaller-image\" de tu primer elemento img y reemplázalo con la clase img-responsive." + ] + }, + "fr": { + "title": "Remplacez le CSS personnalisé par les styles Bootstrap", + "description": [ + "Nous pouvons nettoyer notre code et rendre le look de notre appli Cat Photos plus conventionnel en utilisant les styles intégrés à Bootstrap à la place des styles personnalisés que nous avons créés auparavant.", + "Ne vous inquiétez pas - nous auront beaucoup de temps pour personnaliser notre CSS plus tard.", + "Supprimez les déclarations CSS .red-text, p, et .smaller-image de votre élément style pour que les seules déclarations restantes dans l'élément style soient h2 et thick-green-border.", + "Ensuite supprimez l'élément p contenant un lien fantôme. Puis enlevez la classe red-text de votre élément h2 et remplacez la par la classe Bootstrap text-primary", + "Enfin, enlevez la classe \"smaller-image\" dde votre premier élément img et remplacez le par la classe img-responsive." + ] + } + } }, { "id": "bad87fee1348bd9aedf08845", @@ -1024,26 +1083,32 @@ ], "type": "waypoint", "challengeType": 0, - "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):", - "\"Un", - "Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", - "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", - "Así es como lo harías con el elemento \"Top 3 things cats hate\":", - "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" - ], - "nameFr": "Utiliser Spans pour les éléments \"Inline\"", - "descriptionFr": [ - "Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe btn-block pour remplir la rangée entière?", - "Cette image illustre la différence entre les éléments inline (en ligne) et les éléments block-level (de blocs):", - "\"Un", - "En utilisant un élément span, vous pouvez mettre ensemble plusieurs éléments, et même donner un style différent à plusieurs parties d'un même élément", - "Nichez le mot \"love\" dans votre élément \"Things cats love\" en dessous dans un élément span; Ensuite donnez à ce span la classe text-danger pour rendre le texte rouge.", - "Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":", - "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" - ] + "translations": { + "es": { + "title": "Usa span para elementos en línea", + "description": [ + "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):", + "\"Un", + "Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", + "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", + "Así es como lo harías con el elemento \"Top 3 things cats hate\":", + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" + ] + }, + "fr": { + "title": "Utiliser Spans pour les éléments \"Inline\"", + "description": [ + "Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe btn-block pour remplir la rangée entière?", + "Cette image illustre la différence entre les éléments inline (en ligne) et les éléments block-level (de blocs):", + "\"Un", + "En utilisant un élément span, vous pouvez mettre ensemble plusieurs éléments, et même donner un style différent à plusieurs parties d'un même élément", + "Nichez le mot \"love\" dans votre élément \"Things cats love\" en dessous dans un élément span; Ensuite donnez à ce span la classe text-danger pour rendre le texte rouge.", + "Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":", + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" + ] + } + } }, { "id": "bad87fee1348bd9aede08845", @@ -1122,28 +1187,34 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", - "\"una", - "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.", - "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", - "Anida tu primera imagen y tu elemento h2 dentro de un solo elemento <div class=\"row\">. Anida tu texto h2 dentro de un <div class=\"col-xs-8\"> y tu imagen en un <div class=\"col-xs-4\"> de tal forma que estén en la misma línea.", - "¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?" - ], - "nameFr": "Créer un entête personalisé", - "descriptionFr": [ - "Notice how the image is now just the right size to fit along the text?", - "Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.", - "Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément div.", - "Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:", - "\"Une", - "Notez que dans cet exemple, on utilise la classe col-md-*. Ici md signifie medium, et * est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.", - "Enveloppez votre première image et votre élément h2 dans un seul élément <div class=\"row\">. Mettez l'élément h2 dans un <div class=\"col-xs-8\"> et votre image dans un <div class=\"col-xs-4\"> pour qu'ils soient sur la même ligne.", - "Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?" - ] + "translations": { + "es": { + "title": "Crea un encabezado personalizado", + "description": [ + "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.", + "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento div.", + "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", + "\"una", + "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.", + "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", + "Anida tu primera imagen y tu elemento h2 dentro de un solo elemento <div class=\"row\">. Anida tu texto h2 dentro de un <div class=\"col-xs-8\"> y tu imagen en un <div class=\"col-xs-4\"> de tal forma que estén en la misma línea.", + "¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?" + ] + }, + "fr": { + "title": "Créer un entête personalisé", + "description": [ + "Notice how the image is now just the right size to fit along the text?", + "Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.", + "Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément div.", + "Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:", + "\"Une", + "Notez que dans cet exemple, on utilise la classe col-md-*. Ici md signifie medium, et * est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.", + "Enveloppez votre première image et votre élément h2 dans un seul élément <div class=\"row\">. Mettez l'élément h2 dans un <div class=\"col-xs-8\"> et votre image dans un <div class=\"col-xs-4\"> pour qu'ils soient sur la même ligne.", + "Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?" + ] + } + } }, { "id": "bad87fee1348bd9aedd08845", @@ -1224,26 +1295,32 @@ ], "type": "waypoint", "challengeType": 0, - "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:", - "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", - "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", - "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", - "<i class=\"fa fa-info-circle\"></i>", - "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." - ], - "nameFr": "Ajouter des icônes Font Awesome à nos boutons", - "descriptionFr": [ - "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.", - "Vous poyvez ajouter Font Awesome à n'importe quell application en ajoutant le code suivant en haut de votre HTML:", - "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", - "Ici, nous l'avons déjà ajouté pour vous dans le back-office.", - "La balise i eétait utilisé à la base pour mettre les autres éléments en italique, mais maintenant elle est utilisée pour les icones. Vous ajoutez des classes Font Awesome à un élément i pour les les transformer en icones, par exemple:", - "<i class=\"fa fa-info-circle\"></i>", - "Utilisez Font Awesome pour ajouter un icone thumbs-up à votre bouton de like en lui donnant un élément i ayant les classes fa et fa-thumbs-up." - ] + "translations": { + "es": { + "title": "Agrega iconos de Font Awesome a los botones", + "description": [ + "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", + "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", + "<i class=\"fa fa-info-circle\"></i>", + "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." + ] + }, + "fr": { + "title": "Ajouter des icônes Font Awesome à nos boutons", + "description": [ + "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.", + "Vous poyvez ajouter Font Awesome à n'importe quell application en ajoutant le code suivant en haut de votre HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "Ici, nous l'avons déjà ajouté pour vous dans le back-office.", + "La balise i eétait utilisé à la base pour mettre les autres éléments en italique, mais maintenant elle est utilisée pour les icones. Vous ajoutez des classes Font Awesome à un élément i pour les les transformer en icones, par exemple:", + "<i class=\"fa fa-info-circle\"></i>", + "Utilisez Font Awesome pour ajouter un icone thumbs-up à votre bouton de like en lui donnant un élément i ayant les classes fa et fa-thumbs-up." + ] + } + } }, { "id": "bad87fee1348bd9aedc08845", @@ -1318,16 +1395,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Ajoutez des icones Font Awesome à tous nos boutons", - "descriptionFr": [ - "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.", - "Utilisez Font Awesome pour ajouter un icone info-circle à votre bouton d'info et un icone trash à votre bouton de suppression." - ] + "translations": { + "es": { + "title": "Agrega Font Awesome a todos los botones", + "description": [ + "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." + ] + }, + "fr": { + "title": "Ajoutez des icones Font Awesome à tous nos boutons", + "description": [ + "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.", + "Utilisez Font Awesome pour ajouter un icone info-circle à votre bouton d'info et un icone trash à votre bouton de suppression." + ] + } + } }, { "id": "bad87fee1348bd9aedb08845", @@ -1402,16 +1485,22 @@ ], "type": "waypoint", "challengeType": 0, - "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\">." - ], - "nameFr": "Donnez un style responsive à vos boutons radio", - "descriptionFr": [ - "Vous pouvez utiliser la classe Bootstrap col-xs-* sur des éléments form. Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.", - "Nichez tous vous boutons radio dans un élément <div class=\"row\">. Ensuite, nichezchacun d'entre eux dans un élément <div class=\"col-xs-6\">" - ] + "translations": { + "es": { + "title": "Crea botones de opción con estilo adaptativo", + "description": [ + "¡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\">." + ] + }, + "fr": { + "title": "Donnez un style responsive à vos boutons radio", + "description": [ + "Vous pouvez utiliser la classe Bootstrap col-xs-* sur des éléments form. Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.", + "Nichez tous vous boutons radio dans un élément <div class=\"row\">. Ensuite, nichezchacun d'entre eux dans un élément <div class=\"col-xs-6\">" + ] + } + } }, { "id": "bad87fee1348bd9aeda08845", @@ -1493,17 +1582,23 @@ ], "type": "waypoint", "challengeType": 0, - "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\">." - ], - "nameFr": "Donnez un style responsive à vos checkbox (cases de séléction)", - "descriptionFr": [ - "Vous pouvez aussi utiliser la classe Bootstrap col-xs-* sur des éléments form! Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.", - "You can use Bootstrap's col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.", - "Nichez toustes vos checkbox dans un élément <div class=\"row\">. Ensuite nichez chacun d'entre eux dans un élément <div class=\"col-xs-4\">" - ] + "translations": { + "es": { + "title": "Crea casillas de selección con estilo adaptativo", + "description": [ + "¡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\">." + ] + }, + "fr": { + "title": "Donnez un style responsive à vos checkbox (cases de séléction)", + "description": [ + "Vous pouvez aussi utiliser la classe Bootstrap col-xs-* sur des éléments form! Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.", + "You can use Bootstrap's col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.", + "Nichez toustes vos checkbox dans un élément <div class=\"row\">. Ensuite nichez chacun d'entre eux dans un élément <div class=\"col-xs-4\">" + ] + } + } }, { "id": "bad87fee1348bd9aed908845", @@ -1594,16 +1689,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Donnez un style similaire au contrôles de formulaires à des zones de texte", - "descriptionFr": [ - "Vous pouvez ajouter l'icone Font Awesome fa-paper-plane en ajoutant <i class=\"fa fa-paper-plane\"></i> à l'intérieur de votre button de soumission du formulaire.", - "Donnez aux entrées texte de votre formulaire une classe form-control. Donnez à votre bouton de soumission de formulaire les classes btn btn-primary. Donnez lui aussi un icone Font Awesome fa-paper-plane." - ] + "translations": { + "es": { + "title": "Estiliza cajas de texto como controles de formulario", + "description": [ + "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." + ] + }, + "fr": { + "title": "Donnez un style similaire au contrôles de formulaires à des zones de texte", + "description": [ + "Vous pouvez ajouter l'icone Font Awesome fa-paper-plane en ajoutant <i class=\"fa fa-paper-plane\"></i> à l'intérieur de votre button de soumission du formulaire.", + "Donnez aux entrées texte de votre formulaire une classe form-control. Donnez à votre bouton de soumission de formulaire les classes btn btn-primary. Donnez lui aussi un icone Font Awesome fa-paper-plane." + ] + } + } }, { "id": "bad87fee1348bd9aec908845", @@ -1695,18 +1796,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!" - ], - "nameFr": "Aligner les éléments de formulaire de façon responsive avec Bootstrap", - "descriptionFr": [ - "Maintenant mettons sur la même ligne l'élément input et le button de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément div avec la classe row, et un un autre div à l'intérieur qui aura la classe col-xs-*.", - "Nichez à la fois l'input texte de votre formulaire et le button de soumission de formulaire à l'intérieur d'un div avec la classe row. Nichez l'input texte du formulaire dans un div ayant la classe col-xs-7. Nichez votre button de soumission de formulaire dans un div ayant la classe col-xs-5.", - "C'est le dernier challenge qui concerne notre application de photos de chats. Nous espérons que vous avez aimé apprendre Font Awesome, Bootstrap et du design adaptatif!" - ] + "translations": { + "es": { + "title": "Alínea elementos de formulario de forma adaptativa con Bootstrap", + "description": [ + "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.", + "¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!" + ] + }, + "fr": { + "title": "Aligner les éléments de formulaire de façon responsive avec Bootstrap", + "description": [ + "Maintenant mettons sur la même ligne l'élément input et le button de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément div avec la classe row, et un un autre div à l'intérieur qui aura la classe col-xs-*.", + "Nichez à la fois l'input texte de votre formulaire et le button de soumission de formulaire à l'intérieur d'un div avec la classe row. Nichez l'input texte du formulaire dans un div ayant la classe col-xs-7. Nichez votre button de soumission de formulaire dans un div ayant la classe col-xs-5.", + "C'est le dernier challenge qui concerne notre application de photos de chats. Nous espérons que vous avez aimé apprendre Font Awesome, Bootstrap et du design adaptatif!" + ] + } + } }, { "id": "bad87fee1348bd9aec908846", @@ -1731,20 +1838,26 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Para empezar, crea un elemento h3, con el texto jQuery Playground.", - "Ponle color a tu elemento h3 con la clase text-primary de Bootstrap, y céntrala con la clase text-center de Bootstrap." - ], - "nameFr": "Créer un entête Bootstrap", - "descriptionFr": [ - "Maintenons, créons queqlque chose à partir de zéro pour pratiquer nos connaissances acquises sur HTML, CSS et Bootstrap.", - "Nous allons construire un terrain de jeu pour jQuery, que nous allons bientôt utiliser dans les challenges jQuery.", - "Pour commencer, créez un élément h3, contenant le texte jQuery Playground.", - "Colorez notre élément h3 avec la classe Bootstrap text-primary, et centrez le en utilisant la classe Bootstrap text-center" - ] + "translations": { + "es": { + "title": "Crea un encabezado con Bootstrap", + "description": [ + "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.", + "Para empezar, crea un elemento h3, con el texto jQuery Playground.", + "Ponle color a tu elemento h3 con la clase text-primary de Bootstrap, y céntrala con la clase text-center de Bootstrap." + ] + }, + "fr": { + "title": "Créer un entête Bootstrap", + "description": [ + "Maintenons, créons queqlque chose à partir de zéro pour pratiquer nos connaissances acquises sur HTML, CSS et Bootstrap.", + "Nous allons construire un terrain de jeu pour jQuery, que nous allons bientôt utiliser dans les challenges jQuery.", + "Pour commencer, créez un élément h3, contenant le texte jQuery Playground.", + "Colorez notre élément h3 avec la classe Bootstrap text-primary, et centrez le en utilisant la classe Bootstrap text-center" + ] + } + } }, { "id": "bad87fee1348bd9aec908746", @@ -1765,16 +1878,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Loger notre page dans un conteneur Bootstrap Fluid Div", - "descriptionFr": [ - "Maintenant, assurons nous que tout le contenu de la page est mobile-responsive (adaptatif au téléphones mobiles).", - "Nichons notre element h3 à l'intérieur d'un élément div ayant la classe container-fluid." - ] + "translations": { + "es": { + "title": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Loger notre page dans un conteneur Bootstrap Fluid Div", + "description": [ + "Maintenant, assurons nous que tout le contenu de la page est mobile-responsive (adaptatif au téléphones mobiles).", + "Nichons notre element h3 à l'intérieur d'un élément div ayant la classe container-fluid." + ] + } + } }, { "id": "bad87fee1348bd9bec908846", @@ -1798,16 +1917,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Créer une rangée (row) Bootstrap", - "descriptionFr": [ - "Maintenant nous allons créer une rangée (row) Bootstrap pour nos éléments inline.", - "Créez un élément div en dessous de la balise h3, avec une classe row." - ] + "translations": { + "es": { + "title": "Crea una fila en Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Créer une rangée (row) Bootstrap", + "description": [ + "Maintenant nous allons créer une rangée (row) Bootstrap pour nos éléments inline.", + "Créez un élément div en dessous de la balise h3, avec une classe row." + ] + } + } }, { "id": "bad87fee1348bd9aec908847", @@ -1831,16 +1956,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Séparer une rangée Bootstrap", - "descriptionFr": [ - "Maintenant que nous avons une rangée Bootstrap, séparons la en deux colonnes pour placer nos éléments.", - "Créez deux éléments divdans votre rangée, chacun ayant la classe col-xs-6." - ] + "translations": { + "es": { + "title": "Parte tu fila en Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Séparer une rangée Bootstrap", + "description": [ + "Maintenant que nous avons une rangée Bootstrap, séparons la en deux colonnes pour placer nos éléments.", + "Créez deux éléments divdans votre rangée, chacun ayant la classe col-xs-6." + ] + } + } }, { "id": "bad87fee1348bd9aec908848", @@ -1869,16 +2000,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Créez un \"puit\" (well) Bootstrap", - "descriptionFr": [ - "Bootstrap possède une classe appelée well qui peux créer une certaine profondeur pour vos colonnes.", - "Nichez un élément div avec la classe well dans chacun de vos éléments col-xs-6 div." - ] + "translations": { + "es": { + "title": "Crea pozos en Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Créez un \"puit\" (well) Bootstrap", + "description": [ + "Bootstrap possède une classe appelée well qui peux créer une certaine profondeur pour vos colonnes.", + "Nichez un élément div avec la classe well dans chacun de vos éléments col-xs-6 div." + ] + } + } }, { "id": "bad87fee1348bd9aec908849", @@ -1915,16 +2052,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Ajouter des éléments dans un puit Bootstrap", - "descriptionFr": [ - "Nous avons maintenant plusieurs niveaux de profondeur d'éléments div dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments button.", - "Nichez trois éléments button dans chaque élément well div." - ] + "translations": { + "es": { + "title": "Agrega elementos dentro de los pozos de Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Ajouter des éléments dans un puit Bootstrap", + "description": [ + "Nous avons maintenant plusieurs niveaux de profondeur d'éléments div dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments button.", + "Nichez trois éléments button dans chaque élément well div." + ] + } + } }, { "id": "bad87fee1348bd9aec908850", @@ -1960,16 +2103,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Appliquer le style de bouton par défaut de Bootstrap", - "descriptionFr": [ - "Bootstrap possède une autre classe de bouton appelée btn-default.", - "Appliquez les deux classes btn et btn-default à chacun de vos éléments button" - ] + "translations": { + "es": { + "title": "Aplica el estilo de botón predeterminado de Bootstrap", + "description": [ + "Bootstrap tiene otra clase de botón llamada btn-default.", + "Aplica las clases btn y btn-default a cada uno de tus elementos button." + ] + }, + "fr": { + "title": "Appliquer le style de bouton par défaut de Bootstrap", + "description": [ + "Bootstrap possède une autre classe de bouton appelée btn-default.", + "Appliquez les deux classes btn et btn-default à chacun de vos éléments button" + ] + } + } }, { "id": "bad87fee1348bd9aec908852", @@ -2004,16 +2153,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Créez une classe à cibler avec les sélécteurs jQuery", - "descriptionFr": [ - "Toutes les classes ne nécéssitent pas d'avoir un code CSS qui leur correspondent. Parfois ous créons des classes dans le seul but de pouvoir sélectionner ces éléments plus facilement en utilisant jQuery.", - "Donnez à chacun de vos éléments button la classe target." - ] + "translations": { + "es": { + "title": "Crea una clase para usar con selectores de jQuery", + "description": [ + "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." + ] + }, + "fr": { + "title": "Créez une classe à cibler avec les sélécteurs jQuery", + "description": [ + "Toutes les classes ne nécéssitent pas d'avoir un code CSS qui leur correspondent. Parfois ous créons des classes dans le seul but de pouvoir sélectionner ces éléments plus facilement en utilisant jQuery.", + "Donnez à chacun de vos éléments button la classe target." + ] + } + } }, { "id": "bad87fee1348bd9aec908853", @@ -2053,24 +2208,30 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", - "Recuerda que puedes darle a un elemento un id como el siguiente:", - "<div class=\"well\" id=\"center-well\">", - "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." - ], - "nameFr": "Ajouter des attributs ID à vos éléments Bootstrap", - "descriptionFr": [ - "Rappelez vous qu'en plus des attributs classes, vous pouvez donnez à chacun de vos éléments un attribut id.", - "Chaque id doit être unique pour un élément donné et utilisé une seule fois par page.", - "Donnons un id unique à chacun de nos éléments div de classe well.", - "Rappelez vous que vous pouvez donner un id à un élément ainsi :", - "<div class=\"well\" id=\"center-well\">", - "Donnez au puit sur la gauche un id de left-well. Donnez au puit sur la droite un id de right-well." - ] + "translations": { + "es": { + "title": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap", + "description": [ + "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.", + "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", + "Recuerda que puedes darle a un elemento un id como el siguiente:", + "<div class=\"well\" id=\"center-well\">", + "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." + ] + }, + "fr": { + "title": "Ajouter des attributs ID à vos éléments Bootstrap", + "description": [ + "Rappelez vous qu'en plus des attributs classes, vous pouvez donnez à chacun de vos éléments un attribut id.", + "Chaque id doit être unique pour un élément donné et utilisé une seule fois par page.", + "Donnons un id unique à chacun de nos éléments div de classe well.", + "Rappelez vous que vous pouvez donner un id à un élément ainsi :", + "<div class=\"well\" id=\"center-well\">", + "Donnez au puit sur la gauche un id de left-well. Donnez au puit sur la droite un id de right-well." + ] + } + } }, { "id": "bad87fee1348bd9aec908854", @@ -2111,18 +2272,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Ahora, sobre tu pozo de la derecha, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #right-well." - ], - "nameFr": "Donner un nom aux puits Bootstrap", - "descriptionFr": [ - "Au nom de la clarté, donnons un nom à nos deux puits en accord avec leur ids", - "Au dessus de votre puit de gauche, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #left-well.", - "Au dessus de votre puit de droite, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #right-well." - ] + "translations": { + "es": { + "title": "Etiqueta tus pozos de Bootstrap", + "description": [ + "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.", + "Ahora, sobre tu pozo de la derecha, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #right-well." + ] + }, + "fr": { + "title": "Donner un nom aux puits Bootstrap", + "description": [ + "Au nom de la clarté, donnons un nom à nos deux puits en accord avec leur ids", + "Au dessus de votre puit de gauche, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #left-well.", + "Au dessus de votre puit de droite, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #right-well." + ] + } + } }, { "id": "bad87fee1348bd9aec908855", @@ -2165,18 +2332,24 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." - ], - "nameFr": "Donner à chaque élément un ID unique", - "descriptionFr": [ - "Nous désirerons aussi pouvoir être capable d'utiliser jQuery pour cibler chaque bouton suivant son id unique.", - "Donnez à chaque bouton un id unique, commençant par target1 et finissant par target6.", - "Assurez vous que target1 à target3 sont dans le #left-well, et que target4 à target6 sont dans le #right-well." - ] + "translations": { + "es": { + "title": "Dale a cada elemento un ID único", + "description": [ + "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.", + "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." + ] + }, + "fr": { + "title": "Donner à chaque élément un ID unique", + "description": [ + "Nous désirerons aussi pouvoir être capable d'utiliser jQuery pour cibler chaque bouton suivant son id unique.", + "Donnez à chaque bouton un id unique, commençant par target1 et finissant par target6.", + "Assurez vous que target1 à target3 sont dans le #left-well, et que target4 à target6 sont dans le #right-well." + ] + } + } }, { "id": "bad87fee1348bd9aec908856", @@ -2218,16 +2391,22 @@ ], "type": "waypoint", "challengeType": 0, - "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." - ], - "nameFr": "Donnez un nom à vos boutons Bootstrap", - "descriptionFr": [ - "De la même façon que nous avons donné un nom à nos puits, nous voulons nommer nos boutons.", - "Donnez à chaque élément button un texte qui corresponde à son id." - ] + "translations": { + "es": { + "title": "Etiqueta los botones con Bootstrap", + "description": [ + "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." + ] + }, + "fr": { + "title": "Donnez un nom à vos boutons Bootstrap", + "description": [ + "De la même façon que nous avons donné un nom à nos puits, nous voulons nommer nos boutons.", + "Donnez à chaque élément button un texte qui corresponde à son id." + ] + } + } }, { "id": "bad87fee1348bd9aec908857", @@ -2269,20 +2448,26 @@ ], "type": "waypoint", "challengeType": 0, - "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.", - "Recuerda que puedes iniciar un comentario usando <!-- y terminarlo usando -->", - "Agrega un comentario al inicio de tu código HTML que diga Only change code above this line." - ], - "nameFr": "Utiliser des commentaires pour clarifier son code", - "descriptionFr": [ - "Quand nous commencerons à utiliser jQuery, nous modifierons les éléments HTML sans avoir besoin de les changer directement dans le fichier HTML.", - "Assurons nous que tout le monde sache qu'ils ne devraient pas modifier quoi que ce soit dans le code HTML.", - "Rappelez vous que vous pouvez commencer un commentaire avec <!-- et le finir avec -->", - "Ajoutez un commentaire en haut de l'HTML qui annonce Only change code above this line. (Changez seulement le code au dessus de cette ligne.)" - ] + "translations": { + "es": { + "title": "Usa elementos para explicar tu código", + "description": [ + "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.", + "Recuerda que puedes iniciar un comentario usando <!-- y terminarlo usando -->", + "Agrega un comentario al inicio de tu código HTML que diga Only change code above this line." + ] + }, + "fr": { + "title": "Utiliser des commentaires pour clarifier son code", + "description": [ + "Quand nous commencerons à utiliser jQuery, nous modifierons les éléments HTML sans avoir besoin de les changer directement dans le fichier HTML.", + "Assurons nous que tout le monde sache qu'ils ne devraient pas modifier quoi que ce soit dans le code HTML.", + "Rappelez vous que vous pouvez commencer un commentaire avec <!-- et le finir avec -->", + "Ajoutez un commentaire en haut de l'HTML qui annonce Only change code above this line. (Changez seulement le code au dessus de cette ligne.)" + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json b/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json index d48e9f18e9..c7c9362b59 100644 --- a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json +++ b/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json @@ -240,33 +240,37 @@ ], "type": "Waypoint", "challengeType": 7, - "descriptionEs": [ - [ - "//i.imgur.com/k8btNUB.jpg", - "Una imagen que muestra nuestro certificado de Desarrollo de interfaces", - "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.", - "" - ], - [ - "//i.imgur.com/HArFfMN.jpg", - "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.", - "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.", - "#" - ], - [ - "//i.imgur.com/14F2Van.jpg", - "Una imagen del texto \"Front End Development Certificate requirements\"", - "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.", - "#" - ], - [ - "//i.imgur.com/16SIhHO.jpg", - "Una imagen de la palabra \"Congratulations\"", - "¡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" + "translations": { + "es": { + "title": "Reclama tu certificado de Desarrollo de interfaces", + "description": [ + [ + "//i.imgur.com/k8btNUB.jpg", + "Una imagen que muestra nuestro certificado de Desarrollo de interfaces", + "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.", + "" + ], + [ + "//i.imgur.com/HArFfMN.jpg", + "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.", + "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.", + "#" + ], + [ + "//i.imgur.com/14F2Van.jpg", + "Una imagen del texto \"Front End Development Certificate requirements\"", + "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.", + "#" + ], + [ + "//i.imgur.com/16SIhHO.jpg", + "Una imagen de la palabra \"Congratulations\"", + "¡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.", + "" + ] + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/gear-up-for-success.json b/seed/challenges/01-front-end-development-certification/gear-up-for-success.json index 84468e45a3..746d4c9a0f 100644 --- a/seed/challenges/01-front-end-development-certification/gear-up-for-success.json +++ b/seed/challenges/01-front-end-development-certification/gear-up-for-success.json @@ -31,69 +31,77 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Join our Forum", - "descriptionEs": [ - [ - "//i.imgur.com/y0XxmxQ.gif", - "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", - "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", - "http://forum.freecodecamp.com/" - ], - [ - "//i.imgur.com/GxCpl7x.gif", - "A gif showing how you can upload your profile picture.", - "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", - "" - ], - [ - "//i.imgur.com/Gop2PmJ.gif", - "A gif showing how you can introduce yourself on our self introduction forum thread.", - "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", - "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" - ] - ], - "titleFr": "Join our Forum", - "descriptionFr": [ - [ - "//i.imgur.com/y0XxmxQ.gif", - "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", - "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", - "http://forum.freecodecamp.com/" - ], - [ - "//i.imgur.com/GxCpl7x.gif", - "A gif showing how you can upload your profile picture.", - "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", - "" - ], - [ - "//i.imgur.com/Gop2PmJ.gif", - "A gif showing how you can introduce yourself on our self introduction forum thread.", - "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", - "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" - ] - ], - "titleDe": "Join our Forum", - "descriptionDe": [ - [ - "//i.imgur.com/y0XxmxQ.gif", - "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", - "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", - "http://forum.freecodecamp.com/" - ], - [ - "//i.imgur.com/GxCpl7x.gif", - "A gif showing how you can upload your profile picture.", - "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", - "" - ], - [ - "//i.imgur.com/Gop2PmJ.gif", - "A gif showing how you can introduce yourself on our self introduction forum thread.", - "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", - "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" - ] - ] + "translations": { + "de": { + "title": "Join our Forum", + "description": [ + [ + "//i.imgur.com/y0XxmxQ.gif", + "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", + "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", + "http://forum.freecodecamp.com/" + ], + [ + "//i.imgur.com/GxCpl7x.gif", + "A gif showing how you can upload your profile picture.", + "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", + "" + ], + [ + "//i.imgur.com/Gop2PmJ.gif", + "A gif showing how you can introduce yourself on our self introduction forum thread.", + "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", + "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" + ] + ] + }, + "es": { + "title": "Join our Forum", + "description": [ + [ + "//i.imgur.com/y0XxmxQ.gif", + "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", + "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", + "http://forum.freecodecamp.com/" + ], + [ + "//i.imgur.com/GxCpl7x.gif", + "A gif showing how you can upload your profile picture.", + "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", + "" + ], + [ + "//i.imgur.com/Gop2PmJ.gif", + "A gif showing how you can introduce yourself on our self introduction forum thread.", + "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", + "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" + ] + ] + }, + "fr": { + "title": "Join our Forum", + "description": [ + [ + "//i.imgur.com/y0XxmxQ.gif", + "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.", + "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!", + "http://forum.freecodecamp.com/" + ], + [ + "//i.imgur.com/GxCpl7x.gif", + "A gif showing how you can upload your profile picture.", + "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.", + "" + ], + [ + "//i.imgur.com/Gop2PmJ.gif", + "A gif showing how you can introduce yourself on our self introduction forum thread.", + "You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.", + "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082" + ] + ] + } + } }, { "id": "560ade65cb82ac38a17513c2", @@ -111,33 +119,41 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Miranos programar en vivo por YouTube", - "descriptionEs": [ - [ - "//i.imgur.com/4jUhEsb.jpg", - "An image of Briana at the whiteboard teaching in a YouTube video.", - "Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.", - "https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1" - ] - ], - "titleFr": "Regarde nous coder en direct sur Twitch.tv", - "descriptionFr": [ - [ - "//i.imgur.com/8rtyRY1.gif", - "Une gif montrant comment tu peux créer un compte sur Twitch.tv et suivre notre chaîne.", - "Nos campers codent fréquemment en direct sur Twitch.tv, un site de streaming populaire. Tu peux créer un compte en moins d’une minute, et suivre la chaîne de Free Code Camp. Une fois suivi, tu auras l’option de recevoir un email à chaque fois qu’un de nos campers est en direct. Et donc tu peux rejoindre plusieurs campers pour regarder et interagir sur le salon de chat. C’est une façon d’apprendre en regardant les autres coder.", - "https://twitch.tv/freecodecamp" - ] - ], - "titleDe": "Schaue uns auf Twitch.tv Live beim Programmieren zu", - "descriptionDe": [ - [ - "//i.imgur.com/8rtyRY1.gif", - "Ein GIF, das dir zeigt, wie du dich bei Twitch.tv anmelden und unserem Kanal folgen kannst.", - "Unsere Camper programmieren oft Live auf Twitch.tv, einer populären Streaming-Website. Du kannst in weniger als einer Minute einen Account anlegen und dann dem Kanal von Free Code Camp folgen. Wenn du dem Kanal folgst, hast du die Option E-Mail Benachrichtigungen zu bekommen, sobald einer unserer Camper live geht. Dann kannst du Dutzenden Campern folgen und ihnen beim Programmieren zusehen sowie in Chats interagieren. Das ist eine lustige und lockere Art und Weise, um von anderen Personen zu lernen, wie sie ihre Projekte umsetzen.", - "https://twitch.tv/freecodecamp" - ] - ] + "translations": { + "de": { + "title": "Schaue uns auf Twitch.tv Live beim Programmieren zu", + "description": [ + [ + "//i.imgur.com/8rtyRY1.gif", + "Ein GIF, das dir zeigt, wie du dich bei Twitch.tv anmelden und unserem Kanal folgen kannst.", + "Unsere Camper programmieren oft Live auf Twitch.tv, einer populären Streaming-Website. Du kannst in weniger als einer Minute einen Account anlegen und dann dem Kanal von Free Code Camp folgen. Wenn du dem Kanal folgst, hast du die Option E-Mail Benachrichtigungen zu bekommen, sobald einer unserer Camper live geht. Dann kannst du Dutzenden Campern folgen und ihnen beim Programmieren zusehen sowie in Chats interagieren. Das ist eine lustige und lockere Art und Weise, um von anderen Personen zu lernen, wie sie ihre Projekte umsetzen.", + "https://twitch.tv/freecodecamp" + ] + ] + }, + "es": { + "title": "Miranos programar en vivo por YouTube", + "description": [ + [ + "//i.imgur.com/4jUhEsb.jpg", + "An image of Briana at the whiteboard teaching in a YouTube video.", + "Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.", + "https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1" + ] + ] + }, + "fr": { + "title": "Regarde nous coder en direct sur Twitch.tv", + "description": [ + [ + "//i.imgur.com/8rtyRY1.gif", + "Une gif montrant comment tu peux créer un compte sur Twitch.tv et suivre notre chaîne.", + "Nos campers codent fréquemment en direct sur Twitch.tv, un site de streaming populaire. Tu peux créer un compte en moins d’une minute, et suivre la chaîne de Free Code Camp. Une fois suivi, tu auras l’option de recevoir un email à chaque fois qu’un de nos campers est en direct. Et donc tu peux rejoindre plusieurs campers pour regarder et interagir sur le salon de chat. C’est une façon d’apprendre en regardant les autres coder.", + "https://twitch.tv/freecodecamp" + ] + ] + } + } }, { "id": "570add8ccb82ac38a17513c3", @@ -154,33 +170,41 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Únete a nuestra red de alumnos en LinkedIn", - "descriptionEs": [ - [ - "//i.imgur.com/vJyiXzU.gif", - "Un gif mostrando como puedes pulsar el enlace de abajo y llenar todos los campos necesarios para agregar los estudios de Free Code Camp a tu perfil de LinkedIn", - "LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. Define tu fecha de graduación para el siguiente año. En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". En \"Campo de estudio\", escribe \"Ingeniería de Software\". Después pulsa \"Guardar Cambios\".", - "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" - ] - ], - "titleFr": "Rejoignez notre réseau de lauréats sur Linkedin", - "descriptionFr": [ - [ - "//i.imgur.com/vJyiXzU.gif", - "Une gif qui montre comment tu peux cliquer sur le lien ci-dessous et remplir les champs nécessaires pour ajouter le certificat de Free Code Camp à votre profil LinkedIn.", - "LinkedIn reconnait Free Code Camp comme une université. Tu peux avoir accès à notre large réseau de lauréats en ajoutant Free Code Camp à la section éducation de ton profil LinkedIn. L’année d’obtention du diplôme est la prochaine année. Pour le \"Degré\", c’est \"Full Stack Web Development Certification\". Pour le \"Domaine d’études\", c’est \"Computer Software Engineering\". Puis sauvegardez les changements.", - "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" - ] - ], - "titleDe": "Tritt unserem LinkedIn Alumni Netzwerk bei", - "descriptionDe": [ - [ - "//i.imgur.com/vJyiXzU.gif", - "Ein GIF, das dir zeigt, wie du den unten stehenden Link anklicken kannst und welche Felder du ausfüllen musst, damit du Free Code Camp zu deinem LinkedIn Profil hinzufügst.", - "LinkedIn erkennt Free Code Camp als Universität an. Du bekommst auf unser großes Alumni Netzwerk zugriff, indem du Free Code Camp zum Ausbildungsbereich deines LinkedIn Profils hinzufügst. Setze deinen Abschlusszeitpunkt auf das nächste Jahr. In das Feld \"Abschluss\" schreibe \"Full Stack Web Development Certification\". In das Feld \"Studienfach\" schreibe \"Computer Software Engineering\". Dann klicke auf den \"Speichern\" Button.", - "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" - ] - ] + "translations": { + "de": { + "title": "Tritt unserem LinkedIn Alumni Netzwerk bei", + "description": [ + [ + "//i.imgur.com/vJyiXzU.gif", + "Ein GIF, das dir zeigt, wie du den unten stehenden Link anklicken kannst und welche Felder du ausfüllen musst, damit du Free Code Camp zu deinem LinkedIn Profil hinzufügst.", + "LinkedIn erkennt Free Code Camp als Universität an. Du bekommst auf unser großes Alumni Netzwerk zugriff, indem du Free Code Camp zum Ausbildungsbereich deines LinkedIn Profils hinzufügst. Setze deinen Abschlusszeitpunkt auf das nächste Jahr. In das Feld \"Abschluss\" schreibe \"Full Stack Web Development Certification\". In das Feld \"Studienfach\" schreibe \"Computer Software Engineering\". Dann klicke auf den \"Speichern\" Button.", + "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" + ] + ] + }, + "es": { + "title": "Únete a nuestra red de alumnos en LinkedIn", + "description": [ + [ + "//i.imgur.com/vJyiXzU.gif", + "Un gif mostrando como puedes pulsar el enlace de abajo y llenar todos los campos necesarios para agregar los estudios de Free Code Camp a tu perfil de LinkedIn", + "LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. Define tu fecha de graduación para el siguiente año. En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". En \"Campo de estudio\", escribe \"Ingeniería de Software\". Después pulsa \"Guardar Cambios\".", + "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" + ] + ] + }, + "fr": { + "title": "Rejoignez notre réseau de lauréats sur Linkedin", + "description": [ + [ + "//i.imgur.com/vJyiXzU.gif", + "Une gif qui montre comment tu peux cliquer sur le lien ci-dessous et remplir les champs nécessaires pour ajouter le certificat de Free Code Camp à votre profil LinkedIn.", + "LinkedIn reconnait Free Code Camp comme une université. Tu peux avoir accès à notre large réseau de lauréats en ajoutant Free Code Camp à la section éducation de ton profil LinkedIn. L’année d’obtention du diplôme est la prochaine année. Pour le \"Degré\", c’est \"Full Stack Web Development Certification\". Pour le \"Domaine d’études\", c’est \"Computer Software Engineering\". Puis sauvegardez les changements.", + "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp" + ] + ] + } + } }, { "id": "560add8ccb81ac38a17513c4", @@ -197,33 +221,41 @@ "tests": [], "type": "Waypoint", "challengeType": 7, - "titleEs": "Comprométete con una meta y con una organización sin fines de lucro", - "descriptionEs": [ - [ - "//i.imgur.com/Og1ifsn.gif", - "Un gif mostrando como te puedes comprometer con una meta para tus estudios de Free Code Camp y prometer una donación mensual a una organización sin fines de lucro para darte motivación externa de alcanzar esa meta.", - "Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. Elige tu meta, después elige tu donativo mensual. Cuando pulses \"commit\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.", - "/comprometerse" - ] - ], - "titleFr": "Engage-toi à un but et aide une association à but non lucratif", - "descriptionFr": [ - [ - "//i.imgur.com/Og1ifsn.gif", - "Une gif montrant comment tu peux t’engager pour atteindre ton but sur Free Code Camp et verser une somme d’argent chaque mois pour une organisation à but non lucratif qui sera une motivation externe pour atteindre ton objectif.", - "Tu peux définir un but et t’engager à verser une somme d’argent pour aider une organisation à but non lucratif chaque mois jusqu’à atteindre ton objectif. Cela va te donner une motivation externe dans ta journée d’apprentissage, mais aussi une opportunité pour aider ces organisations. Choisi un but, et un montant à verser. Quand tu vas cliquer sur \"commit\", la page des dons de l’organisation va s’ouvrir. Cette étape est optionnel, et tu peux annuler ou arrêter ton engagement à n’importe quel instant.", - "/commit" - ] - ], - "titleDe": "Verpflichte dich zu einem Ziel und einer gemeinnützigen Organisation", - "descriptionDe": [ - [ - "//i.imgur.com/Og1ifsn.gif", - "Ein GIF, das dir zeigt, wie du dich einem Ziel auf Free Code Camp verpflichten kannst und versprichst, eine monatliche Spende an eine gemeinnützige Organisation zu entrichten, um externe Motivation zur Erreichung deines Ziels zu haben.", - "Du kannst dir ein Ziel setzen und versprechen, einer gemeinnützigen Organisation eine monatliche Spende zu entrichten, bis du dieses Ziel erreicht hast. Das gibt dir externe Motivation in deinem Bestreben programmieren zu lernen - und eröffnet von Anfang an die Gelegenheit gemeinnützigen Organisationen zu helfen. Wähle dein Ziel und dann eine monatliche Spende. Wenn du auf \"verpflichten\" klickst, öffnet sich die Spendenseite der gemeinnützigen Organisation in einem neuen Tab. Dieser Schritt ist optional, du kannst deine Verpflichtung jederzeit ändern oder stoppen.", - "/verpflichten" - ] - ] + "translations": { + "de": { + "title": "Verpflichte dich zu einem Ziel und einer gemeinnützigen Organisation", + "description": [ + [ + "//i.imgur.com/Og1ifsn.gif", + "Ein GIF, das dir zeigt, wie du dich einem Ziel auf Free Code Camp verpflichten kannst und versprichst, eine monatliche Spende an eine gemeinnützige Organisation zu entrichten, um externe Motivation zur Erreichung deines Ziels zu haben.", + "Du kannst dir ein Ziel setzen und versprechen, einer gemeinnützigen Organisation eine monatliche Spende zu entrichten, bis du dieses Ziel erreicht hast. Das gibt dir externe Motivation in deinem Bestreben programmieren zu lernen - und eröffnet von Anfang an die Gelegenheit gemeinnützigen Organisationen zu helfen. Wähle dein Ziel und dann eine monatliche Spende. Wenn du auf \"verpflichten\" klickst, öffnet sich die Spendenseite der gemeinnützigen Organisation in einem neuen Tab. Dieser Schritt ist optional, du kannst deine Verpflichtung jederzeit ändern oder stoppen.", + "/verpflichten" + ] + ] + }, + "es": { + "title": "Comprométete con una meta y con una organización sin fines de lucro", + "description": [ + [ + "//i.imgur.com/Og1ifsn.gif", + "Un gif mostrando como te puedes comprometer con una meta para tus estudios de Free Code Camp y prometer una donación mensual a una organización sin fines de lucro para darte motivación externa de alcanzar esa meta.", + "Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. Elige tu meta, después elige tu donativo mensual. Cuando pulses \"commit\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.", + "/comprometerse" + ] + ] + }, + "fr": { + "title": "Engage-toi à un but et aide une association à but non lucratif", + "description": [ + [ + "//i.imgur.com/Og1ifsn.gif", + "Une gif montrant comment tu peux t’engager pour atteindre ton but sur Free Code Camp et verser une somme d’argent chaque mois pour une organisation à but non lucratif qui sera une motivation externe pour atteindre ton objectif.", + "Tu peux définir un but et t’engager à verser une somme d’argent pour aider une organisation à but non lucratif chaque mois jusqu’à atteindre ton objectif. Cela va te donner une motivation externe dans ta journée d’apprentissage, mais aussi une opportunité pour aider ces organisations. Choisi un but, et un montant à verser. Quand tu vas cliquer sur \"commit\", la page des dons de l’organisation va s’ouvrir. Cette étape est optionnel, et tu peux annuler ou arrêter ton engagement à n’importe quel instant.", + "/commit" + ] + ] + } + } } ] } diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 37159cfcce..1d082e95ec 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -6,58 +6,6 @@ "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!", - "Mithilfe des eingebauten text editor kannst du den code bearbeiten.", - "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element", - "Die meisten HTML Elemente haben einen opening tag und einen closing tag.", - "Öffnende Tags sehen so aus:", - "<h1>", - "Schließende Tags so:", - "</h1>", - "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.", - "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.", - "Um den Test dieser Challenge zu bestehen, ändere den Text deines h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button." - ], - "titleRU": "Скажи привет HTML-элементам", - "descriptionRU": [ - "Добро пожаловать на первое программное испытание Free Code Camp.", - "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.", - "Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.", - "Большинство HTML-элементов имеют открывающую метку закрывающую метку.", - "Открывающие метки выглядят так:", - "<h1>", - "Закрывающие метки выглядят следующим образом:", - "</h1>", - "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.", - "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", - "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." - ], - "titleFR": "Dites bonjour aux éléments HTML", - "descriptionFR": [ - "Bienvenue au premier défi de code de Free Code Camp.", - "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.", - "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.", - "La plupart des éléments HTML ont une balise ouvrante et une balise fermante", - "Les balises ouvrantes ont cette apparence :", - "<h1>", - "Les balises fermantes ont cette apparence :", - "</h1>", - "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.", - "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.", - "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." - ], "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", @@ -79,57 +27,72 @@ "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'message: Your h1 element should have the text \"Hello World\".');" ], "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.", - "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", - "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", - "Las etiquetas de apertura se ven como:", - "<h1>", - " Las etiquetas de cierre se ven como:", - "</h1>", - "Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", - "Cada 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\"." - ], - "titleDe": "Begrüße die HTML Elemente", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Willkommen bei der ersten Programmier-Challenge von Free Code Camp!", + "Mithilfe des eingebauten text editor kannst du den code bearbeiten.", + "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element", + "Die meisten HTML Elemente haben einen opening tag und einen closing tag.", + "Öffnende Tags sehen so aus:", + "<h1>", + "Schließende Tags so:", + "</h1>", + "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.", + "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.", + "Um den Test dieser Challenge zu bestehen, ändere den Text deines h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button." + ] + }, + "fr": { + "title": "Dites bonjour aux éléments HTML", + "description": [ + "Bienvenue au premier défi de code de Free Code Camp.", + "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.", + "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.", + "La plupart des éléments HTML ont une balise ouvrante et une balise fermante", + "Les balises ouvrantes ont cette apparence :", + "<h1>", + "Les balises fermantes ont cette apparence :", + "</h1>", + "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.", + "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.", + "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." + ] + }, + "pt-br": { + "title": "Diga Olá aos Elementos HTML", + "description": [ + "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\"." + ] + }, + "ru": { + "title": "Скажи привет HTML-элементам", + "description": [ + "Добро пожаловать на первое программное испытание Free Code Camp.", + "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.", + "Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.", + "Большинство HTML-элементов имеют открывающую метку закрывающую метку.", + "Открывающие метки выглядят так:", + "<h1>", + "Закрывающие метки выглядят следующим образом:", + "</h1>", + "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.", + "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", + "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." + ] + } + } }, { "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": [ - "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:", - "\"Ein", - "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", - "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.", - "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht." - ], - "titleRU": "Заголовок с применением элемента h2", - "descriptionRU": [ - "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:", - "\"A", - "Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.", - "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", - "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"." - ], - "titleFR": "Un titre avec l'élément h2", - "descriptionFR": [ - "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :", - "\"Une", - "L'élément h2 que vous entrerez créera un élément h2 sur le site.", - "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", - "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." - ], "title": "Headline with the h2 Element", "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", @@ -148,47 +111,52 @@ "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 element should have the text \"Hello World\".');" ], "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", - "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", - "Este elemento le dice al navegador cómo mostrar el texto que contiene.", - "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\"." - ], - "titleDe": "Überschrift mit dem h2 Element", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:", + "\"Ein", + "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", + "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.", + "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht." + ] + }, + "fr": { + "title": "Un titre avec l'élément h2", + "description": [ + "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :", + "\"Une", + "L'élément h2 que vous entrerez créera un élément h2 sur le site.", + "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", + "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." + ] + }, + "pt-br": { + "title": "Cabeçalho com o Elemento h2", + "description": [ + "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\"." + ] + }, + "ru": { + "title": "Заголовок с применением элемента h2", + "description": [ + "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:", + "\"A", + "Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.", + "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", + "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"." + ] + } + } }, { "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": [ - "p Elemente sind das bevorzugte Element für normale Paragraphentexte 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>", - "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein." - ], - "titleRU": "Проинформируйте с применением элемента p", - "descriptionRU": [ - "Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".", - "Вы можете создать элемент p следующим образом:", - "<p>Я метка p!</p>", - "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." - ], - "titleFR": "Informez avec l'élément paragraphe", - "descriptionFR": [ - "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",", - "Vous pouvez créer un élément p comme ceci :", - "<p>Je suis une balise p!</p>", - "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." - ], "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\".", @@ -206,45 +174,47 @@ "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" ], "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\"." - ], - "titleDe": "Informiere mit dem Paragraph Element", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "p Elemente sind das bevorzugte Element für normale Paragraphentexte 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>", + "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein." + ] + }, + "fr": { + "title": "Informez avec l'élément paragraphe", + "description": [ + "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",", + "Vous pouvez créer un élément p comme ceci :", + "<p>Je suis une balise p!</p>", + "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." + ] + }, + "pt-br": { + "title": "Informe com o Elemento Parágrafo", + "description": [ + "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\"." + ] + }, + "ru": { + "title": "Проинформируйте с применением элемента p", + "description": [ + "Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".", + "Вы можете создать элемент p следующим образом:", + "<p>Я метка p!</p>", + "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." + ] + } + } }, { "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": [ - "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.", - "Entkommentiere deine h1, h2 und p Elemente." - ], - "titleRU": "Раскомментируйте HTML", - "descriptionRU": [ - "Комментирование - способ хранения заметок по коду без воздействия на сам код.", - "Также комментирование - неплохой метод отключения части кода без необходимости его удаления.", - "Вы можете начать комментарий с <!-- и закончить его -->", - "Раскомментируйте свои элементы h1, h2 и p." - ], - "titleFR": "Décommenter du HTML", - "descriptionFR": [ - "Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.", - "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.", - "Vous pouvez débuter un commentaire avec <!-- et le terminer avec -->.", - "Décommenter vos éléments h1, h2 et p." - ], "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -268,41 +238,47 @@ "assert(!/[^fc]-->/gi.test(code.replace(/ *\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" ], "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.", - "Por ejemplo, si quieres que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puedes usar el siguiente estilo CSS:", - "

p {
  font-family: Helvetica, Sans-Serif;
}
", - "Ahora 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." - ], - "titleDe": "Spezifiziere die Rangfolge von Schriftarten", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem Monospace, Serif und Sans-Serif.", + "Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.", + "Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird." + ] + }, + "fr": { + "title": "Spécifier comment vos polices devraient dégrader", + "description": [ + "Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.", + "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.", + "Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace." + ] + }, + "pt-br": { + "title": "Especifique como as Fontes Devem se Degradar", + "description": [ + "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." + ] + }, + "ru": { + "title": "Укажите порядок деградации шрифтов", + "description": [ + "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них Monospace, Serif и Sans-Serif", + "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.", + "Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." + ] + } + } }, { "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=\"https://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": [ - "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=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">", - "Beachte dass in den meisten Fällen img Elemente selbstschließend sind.", - "Versuche es mit diesem Bild:", - "https://bit.ly/fcc-relaxing-cat" - ], - "titleRU": "Добавьте изображения к вашему сайту", - "descriptionRU": [ - "Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.", - "Примером добавления мзображения может служить:", - "<img src=\"https://www.your-image-source.com/your-image.jpg\">", - "Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.", - "Попробуйте добавить изображение используя следующую ссылку:", - "https://bit.ly/fcc-relaxing-cat" - ], - "titleFR": "Ajouter des images à votre site Web", - "descriptionFR": [ - "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", - "Un exemple de cette procédure serait :", - "<img src=\"https://www.your-image-source.com/your-image.jpg\">", - "Note that in most cases, img elements are self-closing.", - "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", - "Essayez avec cette image :", - "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.", @@ -1164,54 +1132,56 @@ "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!]+?(\\\"|\\')/), 'message: Your image element must have an alt attribute.');" ], "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:", - "<img src=\"https://www.origen-de-tu-imagen.com/tu-imagen.jpg\">", - "Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.", - "Prueba con esta imagen:", - "https://bit.ly/fcc-relaxing-cat" - ], - "titleDe": "Füge Bilder zu deiner Website hinzu", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "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=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">", + "Beachte dass in den meisten Fällen img Elemente selbstschließend sind.", + "Versuche es mit diesem Bild:", + "https://bit.ly/fcc-relaxing-cat" + ] + }, + "fr": { + "title": "Ajouter des images à votre site Web", + "description": [ + "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", + "Un exemple de cette procédure serait :", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Note that in most cases, img elements are self-closing.", + "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", + "Essayez avec cette image :", + "https://bit.ly/fcc-relaxing-cat" + ] + }, + "pt-br": { + "title": "Adicione Imagens em sua Página Web", + "description": [ + "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=\"https://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" + ] + }, + "ru": { + "title": "Добавьте изображения к вашему сайту", + "description": [ + "Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.", + "Примером добавления мзображения может служить:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.", + "Попробуйте добавить изображение используя следующую ссылку:", + "https://bit.ly/fcc-relaxing-cat" + ] + } + } }, { "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": [ - "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>
", - "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", - "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen." - ], - "titleRU": "Установите размер ваших изображений", - "descriptionRU": [ - "В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.", - "Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:", - "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", - "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", - "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." - ], - "titleFR": "Redimensionner vos images", - "descriptionFR": [ - "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", - "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", - "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", - "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", - "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." - ], "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.", @@ -1249,60 +1219,54 @@ "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');" ], "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:", - "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", - "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.", - "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío." - ], - "titleDe": "Skaliere deine Bilder", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "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>
", + "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", + "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen." + ] + }, + "fr": { + "title": "Redimensionner vos images", + "description": [ + "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", + "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." + ] + }, + "pt-br": { + "title": "Dê um Tamanho para suas Imagens", + "description": [ + "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." + ] + }, + "ru": { + "title": "Установите размер ваших изображений", + "description": [ + "В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.", + "Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", + "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." + ] + } + } }, { "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": [ - "CSS Rahmen haben Attribute wie style, color und width", - "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:", - "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", - "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 deinem Katzenfoto hinzu.", - "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:", - "<img class=\"class1 class2\">" - ], - "titleRU": "Дбавьте границы вокруг ваших элементов", - "descriptionRU": [ - "CSS-границы имеют свойства: style, color и width", - "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:", - "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", - "Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.", - "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", - "<img class=\"class1 class2\">" - ], - "titleFR": "Ajouter des bordures autour de vos éléments", - "descriptionFR": [ - "Les bordures CSS ont des propriétés comme style, color et width", - "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", - "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", - "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", - "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", - "<img class=\"class1 class2\">" - ], "title": "Add Borders Around your Elements", "description": [ "CSS borders have properties like style, color and width", @@ -1348,37 +1312,61 @@ "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your img element should be green.');" ], "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:", - "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:", - "<img class=\"clase1 clase2\">" - ], - "titleDe": "Füge Rahmen zu deinen Elementen hinzu", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "description": [ + "CSS Rahmen haben Attribute wie style, color und width", + "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "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 deinem Katzenfoto hinzu.", + "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:", + "<img class=\"class1 class2\">" + ] + }, + "fr": { + "title": "Ajouter des bordures autour de vos éléments", + "description": [ + "Les bordures CSS ont des propriétés comme style, color et width", + "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", + "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", + "<img class=\"class1 class2\">" + ] + }, + "pt-br": { + "title": "Adicione Bordas ao Redor de seus Elementos", + "description": [ + "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\">" + ] + }, + "ru": { + "title": "Дбавьте границы вокруг ваших элементов", + "description": [ + "CSS-границы имеют свойства: style, color и width", + "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.", + "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", + "<img class=\"class1 class2\">" + ] + } + } }, { "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": [ - "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", - "Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.", - "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen." - ], - "titleRU": "Добавьте скруглённые углы с помощью радиуса границы", - "descriptionRU": [ - "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.", - "Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.", - "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image." - ], "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.", @@ -1424,31 +1412,44 @@ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" ], "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." - ], - "titleDe": "Füge abgerundete Ecken mit Border Radius hinzu", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Füge abgerundete Ecken mit Border Radius hinzu", + "description": [ + "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.", + "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen." + ] + }, + "es": { + "title": "Agrega esquinas redondeadas usando Border Radius", + "description": [ + "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." + ] + }, + "pt-br": { + "title": "Insira Bordas Arredondadas com o Border Radius", + "description": [ + "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." + ] + }, + "ru": { + "title": "Добавьте скруглённые углы с помощью радиуса границы", + "description": [ + "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.", + "Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.", + "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image." + ] + } + } }, { "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": [ - "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", - "Gib deinem Katzenfoto einen border-radius von 50%." - ], - "titleRU": "Сделайте круглые изображения с помощью радиуса границы", - "descriptionRU": [ - "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.", - "Присвойте вашему фото кота свойство border-radius со значением 50%." - ], "title": "Make Circular Images with a Border Radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", @@ -1494,42 +1495,40 @@ "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');" ], "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%." - ], - "titleDe": "Erstelle runde Bilder mit einem Border Radius", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle runde Bilder mit einem Border Radius", + "description": [ + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", + "Gib deinem Katzenfoto einen border-radius von 50%." + ] + }, + "es": { + "title": "Crea imágenes circulares usando Border Radius", + "description": [ + "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "Dale a tu foto del gato un border-radius de 50%." + ] + }, + "pt-br": { + "title": "Deixe as Imagens Circulares com o Border Radius", + "description": [ + "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%." + ] + }, + "ru": { + "title": "Сделайте круглые изображения с помощью радиуса границы", + "description": [ + "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.", + "Присвойте вашему фото кота свойство border-radius со значением 50%." + ] + } + } }, { "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=\"https://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": [ - "a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.", - "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.", - "\"Eine", - "Hier ist ein Beispiel:", - "<p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", - "Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet." - ], - "titleRU": "Присоедините внешние страницы с помощью якорных элементов", - "descriptionRU": [ - "Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.", - "Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.", - "\"a", - "Вот пример:", - "<p>Вот <a href=\"http://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", - "Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря." - ], "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.", @@ -1580,46 +1579,56 @@ "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');" ], "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. ", - " \"un ", - "He aquí un ejemplo:", - "<p>Aquí está un <a href=\"https://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\"." - ], - "titleDe": "Verlinke externe Seiten mit Anker Elementen", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Verlinke externe Seiten mit Anker Elementen", + "description": [ + "a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.", + "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.", + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", + "Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet." + ] + }, + "es": { + "title": "Enlaza páginas externas con elementos ancla", + "description": [ + "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", + " \"un ", + "He aquí un ejemplo:", + "<p>Aquí está un <a href=\"https://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\"." + ] + }, + "pt-br": { + "title": "Ligue Páginas Externas com o Elemento Âncora", + "description": [ + "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=\"https://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\"." + ] + }, + "ru": { + "title": "Присоедините внешние страницы с помощью якорных элементов", + "description": [ + "Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.", + "Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"http://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", + "Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря." + ] + } + } }, { "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=\"https://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": [ - "Hier ist nochmal ein Beispiel für ein a Element:", - "\"Eine", - "Hier ist ein Beispiel:", - "<p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", - "Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben", - "Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden h2 Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text." - ], - "titleRU": "Создайте вложенный якорный элемент внутри параграфа", - "descriptionRU": [ - "Вот диаграмма элемента a:", - "\"a", - "Вот пример:", - "<p>Вот <a href=\"https://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", - "Вложенность значит установку одного элемента внутрь друго элемента.", - "Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента h2) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный." - ], "title": "Nest an Anchor Element within a Paragraph", "description": [ "Again, here's a diagram of an a element for your reference:", @@ -1677,37 +1686,56 @@ "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "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", - "He aquí un ejemplo:", - "<p>Aquí hay un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", - "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", - "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." - ], - "titleDe": "Umschließe ein Anker Element mit einem Paragraphen", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Umschließe ein Anker Element mit einem Paragraphen", + "description": [ + "Hier ist nochmal ein Beispiel für ein a Element:", + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>", + "Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben", + "Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden h2 Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text." + ] + }, + "es": { + "title": "Anida un elemento de ancla dentro de un párrafo", + "description": [ + "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", + "\"un", + "He aquí un ejemplo:", + "<p>Aquí hay un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", + "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + ] + }, + "pt-br": { + "title": "Aninhe o Elemento Âncora no Interior de um Parágrafo", + "description": [ + "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=\"https://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." + ] + }, + "ru": { + "title": "Создайте вложенный якорный элемент внутри параграфа", + "description": [ + "Вот диаграмма элемента a:", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"https://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", + "Вложенность значит установку одного элемента внутрь друго элемента.", + "Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента h2) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный." + ] + } + } }, { "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": [ - "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 später noch behandeln.", - "Ersetze den Inhalt des href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen." - ], - "titleRU": "Создайте мёртвые ссылки используя хэш-символ", - "descriptionRU": [ - "Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.", - "Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.", - "Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку." - ], "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.", @@ -1755,39 +1783,44 @@ "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your a element should be a dead link with a href attribute set to \"#\".');" ], "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." - ], - "titleDe": "Erstelle tote Links mit dem Hash Symbol", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle tote Links mit dem Hash Symbol", + "description": [ + "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 später noch behandeln.", + "Ersetze den Inhalt des href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen." + ] + }, + "es": { + "title": "Haz vínculos muertos utilizando el símbolo de numero", + "description": [ + "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." + ] + }, + "pt-br": { + "title": "Crie Links Inativos com o Símbolo Cerquilha", + "description": [ + "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." + ] + }, + "ru": { + "title": "Создайте мёртвые ссылки используя хэш-символ", + "description": [ + "Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.", + "Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.", + "Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку." + ] + } + } }, { "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=\"https://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": [ - "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", - "Umschließe dein Bild mit einem a Element. Hier ist ein Beispiel:", - "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", - "Vergewissere dich, dass du ein # 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." - ], - "titleRU": "Превратите изображение в ссылку", - "descriptionRU": [ - "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.", - "Вложите ваше изображение в элемент a. Вот пример:", - "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", - "Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.", - "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой." - ], "title": "Turn an Image into a Link", "description": [ "You can make elements into links by nesting them within an a element.", @@ -1840,48 +1873,51 @@ "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "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: ", - "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", - "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", - "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 ." - ], - "titleDe": "Verlinke ein Bild", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Verlinke ein Bild", + "description": [ + "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", + "Umschließe dein Bild mit einem a Element. Hier ist ein Beispiel:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Vergewissere dich, dass du ein # 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." + ] + }, + "es": { + "title": "Convierte una imagen en un vínculo", + "description": [ + "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", + "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", + "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", + "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 ." + ] + }, + "pt-br": { + "title": "Transforme uma Imagem em um Link", + "description": [ + "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=\"https://bit.ly/fcc-running-cats\"/></a>", + "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." + ] + }, + "ru": { + "title": "Превратите изображение в ссылку", + "description": [ + "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.", + "Вложите ваше изображение в элемент a. Вот пример:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.", + "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой." + ] + } + } }, { "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": [ - "HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).", - "Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", - "Zum Beispiel:", - "
<ul>
  <li>Milch</li>
  <li>Käse</li>
</ul>
", - "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", - "Entferne die letzten zwei p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite" - ], - "titleRU": "Создайте ненумерованный неупорядоченный список", - "descriptionRU": [ - "В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.", - "Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.", - "Например: ", - "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", - "создаст ненумерованный список из \"milk\" и \"cheese\".", - "Удалите последние два элемента p и создайте неупорядоченный список из трёх вещей, которые любят кошки." - ], "title": "Create a Bulleted Unordered List", "description": [ "HTML has a special element for creating unordered lists, or bullet point-style lists.", @@ -1935,49 +1971,59 @@ "assert(code.match(/<\\/li>/gi) && code.match(/]/gi) && code.match(/<\\/li>/gi).length === code.match(/]/gi).length, 'message: Make sure your li elements have closing tags.');" ], "type": "waypoint", - "titleEs": "Crea una lista no ordenada con viñetas", - "descriptionEs": [ - "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", - "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", - "Por ejemplo: ", - "
<ul>
  <li>leche</li>
  <li>queso</li>
</ul>
", - "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", - "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." - ], - "titleDe": "Erstelle eine ungeordnete Liste", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle eine ungeordnete Liste", + "description": [ + "HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).", + "Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", + "Zum Beispiel:", + "
<ul>
  <li>Milch</li>
  <li>Käse</li>
</ul>
", + "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", + "Entferne die letzten zwei p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite" + ] + }, + "es": { + "title": "Crea una lista no ordenada con viñetas", + "description": [ + "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", + "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", + "Por ejemplo: ", + "
<ul>
  <li>leche</li>
  <li>queso</li>
</ul>
", + "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", + "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." + ] + }, + "pt-br": { + "title": "Crie uma Lista Não Ordenada com Marcadores", + "description": [ + "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." + ] + }, + "ru": { + "title": "Создайте ненумерованный неупорядоченный список", + "description": [ + "В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.", + "Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.", + "Например: ", + "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", + "создаст ненумерованный список из \"milk\" и \"cheese\".", + "Удалите последние два элемента p и создайте неупорядоченный список из трёх вещей, которые любят кошки." + ] + } + } }, { "id": "bad87fee1348bd9aedf08828", - "descriptionPtBR": [ - "O HTML possui um elemento especial para a criação de listas ordenadas, ou listas numeradas.", - "As listas ordenadas iniciam com um elemento <ol>. Logo após, contém uma série de elementos <li>.", - "Por exemplo:", - "<ol>", - "  <li>Garfield</li>", - "  <li>Sylvester</li>", - "</ol>", - "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", - "Crie uma lista ordenada com as três coisas que os gatos mais odeiam." - ], - "namePtBR": "Crie uma Lista Ordenada", - "descriptionDe": [ - "HTML beinhaltet ein spezielles Element für ordered lists (geordnete Listen).", - "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", - "Zum Beispiel:", - "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", - "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", - "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen." - ], - "titleRU": "Создайте упорядоченный список", - "descriptionRU": [ - "В HTML есть специальный элемент для создания упорядоченных списков, или списков с номерами в качестве меток элементов.", - "Упорядоченные списки начинаются с элемента <ol>. Далее они содержат некоторое количество элементов <li>.", - "Например:", - "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", - "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", - "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят." - ], "title": "Create an Ordered List", "description": [ "HTML has a special element for creating ordered lists, or numbered-style lists.", @@ -2039,46 +2085,59 @@ "assert(code.match(/<\\/li>/g) && code.match(/
  • /g) && code.match(/<\\/li>/g).length === code.match(/
  • /g).length, 'message: Make sure your li element has a closing tag.');" ], "type": "waypoint", - "titleEs": "Crear una lista ordenada", - "descriptionEs": [ - "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", - "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", - "Por ejemplo:", - "
    <ol>
      <li>Garfield</li>
      <li>Sylvester</li>
    </ol>
    ", - "creará una lista numerada con \"Garfield\" y \"Sylvester\".", - "Crea una lista ordenada de los 3 cosas que más odian los gatos." - ], - "titleDe": "Erstelle eine geordnete Liste", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle eine geordnete Liste", + "description": [ + "HTML beinhaltet ein spezielles Element für ordered lists (geordnete Listen).", + "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", + "Zum Beispiel:", + "
    <ol>
      <li>Garfield</li>
      <li>Sylvester</li>
    </ol>
    ", + "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", + "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen." + ] + }, + "es": { + "title": "Crear una lista ordenada", + "description": [ + "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", + "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", + "Por ejemplo:", + "
    <ol>
      <li>Garfield</li>
      <li>Sylvester</li>
    </ol>
    ", + "creará una lista numerada con \"Garfield\" y \"Sylvester\".", + "Crea una lista ordenada de los 3 cosas que más odian los gatos." + ] + }, + "pt-br": { + "title": "Crie uma Lista Ordenada", + "description": [ + "O HTML possui um elemento especial para a criação de listas ordenadas, ou listas numeradas.", + "As listas ordenadas iniciam com um elemento <ol>. Logo após, contém uma série de elementos <li>.", + "Por exemplo:", + "<ol>", + "  <li>Garfield</li>", + "  <li>Sylvester</li>", + "</ol>", + "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", + "Crie uma lista ordenada com as três coisas que os gatos mais odeiam." + ] + }, + "ru": { + "title": "Создайте упорядоченный список", + "description": [ + "В HTML есть специальный элемент для создания упорядоченных списков, или списков с номерами в качестве меток элементов.", + "Упорядоченные списки начинаются с элемента <ol>. Далее они содержат некоторое количество элементов <li>.", + "Например:", + "
    <ol>
      <li>Garfield</li>
      <li>Sylvester</li>
    </ol>
    ", + "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", + "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят." + ] + } + } }, { "id": "bad87fee1348bd9aedf08829", - "descriptionPtBR": [ - "Agora vamos criar um formulário web.", - "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.", - "Você pode criar um assim:", - "<input type=\"text\">", - "Note que os elementos input são de fechamento automático.", - "Crie um elemento input de tipo text abaixo de suas listas." - ], - "namePtBR": "Crie um Campo de Texto", - "descriptionDe": [ - "Nun erstellen wir ein Web Formular.", - "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.", - "So kannst du eines erstellen:", - "<input type=\"text\">", - "Beachte, dass input Elemente selbstschließend sind.", - "Erstelle ein input Element des Typ (\"type\") text unter deinen Listen." - ], - "titleRU": "Создайте текстовое поле", - "descriptionRU": [ - "Теперь давайте создадим web-форму.", - "Поля текстового ввода - удобный способ получения данных от пользователя.", - "Вы можете создать текстовое поле следующим образом:", - "<input type=\"text\">", - "Обратите внимание, что элементы input самозакрывающиеся.", - "Создайте элемент input типа text под вашими списками." - ], "title": "Create a Text Field", "description": [ "Now let's create a web form.", @@ -2139,40 +2198,56 @@ "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an input element of type text.');" ], "type": "waypoint", - "titleEs": "Crea un campo de texto", - "descriptionEs": [ - "Ahora vamos a crear un formulario web.", - "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", - "Puedes crear uno como este:", - "<input type=\"text\">", - "Ten en cuenta que los elementos input son de cierre automático.", - "Crea un elemento input de tipo text debajo de tus listas." - ], - "titleDe": "Erstelle ein Textfeld", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle ein Textfeld", + "description": [ + "Nun erstellen wir ein Web Formular.", + "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.", + "So kannst du eines erstellen:", + "<input type=\"text\">", + "Beachte, dass input Elemente selbstschließend sind.", + "Erstelle ein input Element des Typ (\"type\") text unter deinen Listen." + ] + }, + "es": { + "title": "Crea un campo de texto", + "description": [ + "Ahora vamos a crear un formulario web.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", + "Puedes crear uno como este:", + "<input type=\"text\">", + "Ten en cuenta que los elementos input son de cierre automático.", + "Crea un elemento input de tipo text debajo de tus listas." + ] + }, + "pt-br": { + "title": "Crie um Campo de Texto", + "description": [ + "Agora vamos criar um formulário web.", + "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.", + "Você pode criar um assim:", + "<input type=\"text\">", + "Note que os elementos input são de fechamento automático.", + "Crie um elemento input de tipo text abaixo de suas listas." + ] + }, + "ru": { + "title": "Создайте текстовое поле", + "description": [ + "Теперь давайте создадим web-форму.", + "Поля текстового ввода - удобный способ получения данных от пользователя.", + "Вы можете создать текстовое поле следующим образом:", + "<input type=\"text\">", + "Обратите внимание, что элементы input самозакрывающиеся.", + "Создайте элемент input типа text под вашими списками." + ] + } + } }, { "id": "bad87fee1348bd9aedf08830", - "descriptionPtBR": [ - "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.", - "Você pode criar um texto indicativo assim:", - "<input type=\"text\" placeholder=\"isso é um texto indicativo\">", - "Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"." - ], - "namePtBR": "Adicione Texto Indicativo a um Campo de Texto", - "descriptionDe": [ - "Platzhaltertexte erscheinen in deinen input Feldern, bevor der Nutzer etwas eingibt.", - "Du kannst Platzhalter auf folgende Weise erstellen:", - "<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">", - "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\"." - ], - "titleRU": "Добавьте замещающий текст к текстовому полю", - "descriptionRU": [ - "Ваш замещающий текст - это то, что отображается в виде текста внутри input пока пользователь не ввёл туда что-либо.", - "Вы можете создать замещающий текст следующим образом:", - "<input type=\"text\" placeholder=\"это замещающий текст\">", - "Установите значение атрибута placeholder вашего текстового поля input равными \"cat photo URL\"." - ], "title": "Add Placeholder Text to a Text Field", "description": [ "Your placeholder text is what appears in your text input before your user has input anything.", @@ -2234,38 +2309,48 @@ "assert($(\"input[type=text]\").length > 0 && code.match(/\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished input element should have valid syntax.');" ], "type": "waypoint", - "titleEs": "Agrega un texto de relleno a un campo de texto", - "descriptionEs": [ - "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.", - "Puedes crear un texto de relleno de esta manera:", - "<input type=\"text\" placeholder=\"este es un texto de relleno\">", - "Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"." - ], - "titleDe": "Füge Platzhalter zu einem Textfeld hinzu", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Füge Platzhalter zu einem Textfeld hinzu", + "description": [ + "Platzhaltertexte erscheinen in deinen input Feldern, bevor der Nutzer etwas eingibt.", + "Du kannst Platzhalter auf folgende Weise erstellen:", + "<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">", + "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\"." + ] + }, + "es": { + "title": "Agrega un texto de relleno a un campo de texto", + "description": [ + "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.", + "Puedes crear un texto de relleno de esta manera:", + "<input type=\"text\" placeholder=\"este es un texto de relleno\">", + "Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"." + ] + }, + "pt-br": { + "title": "Adicione Texto Indicativo a um Campo de Texto", + "description": [ + "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.", + "Você pode criar um texto indicativo assim:", + "<input type=\"text\" placeholder=\"isso é um texto indicativo\">", + "Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"." + ] + }, + "ru": { + "title": "Добавьте замещающий текст к текстовому полю", + "description": [ + "Ваш замещающий текст - это то, что отображается в виде текста внутри input пока пользователь не ввёл туда что-либо.", + "Вы можете создать замещающий текст следующим образом:", + "<input type=\"text\" placeholder=\"это замещающий текст\">", + "Установите значение атрибута placeholder вашего текстового поля input равными \"cat photo URL\"." + ] + } + } }, { "id": "bad87fee1348bd9aede08830", - "descriptionPtBR": [ - "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.", - "Por exemplo:", - "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", - "Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário." - ], - "namePtBR": "Crie um Elemento de Formulário", - "descriptionDe": [ - "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", - "Zum Beispiel:", - "<form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>", - "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu." - ], - "titleRU": "Создайте элемент типа форма", - "descriptionRU": [ - "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента form.", - "Например:", - "<form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form>", - "Вложите ваше текстовое поле в элемент form. Добавьте атрибут action=\"/submit-cat-photo\" к этому элементу формы." - ], "title": "Create a Form Element", "description": [ "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", @@ -2327,38 +2412,48 @@ "assert(code.match(/<\\/form>/g) && code.match(/
    /g).length === code.match(/form element has a closing tag.');" ], "type": "waypoint", - "titleEs": "Crea un elemento de formulario", - "descriptionEs": [ - "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento form.", - "Por ejemplo:", - "<form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form>", - "Anida tu campo de texto en un elemento form. Agrega el atributo action=\"/submit-cat-photo\" a este elemento de formulario." - ], - "titleDe": "Erstelle ein Formular", - "challengeType": 0 + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle ein Formular", + "description": [ + "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", + "Zum Beispiel:", + "<form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>", + "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu." + ] + }, + "es": { + "title": "Crea un elemento de formulario", + "description": [ + "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento form.", + "Por ejemplo:", + "<form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form>", + "Anida tu campo de texto en un elemento form. Agrega el atributo action=\"/submit-cat-photo\" a este elemento de formulario." + ] + }, + "pt-br": { + "title": "Crie um Elemento de Formulário", + "description": [ + "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.", + "Por exemplo:", + "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", + "Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário." + ] + }, + "ru": { + "title": "Создайте элемент типа форма", + "description": [ + "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента form.", + "Например:", + "<form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form>", + "Вложите ваше текстовое поле в элемент form. Добавьте атрибут action=\"/submit-cat-photo\" к этому элементу формы." + ] + } + } }, { "id": "bad87fee1348bd9aedd08830", - "descriptionPtBR": [ - "Vamos inserir um elemento submit ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo action do formulário.", - "Aqui está um exemplo de um botão de enviar:", - "<button type=\" submit\">este botão enviará o formulário</button>", - "Adicione um botão de enviar ao seu elemento form com o tipo submit e com o texto \"Submit\"." - ], - "namePtBR": "Inclua um Botão de Enviar a um Formulário", - "descriptionDe": [ - "Lass uns nun einen submit Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem action Attribut deines Formulars angegeben hast.", - "Hier ist ein Beispiel einen solchen Button:", - "<button type=\"submit\">Dieser Button überträgt die Daten des Formulars.</button>", - "Füge einen Button zum Senden mit dem Typ submit und \"Submit\" als Text zu deinem form Element hinzu." - ], - "titleRU": "Добавьте кнопку отправки к форме", - "descriptionRU": [ - "Давайте добавим кнопку отправки submit к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте action вашей формы.", - "Вот пример кнопки отправки:", - "<button type=\"submit\">эта кнопка отправляет данные формы</button>", - "Добавьте кнопку отправки к вашему элементу form с указанием типа submit и \"Submit\" в качестве отображаемого текста." - ], "title": "Add a Submit Button to a Form", "description": [ "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", @@ -2423,40 +2518,48 @@ "assert(code.match(/<\\/button>/g) && code.match(/