gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature(translations): Normalize translations

Browse Source 
translations are now listed under the prop "translations"
and keys to the IETF lang tag.
This commit is contained in:
Berkeley Martinez
2016-06-16 14:14:12 -07:00
parent ccc5c3ec24
commit ee4f1dbb73
51 changed files with 9558 additions and 7430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
common/models/challenge.json
View File

@ -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": [],

901
seed/challenges/00-getting-started/getting-started.json
View File

File diff suppressed because it is too large Load Diff

144
seed/challenges/01-front-end-development-certification/advanced-bonfires.json
View File

@ -61,22 +61,28 @@
"RegExp"
],
"challengeType": 5,
"titleEs": "Valida Números Telefónicos de los EEUU",
"descriptionEs": [
"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:",
"<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
"Para esta prueba se te presentará una cadena de texto como por ejemplo: <code>800-692-7753</code> o <code>8oo-six427676;laskdjf</code>. 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 <code>1</code>. 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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Verifica i numeri telefonici degli Stati Uniti",
"descriptionIt": [
]
},
"it": {
"title": "Verifica i numeri telefonici degli Stati Uniti",
"description": [
"Ritorna <code>true</code> 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):",
"<blockquote>555-555-5555\n(555)555-5555\n(555) 555-5555\n555 555 5555\n5555555555\n1 555 555 5555</blockquote>",
"In questo problema ti saranno presentate delle stringe come <code>800-692-7753</code> o <code>8oo-six427676;laskdjf</code>. 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 <code>1</code>. Ritorna <code>true</code> se la stringa è un numero di telefono valido negli Stati Uniti; altrimenti ritorna <code>false</code>.",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Differenza simmetrica",
"descriptionIt": [
]
},
"it": {
"title": "Differenza simmetrica",
"description": [
"Crea una funzione che accetti due o più array e che ritorni un array contenente la <dfn>differenza simmetrica</dfn> (<code>&xutri;</code> o <code>&oplus;</code>) degli stessi.",
"Dati due insiemi (per esempio l'insieme <code>A = {1, 2, 3}<code> e l'insieme <code>B = {2, 3, 4}</code>, il termine matematico \"differenza simmetrica\" di due insiemi è l'insieme degli elementi che sono in almeno uno dei due insiemi, ma non in entrambi (<code>A &xutri; B = C = {1, 4}</code>). Per ogni differenza simmetrica aggiuntiva che fai (per esempio su un insieme <code>D = {2, 3}</code>), devi prendere l'insieme degli elementi che sono in almeno uno dei due insiemi ma non in entrambi (<code>C &xutri; D = {1, 4} &xutri; {2, 3} = {1, 2, 3, 4}</code>).",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Cambio esatto",
"descriptionIt": [
]
},
"it": {
"title": "Cambio esatto",
"description": [
"Scrivi una funzione che simuli un registro di cassa chiamata <code>checkCashRegister()</code> che accetti il prezzo degli articoli come primo argomento (<code>price</code>), la somma pagata (<code>cash</code>), e la somma disponibile nel registratore di cassa (<code>cid</code>) come terzo argomento.",
"<code>cid</code> è un array a due dimensioni che contiene la quantità di monete e banconote disponibili.",
"Ritorna la stringa <code>\"Insufficient Funds\"</code> se la quantità di denaro disponibile nel registratore di cassa non è abbastanza per restituire il resto. Ritorna la stringa <code>\"Closed\"</code> 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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Aggiornamento dell'inventario",
"descriptionIt": [
]
},
"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 <code>arr1</code>). 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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Niente ripetizioni, per favore",
"descriptionIt": [
]
},
"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, <code>aab</code> deve ritornare 2, perchè la stringa ha 6 permutazioni possibili in totale (<code>aab</code>, <code>aab</code>, <code>aba</code>, <code>aba</code>, <code>baa</code>, <code>baa</code>), ma solo 2 di loro (<code>aba</code> e <code>aba</code>) non contengono la stessa lettera (in questo caso <code>a</code> ripetuta).",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
]
}
}
},
{
"id": "a19f0fbe1872186acd434d5a",
@ -338,16 +368,20 @@
"parseInt()"
],
"challengeType": 5,
"titleEs": "Rangos de fechas amigables",
"descriptionEs": [
"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."
],
"titleIt": "Intervalli di date leggibili",
"descriptionIt": [
]
},
"it": {
"title": "Intervalli di date leggibili",
"description": [
"Converti un intervallo di date composto da due date in formato <code>YYYY-MM-DD</code> 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 <code>1st</code> invece di <code>1</code>).",
"Non mostrare informazioni ridondanti o che siano ricavabili dall'utente: se l'intervallo di date termina in <em>meno di un anno</em> da quando inizia, non mostrare l'<em>anno in cui l'intervallo termina</em>.",
@ -358,6 +392,8 @@
"<code>makeFriendlyDates([\"2016-07-01\", \"2018-07-04\"])</code> deve ritornare <code>[\"July 1st, 2016\", \"July 4th, 2018\"]</code>.",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
]
}
}
},
{
"id": "a2f1d72d9b908d0bd72bb9f6",
@ -401,17 +437,21 @@
"Details of the Object Model"
],
"challengeType": 5,
"titleEs": "Crea una Persona",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea una Persona",
"description": [
"Completa el constructor de objetos con los métodos especificados a continuación:",
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Crea una Persona",
"descriptionIt": [
]
},
"it": {
"title": "Crea una Persona",
"description": [
"Completa il costruttore dell'oggetto con i metodi specificati qui sotto:",
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
"Esegui i test per vedere il risultato atteso per ogni metodo.",
@ -419,6 +459,8 @@
"Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
]
}
}
},
{
"id": "af4afb223120f7348cdfc9fd",
@ -452,17 +494,21 @@
"Math.pow()"
],
"challengeType": 5,
"titleEs": "Ubica los escombros",
"descriptionEs": [
"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 <code>{name: 'name', avgAlt: avgAlt}</code>.",
"Puedes leer acerca de períodos orbitales <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>en wikipedia</a>.",
"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 km<sup>3</sup>s<sup>-2</sup>.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "Mappa i detriti",
"descriptionIt": [
]
},
"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 <code>{name: 'name', avgAlt: avgAlt}</code>.",
"Puoi leggere riguardo i periodi orbitali <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>su wikipedia</a>.",
@ -470,6 +516,8 @@
"Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
]
}
}
},
{
"id": "a3f503de51cfab748ff001aa",
@ -505,15 +553,19 @@
"Array.prototype.reduce()"
],
"challengeType": 5,
"titleEs": "En parejas",
"descriptionEs": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleIt": "A coppie",
"descriptionIt": [
]
},
"it": {
"title": "A coppie",
"description": [
"Dato un array <code>arr</code>, trova le coppie di elementi la cui somma è uguale al secondo argomento passato <code>arg</code>. 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 <code>pairwise([7, 9, 11, 13, 15], 20)</code> ritorna <code>6</code>. Le coppia la cui somma è 20 sono <code>[7, 13]</code> e <code>[9, 11]</code>. Possiamo quindi osservare l'array con i loro indici e valori.",
@ -523,5 +575,7 @@
"Ricorda di usare <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
]
}
}
}
]
}

70
seed/challenges/01-front-end-development-certification/advanced-ziplines.json
View File

@ -24,7 +24,11 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"title": "Crea una calculadora JavaScript",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a esta: <a href='https://codepen.io/FreeCodeCamp/full/PNKdjo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNKdjo/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que necesites. Dale tu estilo personal.",
@ -34,9 +38,9 @@
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Crea una calculadora JavaScript"
]
}
}
},
{
"id": "bd7158d8c442eddfaeb5bd0f",
@ -59,8 +63,24 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте таймер Pomodoro",
"descriptionRu": [
"translations": {
"es": {
"title": "Crea un reloj pomodoro",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/FreeCodeCamp/full/aNyxXR/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
"<span class='text-info'>Historia de usuario:</span> Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.",
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo personalizar la longitud de cada pomodoro.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте таймер Pomodoro",
"description": [
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/FreeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/FreeCodeCamp/full/aNyxXR/</a>.",
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
@ -72,19 +92,9 @@
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"titleEs": "Crea un reloj pomodoro",
"descriptionEs": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/FreeCodeCamp/full/aNyxXR/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
"<span class='text-info'>Historia de usuario:</span> Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.",
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo personalizar la longitud de cada pomodoro.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7158d8c442eedfaeb5bd1c",
@ -106,7 +116,11 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"title": "Crea un juego de Tic Tac Toe",
"description": [
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/FreeCodeCamp/full/KzXQgy/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
@ -116,9 +130,9 @@
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. 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"
]
}
}
},
{
"id": "bd7158d8c442eddfaeb5bd1c",
@ -146,7 +160,11 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"title": "Construye un juego de Simon",
"description": [
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/Em-Ant/full/QbRyqq/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
@ -162,9 +180,9 @@
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Construye un juego de Simon"
]
}
}
}
]
}

146
seed/challenges/01-front-end-development-certification/basic-bonfires.json
View File

@ -37,7 +37,11 @@
"tests": [],
"type": "Waypoint",
"challengeType": 7,
"descriptionEs": [
"isRequired": false,
"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.",
@ -62,9 +66,9 @@
"Cuando te atasques, usa la metodología Leer-Buscar-Preguntar.<br>No te preocupes - ya lo has entendido.",
""
]
],
"isRequired": false,
"titleEs": "Prepárate para nuestros Desafíos sobre Algoritmos"
]
}
}
},
{
"id": "a202eed8fc186c8434cb6d61",
@ -100,13 +104,17 @@
"Array.prototype.join()"
],
"challengeType": 5,
"titleEs": "Invierte el texto",
"descriptionEs": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <code>n!</code>",
"Por ejemplo: <code>5! = 1 * 2 * 3 * 4 * 5 = 120</code>",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
]
}
}
},
{
"id": "aaa48de84e1ecc7c742e1124",
@ -196,8 +208,10 @@
"String.prototype.toLowerCase()"
],
"challengeType": 5,
"titleEs": "Verifica si es palíndromo",
"descriptionEs": [
"translations": {
"es": {
"title": "Verifica si es palíndromo",
"description": [
"Crea una función que devuelva <code>true</code> si una cadena de texto dada es un palíndromo, y que devuelva <code>false</code> 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.",
@ -205,6 +219,8 @@
"También vamos a pasar cadenas con símbolos especiales, tales como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, y <code>\"2_A3*3#A2\"</code>.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"translations": {
"es": {
"title": "Repite el texto Repite el texto",
"description": [
"Repite una cadena de texto dada (primer argumento) <code>num</code> veces (segundo argumento). Retorna una cadena de texto vacía si <code>num</code> es un número negativo.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <code>num</code es menor o igual a 3, entonces la longitud de los 3 puntos no se añade a la longitud de la cadena.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"translations": {
"es": {
"title": "Vuélale la cabeza",
"description": [
"Crea una función que devuelva los elementos restantes de un arreglo después de eliminar <code>n</code> elementos de la cabeza.",
"Por cabeza nos referimos al inicio de un arreglo, comenzando por el índice 0.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"translations": {
"es": {
"title": "Mutaciones",
"description": [
"Crea una función que devuelva <code>true</code> 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, <code>[\"hello\", \"Hello\"]</code>, debe devolver <code>true</code> 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 <code>[\"hello\", \"hey\"]</code> la función debe devolver false porque la cadena de texto \"hello\" no contiene una \"y\".",
"Finalmente, <code>[\"Alien\", \"line\"]</code>, la función debe devolver <code>true</code> porque todas las letras en \"line\" están presentes en \"Alien\".",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"translations": {
"es": {
"title": "Detector de mentiras",
"description": [
"Remueve todos los valores falsy de un arreglo dado",
"En javascript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"translations": {
"es": {
"title": "Buscar y destruir",
"description": [
"Se te proveerá un arreglo inicial (el primer argumento en la función <code>destroyer</code>), 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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"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 <code>where([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez ordenado el arreglo se verá com <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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": [
"isRequired": true,
"releasedOn": "January 1, 2016",
"translations": {
"es": {
"title": "Cifrado César",
"description": [
"Uno de los <dfn>cifrados</dfn> más simples y ampliamente conocidos es el <code>cifrado César</code>, también llamado <code>cifrado por desplazamiento</code>. En un <code>cifrado por desplazamiento</code> los significados de las letras se desplazan por una cierta cantidad.",
"Un uso moderno común es el cifrado <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' &harr; 'N', 'B' &harr; 'O' y así.",
"Crea una función que tome una cadena de texto cifrada en <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> 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 <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"releasedOn": "January 1, 2016"
]
}
}
}
]
}

888
seed/challenges/01-front-end-development-certification/basic-javascript.json
View File

File diff suppressed because it is too large Load Diff

162
seed/challenges/01-front-end-development-certification/basic-ziplines.json
View File

@ -56,47 +56,10 @@
"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\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
"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": [
"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.",
@ -135,6 +98,49 @@
]
]
},
"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\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
"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",
"title": "Build a Tribute Page",
@ -156,19 +162,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте страницу посвященную тому что вас вдохновляет",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/FreeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/FreeCodeCamp/full/NNvBQW/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
"<strong>Пользовательская история:</strong> Я могу видеть на странице изображение и текст.",
"<strong>Пользовательская история:</strong> Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.",
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Construye una página Tributo",
"descriptionEs": [
"translations": {
"es": {
"title": "Construye una página Tributo",
"description": [
"<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcionalmente sea similar a esta: <a href='https://codepen.io/FreeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/FreeCodeCamp/full/NNvBQW/</a>",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
@ -179,6 +176,21 @@
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте страницу посвященную тому что вас вдохновляет",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/FreeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/FreeCodeCamp/full/NNvBQW/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
"<strong>Пользовательская история:</strong> Я могу видеть на странице изображение и текст.",
"<strong>Пользовательская история:</strong> Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.",
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
},
{
"id": "bd7158d8c242eddfaeb5bd13",
"title": "Build a Personal Portfolio Webpage",
@ -205,24 +217,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте сайт-портфолио",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/FreeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/FreeCodeCamp/full/QNmvEL/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
"<strong>Пользовательская история:</strong> Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
"<strong>Пользовательская история:</strong> Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
"<strong>Пользовательская история:</strong> Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).",
"<strong>Пользовательская история:</strong> Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
"Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
"В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.",
"Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <code>&lt;a target='_blank'&rt;</a></code>.",
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Construye una página web para tu portafolio",
"descriptionEs": [
"translations": {
"es": {
"title": "Construye una página web para tu portafolio",
"description": [
"<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/FreeCodeCamp/full/QNmvEL/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
@ -237,6 +235,26 @@
"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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте сайт-портфолио",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/FreeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/FreeCodeCamp/full/QNmvEL/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
"<strong>Пользовательская история:</strong> Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
"<strong>Пользовательская история:</strong> Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
"<strong>Пользовательская история:</strong> Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).",
"<strong>Пользовательская история:</strong> Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
"Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
"В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.",
"Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <code>&lt;a target='_blank'&rt;</a></code>.",
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
}
]
}

497
seed/challenges/01-front-end-development-certification/bootstrap.json
View File

@ -79,8 +79,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap",
"descriptionEs": [
"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 <code>Diseño adaptativo</code> (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.",
@ -88,9 +90,11 @@
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/&#62;</code>",
"En este caso, lo hemos agregado a esta página por ti.",
"Para iniciar, debemos anidar todo nuestro HTML en un elemento <code>div</code> con la clase <code>container-fluid</code>."
],
"nameFr": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap",
"descriptionFr": [
]
},
"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 <code>Responsive Design</code> (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.",
@ -99,6 +103,8 @@
"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 <code>div</code> possédant la classe <code>container-fluid</code>"
]
}
}
},
{
"id": "bad87fee1348bd9acde08812",
@ -175,20 +181,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Haz que las imágenes sean adaptativas en dispositivos móviles",
"descriptionEs": [
"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 <code>src</code> sea <code>https://bit.ly/fcc-running-cats</code>.",
"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 <code>img-responsive</code> 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": [
]
},
"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 <code>img-responsive</code> 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 <code>src</src> en <code>https://bit.ly/fcc-running-cats</code>.",
"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 <code>img-responsive</code> à 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": [
"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 <code>text-center</code> a nuestro elemento <code>h2</code>.",
"Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:",
"<code>&#60h2 class=\"red-text text-center\"&#62your text&#60/h2&#62</code>"
],
"nameFr": "Centrer du texte avec Bootstrap",
"descriptionFr": [
]
},
"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 <code>text-center</code> à notre élément <code>h2</code>.",
"Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:",
"<code>&#60h2 class=\"red-text text-center\"&#62Votre texte&#60/h2&#62</code>"
]
}
}
},
{
"id": "bad87fee1348cd8acdf08812",
@ -350,16 +368,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea un botón con Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un botón con Bootstrap",
"description": [
"Bootstrap tiene sus propios estilos para elementos <code>button</code>, los cuales se ven mejor que los estilos simples de HTML.",
"Crea un nuevo elemento <code>button</code> debajo de tu foto grande del gatito. Dale la clase <code>btn</code> y el texto \"Like\"."
],
"nameFr": "Créer un bouton avec Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Créer un bouton avec Bootstrap",
"description": [
"Bootstrap possède ses propres styles pour les éléments <code>button</code>, qui sont beaucoup plus beaux que ceux issus du HTML seul.",
"Créez un nouvel élément <code>button</code> en dessous de votre grande photo de chaton. Donnez lui comme classe <code>btn</code> et comme texte \"Like\"."
]
}
}
},
{
"id": "bad87fee1348cd8acef08812",
@ -443,8 +467,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea un elemento botón de bloque con Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un elemento botón de bloque con Bootstrap",
"description": [
"Normalmente , los elementos de <code>button</code> con una clase de <code>btn</code> sólo son tan ancha como el texto que contienen. Por ejemplo:",
"<code>&lt;button class=\"btn\"&gt;Enviar&lt;/button&gt;</code>",
"Este botón sólo sería tan amplia como la palabra \"Enviar\"",
@ -455,9 +481,11 @@
"<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>Enviar</button>",
"Ten en cuenta que estos botones todavía necesitan la clase <code>btn</code>.",
"Agrega la clase de Bootstrap <code>btn-block</code> a tu botón Bootstrap."
],
"nameFr": "Créer un bouton bloc Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Créer un bouton bloc Bootstrap",
"description": [
"Normalement , vos éléments de <code>button</code> avec une classe de <code>btn</code> ne sont aussi larges que le texte qu'ils contiennent . Par exemple:",
"<code>&lt;button class=\"btn\"&gt;Soumettre&lt;/button&gt;</code>",
"Ce bouton ne serait plus large que le mot \"Soumettre\" .",
@ -469,6 +497,8 @@
"Notez que ces boutons ont toujours besoin de la classe <code>btn</code>",
"Ajoutez la classe Bootstrap <code>btn-block</code> à 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": [
"translations": {
"es": {
"title": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap",
"description": [
"La clase <code>btn-primary</code> 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 <code>btn-primary</code> de Bootstrap a tu botón.",
"Ten en mente que este botón todavía necesita las clases <code>btn</code> y <code>btn-block</code>."
],
"nameFr": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap",
"description": [
"La classe <code>btn-primary</code> 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 <code>btn-primary</code> à votre bouton.",
"Notez que ce bouton a toujours besoin des classes <code>btn</code> et <code>btn-block</code>"
]
}
}
},
{
"id": "bad87fee1348cd8acef08813",
@ -634,18 +670,24 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Señala acciones opcionales con botones informativos",
"descriptionEs": [
"translations": {
"es": {
"title": "Señala acciones opcionales con botones informativos",
"description": [
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-info</code> 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 <code>btn-info</code> y <code>btn-block</code>.",
"Ten en mente que estos botones todavía necesitan las clases <code>btn</code> y <code>btn-block</code>."
],
"nameFr": "Indiquez les actions optionelles avec des boutons informatifs",
"descriptionFr": [
]
},
"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 <code>btn-info</code> 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 <code>btn-info</code> et <code>btn-block</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
]
}
}
},
{
"id": "bad87fee1348ce8acef08814",
@ -724,19 +766,24 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Advierte a tus usuarios sobre acciones peligrosas",
"descriptionEs": [
"translations": {
"es": {
"title": "Advierte a tus usuarios sobre acciones peligrosas",
"description": [
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-danger</code> 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 <code>btn-danger</code>.",
"Recuerda que estos botones todavía requieren las clases <code>btn</codez> y <code>btn-block</code>."
],
"nameFr": "Prévenez vos utilisateurs d'une action dangereuse",
"descriptionFr": [
]
},
"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 <code>btn-danger</code> 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 <code>btn-danger</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
]
}
}
},
{
"id": "bad88fee1348ce8acef08815",
@ -820,8 +867,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado",
"descriptionEs": [
"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 <code>div</code>.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
"<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
@ -829,9 +878,11 @@
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Pon los botones de <code>Like</code>, <code>Info</code> y <code>Delete</code> lado a lado. Esto se hace anidando los tres botones dentro de un elemento <code>&#60;div class=\"row\"&#62;</code>, y luego cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>.",
"La clase <code>row</code> se aplica al elemento <code>div</code>, dentro del cual van anidados los botones."
],
"nameFr": "Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.",
"descriptionFr": [
]
},
"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 <code>div</code>",
"Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:",
"<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
@ -840,6 +891,8 @@
"Mettez les boutons <code>Like</code>, <code>info</code> et <code>Delete</code> côte-à-côte en les enveloppant tous dans un élément <code>&#60;div class=\"row\"&#62;</code>, puis chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"La classe <code>row</code> est donnée à un <code>div</code>, 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": [
"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 <code>.red-text</code>, <code>p</code>, y <code>.smaller-image</code> de tu elemento <code>style</code>, de forma que las únicas declaraciones que queden en tu elemento <code>style</code> sean <code>h2</code> y <code>thick-green-border</code>.",
"Luego elimina el elemento <code>p</code> que contiene un enlace nulo. Después, elimina la clase <code>red-text</code> de tu elemento <code>h2</code> y reemplázalo con la clase <code>text-primary</code> de Bootstrap.",
"Por último, elimina la clase \"smaller-image\" de tu primer elemento <code>img</code> y reemplázalo con la clase <code>img-responsive</code>."
],
"nameFr": "Remplacez le CSS personnalisé par les styles Bootstrap",
"descriptionFr": [
]
},
"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 <code>.red-text</code>, <code>p</code>, et <code>.smaller-image</code> de votre élément <code>style</code> pour que les seules déclarations restantes dans l'élément <code>style</code> soient <code>h2</code> et <code>thick-green-border</code>.",
"Ensuite supprimez l'élément <code>p</code> contenant un lien fantôme. Puis enlevez la classe <code>red-text</code> de votre élément <code>h2</code> et remplacez la par la classe Bootstrap <code>text-primary</code>",
"Enfin, enlevez la classe \"smaller-image\" dde votre premier élément <code>img</code> et remplacez le par la classe <code>img-responsive</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08845",
@ -1024,8 +1083,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa span para elementos en línea",
"descriptionEs": [
"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 <code>btn-block</code> para hacer que el botón llenara toda la línea?",
"Esta imagen ilustra la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira para llenar todo el espacio horizontal.'></a>",
@ -1033,9 +1094,11 @@
"Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.",
"Así es como lo harías con el elemento \"Top 3 things cats hate\":",
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
],
"nameFr": "Utiliser Spans pour les éléments \"Inline\"",
"descriptionFr": [
]
},
"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 <code>btn-block</code> pour remplir la rangée entière?",
"Cette image illustre la différence entre les éléments <code>inline</code> (en ligne) et les éléments <code>block-level</code> (de blocs):",
"<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour élargir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, c'est centré. En dessous il y a un bouton \"block-level\", qui s'étire à tout l'espace horizontal.'></a>",
@ -1044,6 +1107,8 @@
"Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":",
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aede08845",
@ -1122,8 +1187,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea un encabezado personalizado",
"descriptionEs": [
"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 <code>div</code>.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
@ -1132,9 +1199,11 @@
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Anida tu primera imagen y tu elemento <code>h2</code> dentro de un solo elemento <code>&#60;div class=\"row\"&#62;</code>. Anida tu texto <code>h2</code> dentro de un <code>&#60;div class=\"col-xs-8\"&#62;</code> y tu imagen en un <code>&#60;div class=\"col-xs-4\"&#62;</code> 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": [
]
},
"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 <code>div</code>.",
@ -1144,6 +1213,8 @@
"Enveloppez votre première image et votre élément <code>h2</code> dans un seul élément <code>&#60;div class=\"row\"&#62;</code>. Mettez l'élément <code>h2</code> dans un <code>&#60;div class=\"col-xs-8\"&#62;</code> et votre image dans un <code>&#60;div class=\"col-xs-4\"&#62;</code> 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,8 +1295,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Agrega iconos de Font Awesome a los botones",
"descriptionEs": [
"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 <code>.svg</code>, 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:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/&#62;</code>",
@ -1233,9 +1306,11 @@
"El elemento <code>i</code> originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento <code>i</code> para convertirlo en un ícono, por ejemplo:",
"<code>&lt;i class=\"fa fa-info-circle\"&gt;&lt;/i&gt;</code>",
"Usa Font Awesome para agregar un icono de \"pulgar arriba\" <code>thumbs-up</code> a tu botón de like dándole un elemento <code>i</code> con las clases <code>fa</code> y <code>fa-thumbs-up</code>."
],
"nameFr": "Ajouter des icônes Font Awesome à nos boutons",
"descriptionFr": [
]
},
"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 <code>.svg</code>. 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:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/&#62;</code>",
@ -1244,6 +1319,8 @@
"<code>&lt;i class=\"fa fa-info-circle\"&gt;&lt;/i&gt;</code>",
"Utilisez Font Awesome pour ajouter un icone <code>thumbs-up</code> à votre bouton de like en lui donnant un élément <code>i</code> ayant les classes <code>fa</code> et <code>fa-thumbs-up</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aedc08845",
@ -1318,16 +1395,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Agrega Font Awesome a todos los botones",
"descriptionEs": [
"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 <code>.svg</code>, 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 <code>info-circle</code> a tu botón informativo y un icono <code>trash</code> a tu botón de eliminar."
],
"nameFr": "Ajoutez des icones Font Awesome à tous nos boutons",
"descriptionFr": [
]
},
"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 <code>.svg</code>. 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 <code>info-circle</code> à votre bouton d'info et un icone <code>trash</code> à votre bouton de suppression."
]
}
}
},
{
"id": "bad87fee1348bd9aedb08845",
@ -1402,16 +1485,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea botones de opción con estilo adaptativo",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea botones de opción con estilo adaptativo",
"description": [
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> 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 <code>&#60;div class=\"row\"&#62;</code>. Luego, anida cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-6\"&#62;</code>."
],
"nameFr": "Donnez un style responsive à vos boutons radio",
"descriptionFr": [
]
},
"fr": {
"title": "Donnez un style responsive à vos boutons radio",
"description": [
"Vous pouvez utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>. 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 <code>&#60;div class=\"row\"&#62;</code>. Ensuite, nichezchacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-6\"&#62;</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aeda08845",
@ -1493,17 +1582,23 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea casillas de selección con estilo adaptativo",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea casillas de selección con estilo adaptativo",
"description": [
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> 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 <code>&#60;div class=\"row\"&#62;</code>. Luego, anida cada una de ellas en un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>."
],
"nameFr": "Donnez un style responsive à vos checkbox (cases de séléction)",
"descriptionFr": [
]
},
"fr": {
"title": "Donnez un style responsive à vos checkbox (cases de séléction)",
"description": [
"Vous pouvez aussi utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>! 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 <code>col-xs-*</code> classes on <code>form</code> 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 <code>&#60;div class=\"row\"&#62;</code>. Ensuite nichez chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aed908845",
@ -1594,16 +1689,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Estiliza cajas de texto como controles de formulario",
"descriptionEs": [
"translations": {
"es": {
"title": "Estiliza cajas de texto como controles de formulario",
"description": [
"Puedes agregar el icono <code>fa-paper-plane</code> de Font Awesome incluyendo <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> dentro de tu elemento <code>button</code> de envío.",
"Dale a la entrada de texto de tu formulario la clase <code>form-control</code>. Dale al botón de envío de tu formulario las clases <code>btn btn-primary</code>. También, incluye en ese botón el icono <code>fa-paper-plane</code> de Font Awesome."
],
"nameFr": "Donnez un style similaire au contrôles de formulaires à des zones de texte",
"descriptionFr": [
]
},
"fr": {
"title": "Donnez un style similaire au contrôles de formulaires à des zones de texte",
"description": [
"Vous pouvez ajouter l'icone Font Awesome <code>fa-paper-plane</code> en ajoutant <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> à l'intérieur de votre <code>button</code> de soumission du formulaire.",
"Donnez aux entrées texte de votre formulaire une classe <code>form-control</code>. Donnez à votre bouton de soumission de formulaire les classes <code>btn btn-primary</code>. Donnez lui aussi un icone Font Awesome <code>fa-paper-plane</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908845",
@ -1695,18 +1796,24 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Alínea elementos de formulario de forma adaptativa con Bootstrap",
"description": [
"Ahora vamos a poner el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento <code>div</code> con la clase <code>row</code>, y otros elementos <code>div</code> dentro de ese, usando la clase <code>col-xs-*</code>.",
"Anida ambos, el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario dentro de un <code>div</code> con la clase <code>row</code>. Anida el elemento <code>input</code> de tu formulario dentro de un div con cla clase <code>col-xs-7</code>. Anida el elemento <code>button</code> que dice submit de tu formulario en un elemento <code>div</code> con la clase <code>col-xs-5</code>.",
"¡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": [
]
},
"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 <code>input</code> et le <code>button</code> de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément <code>div</code> avec la classe <code>row</code>, et un un autre div à l'intérieur qui aura la classe <code>col-xs-*</code>.",
"Nichez à la fois l'<code>input</code> texte de votre formulaire et le <code>button</code> de soumission de formulaire à l'intérieur d'un <code>div</code> avec la classe <code>row</code>. Nichez l'<code>input</code> texte du formulaire dans un div ayant la classe <code>col-xs-7</code>. Nichez votre <code>button</code> de soumission de formulaire dans un div ayant la classe <code>col-xs-5</code>.",
"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": [
"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 <code>h3</code>, con el texto <code>jQuery Playground</code>.",
"Ponle color a tu elemento <code>h3</code> con la clase <code>text-primary</code> de Bootstrap, y céntrala con la clase <code>text-center</code> de Bootstrap."
],
"nameFr": "Créer un entête Bootstrap",
"descriptionFr": [
]
},
"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 <code>h3</code>, contenant le texte <code>jQuery Playground</code>.",
"Colorez notre élément <code>h3</code> avec la classe Bootstrap <code>text-primary</code>, et centrez le en utilisant la classe Bootstrap <code>text-center</code>"
]
}
}
},
{
"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": [
"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 <code>h3</code> dentro de un elemento <code>div</code> con la clase <code>container-fluid</code>."
],
"nameFr": "Loger notre page dans un conteneur Bootstrap Fluid Div",
"descriptionFr": [
]
},
"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 <code>h3</code> à l'intérieur d'un élément <code>div</code> ayant la classe <code>container-fluid</code>."
]
}
}
},
{
"id": "bad87fee1348bd9bec908846",
@ -1798,16 +1917,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea una fila en Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea una fila en Bootstrap",
"description": [
"Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.",
"Crea un elemento <code>div</code> debajo de la etiqueta <code>h3</code>, con la clase <code>row</code>."
],
"nameFr": "Créer une rangée (row) Bootstrap",
"descriptionFr": [
]
},
"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 <code>div</code> en dessous de la balise <code>h3</code>, avec une classe <code>row</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908847",
@ -1831,16 +1956,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Parte tu fila en Bootstrap",
"descriptionEs": [
"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 <code>div</code> dentro de tu fila, ambos con la clase <code>col-xs-6</code>."
],
"nameFr": "Séparer une rangée Bootstrap",
"descriptionFr": [
]
},
"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 <code>div</code>dans votre rangée, chacun ayant la classe <code>col-xs-6</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908848",
@ -1869,16 +2000,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea pozos en Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea pozos en Bootstrap",
"description": [
"Bootstrap tiene una clase llamada <code>well</code> que crea una sensación visual de profundidad para tus columnas.",
"Anida un elemento <code>div</code> con la clase <code>well</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>col-xs-6</code>."
],
"nameFr": "Créez un \"puit\" (well) Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Créez un \"puit\" (well) Bootstrap",
"description": [
"Bootstrap possède une classe appelée <code>well</code> qui peux créer une certaine profondeur pour vos colonnes.",
"Nichez un élément <code>div</code> avec la classe <code>well</code> dans chacun de vos éléments <code>col-xs-6</code> <code>div</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908849",
@ -1915,16 +2052,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Agrega elementos dentro de los pozos de Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Agrega elementos dentro de los pozos de Bootstrap",
"description": [
"Ahora estamos a una profundidad de varios elementos <code>div</code> dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos <code>button</code>.",
"Anida tres elementos <code>button</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>well</code>."
],
"nameFr": "Ajouter des éléments dans un puit Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Ajouter des éléments dans un puit Bootstrap",
"description": [
"Nous avons maintenant plusieurs niveaux de profondeur d'éléments <code>div</code> dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments <code>button</code>.",
"Nichez trois éléments <code>button</code> dans chaque élément <code>well</code> <code>div</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908850",
@ -1960,16 +2103,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Aplica el estilo de botón predeterminado de Bootstrap",
"descriptionEs": [
"translations": {
"es": {
"title": "Aplica el estilo de botón predeterminado de Bootstrap",
"description": [
"Bootstrap tiene otra clase de botón llamada <code>btn-default</code>.",
"Aplica las clases <code>btn</code> y <code>btn-default</code> a cada uno de tus elementos <code>button</code>."
],
"nameFr": "Appliquer le style de bouton par défaut de Bootstrap",
"descriptionFr": [
]
},
"fr": {
"title": "Appliquer le style de bouton par défaut de Bootstrap",
"description": [
"Bootstrap possède une autre classe de bouton appelée <code>btn-default</code>.",
"Appliquez les deux classes <code>btn</code> et <code>btn-default</code> à chacun de vos éléments <code>button</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aec908852",
@ -2004,16 +2153,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Crea una clase para usar con selectores de jQuery",
"descriptionEs": [
"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 <code>button</code> la clase <code>target</code>."
],
"nameFr": "Créez une classe à cibler avec les sélécteurs jQuery",
"descriptionFr": [
]
},
"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 <code>button</code> la classe <code>target</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908853",
@ -2053,17 +2208,21 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap",
"descriptionEs": [
"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 <code>id</code>.",
"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 <code>div</code> que tienen la clase <code>well</code>.",
"Recuerda que puedes darle a un elemento un id como el siguiente:",
"<code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un id <code>right-well</code>."
],
"nameFr": "Ajouter des attributs ID à vos éléments Bootstrap",
"descriptionFr": [
]
},
"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 <code>id</code>.",
"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 <code>div</code> de classe <code>well</code>.",
@ -2071,6 +2230,8 @@
"<code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Donnez au puit sur la gauche un id de <code>left-well</code>. Donnez au puit sur la droite un id de <code>right-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908854",
@ -2111,18 +2272,24 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Etiqueta tus pozos de Bootstrap",
"descriptionEs": [
"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 <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#left-well</code>.",
"Ahora, sobre tu pozo de la derecha, dentro de su elemento <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#right-well</code>."
],
"nameFr": "Donner un nom aux puits Bootstrap",
"descriptionFr": [
]
},
"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 <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#left-well</code>.",
"Au dessus de votre puit de droite, à l'intérieur de ses éléments <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#right-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908855",
@ -2165,18 +2332,24 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Dale a cada elemento un ID único",
"descriptionEs": [
"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 <code>target1</code> y terminando con <code>target6</code>.",
"Asegúrate que <code>target1</code> a <code>target3</code> queden en <code>#left-well</code>, mientras que <code>target4</code> a <code>target6</code> queden en <code>#right-well</code>."
],
"nameFr": "Donner à chaque élément un ID unique",
"descriptionFr": [
]
},
"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 <code>target1</code> et finissant par <code>target6</code>.",
"Assurez vous que <code>target1</code> à <code>target3</code> sont dans le <code>#left-well</code>, et que <code>target4</code> à <code>target6</code> sont dans le <code>#right-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908856",
@ -2218,16 +2391,22 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Etiqueta los botones con Bootstrap",
"descriptionEs": [
"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 <code>button</code> un texto que corresponda con su <code>id</code>."
],
"nameFr": "Donnez un nom à vos boutons Bootstrap",
"descriptionFr": [
]
},
"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 <code>button</code> un texte qui corresponde à son <code>id</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aec908857",
@ -2269,20 +2448,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa elementos para explicar tu código",
"descriptionEs": [
"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 <code>&#60;!--</code> y terminarlo usando <code>--&#62;</code>",
"Agrega un comentario al inicio de tu código HTML que diga <code>Only change code above this line.</code>"
],
"nameFr": "Utiliser des commentaires pour clarifier son code",
"descriptionFr": [
]
},
"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 <code>&#60;!--</code> et le finir avec <code>--&#62;</code>",
"Ajoutez un commentaire en haut de l'HTML qui annonce <code>Only change code above this line.</code> (Changez seulement le code au dessus de cette ligne.)"
]
}
}
}
]
}

10
seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
View File

@ -240,7 +240,10 @@
],
"type": "Waypoint",
"challengeType": 7,
"descriptionEs": [
"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",
@ -265,8 +268,9 @@
"¡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"
]
}
}
}
]
}

240
seed/challenges/01-front-end-development-certification/gear-up-for-success.json
View File

@ -31,50 +31,10 @@
"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": [
"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.",
@ -95,6 +55,54 @@
]
]
},
"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",
"title": "Watch Coding Videos on our YouTube Channel",
@ -111,26 +119,10 @@
"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": [
"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.",
@ -139,6 +131,30 @@
]
]
},
"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",
"title": "Join our LinkedIn Alumni Network",
@ -154,26 +170,10 @@
"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": [
"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.",
@ -182,6 +182,30 @@
]
]
},
"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",
"title": "Commit to a Goal and a Nonprofit",
@ -197,26 +221,10 @@
"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": [
"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.",
@ -224,6 +232,30 @@
"/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"
]
]
}
}
}
]
}

4115
seed/challenges/01-front-end-development-certification/html5-and-css.json
View File

File diff suppressed because it is too large Load Diff

336
seed/challenges/01-front-end-development-certification/intermediate-bonfires.json
View File

@ -42,18 +42,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Suma todos los números en un rango",
"descriptionEs": [
"translations": {
"es": {
"title": "Suma todos los números en un rango",
"description": [
"Te pasaremos un vector que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.",
"El número menor no siempre será el primer elemento en el vector.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Additionner tous les nombres d'une série",
"descriptionFr": [
]
},
"fr": {
"title": "Additionner tous les nombres d'une série",
"description": [
"Nous te passons un tableau de deux nombres. Crée une fonction qui renvoie la somme de ces 2 nombres ainsi que tous les nombres entre ceux-ci.",
"Le plus petit nombre ne viendra pas forcément en premier.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a5de63ebea8dbee56860f4f2",
@ -94,16 +100,22 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Obtén la diferencia entre dos vectores",
"descriptionEs": [
"translations": {
"es": {
"title": "Obtén la diferencia entre dos vectores",
"description": [
"Crea una función que compare dos vectores y que devuelva un nuevo vector que contenga los elementos que sólo se encuentre en uno de los vectores dados, pero no en ambos En otras palabras, devuelve la diferencia simétrica entre los dos vectores.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Comparer 2 arrays",
"descriptionFr": [
]
},
"fr": {
"title": "Comparer 2 arrays",
"description": [
"Compare les 2 tableaux donnés et renvoie un nouvel tableau avec les éléments trouvé dans un seul des deux tableaux, pas dans les deux. En d'autres termes, renvoie la différence symétrique des deux tableaux.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a7f4d8f2483413a6ce226cac",
@ -159,18 +171,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Convertior de números romanos",
"descriptionEs": [
"translations": {
"es": {
"title": "Convertior de números romanos",
"description": [
"Convierte el número dado en numeral romano.",
"Todos los <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">numerales romanos</a> en las respuestas deben estar en mayúsculas.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Convertir en chiffres romains",
"descriptionFr": [
]
},
"fr": {
"title": "Convertir en chiffres romains",
"description": [
"Convertis le nombre donné en chiffres romains.",
"Tous les <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">chiffres romains</a> doivent être en lettres capitales.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a8e512fbe388ac2f9198f0fa",
@ -210,18 +228,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "¿Dónde estás que no te veo?",
"descriptionEs": [
"translations": {
"es": {
"title": "¿Dónde estás que no te veo?",
"description": [
"Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función",
"Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "O Roméo! Roméo!",
"descriptionFr": [
]
},
"fr": {
"title": "O Roméo! Roméo!",
"description": [
"Écris une fonction qui parcourt un array d'objets (premier argument) et renvoie un array de tous les objects ayant les paires de nom/valeur correspondantes à l'objet donné (second argument). Chaque paire de nom et de valeur de l'objet source doit être présente dans les objects renvoyés.",
"Par exemple, si le premier argument est <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, et le second argument est <code>{ last: \"Capulet\" }</code>, tu dois renvoyer le troisième objet de l'array (premier argument), parce qu'il contient le nom et sa valeur, donnés en deuxième argument.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a0b5010f579e69b815e7c5d6",
@ -259,17 +283,21 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Buscar y reemplazar",
"descriptionEs": [
"translations": {
"es": {
"title": "Buscar y reemplazar",
"description": [
"Crea una función que busque un fragmento en una frase dada y lo reemplace por otro fragmento, devolviendo la nueva frase.",
"El primer argumento es la frase en la que se ejecutará la búsqueda y el reemplazo",
"El segundo argumento es la palabra que se va a reemplazar",
"El tercer argumento es lo que reemplazará a la palabra indicada en el segundo argumento",
"NOTA: Debes respetar mayúsculas y minúsculas de la palabra original cuando ejecutes el reemplazo. Por ejemplo, si quisieras reemplazar la palabra \"Libro\" con la palabra \"perro\", deberías insertar en vez la palabra \"Perro\"",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Cherche et remplace",
"descriptionFr": [
]
},
"fr": {
"title": "Cherche et remplace",
"description": [
"Crée une fonction qui cherche et remplace une partie de la phrase en utilisant les arguments et renvoie la nouvelle phrase.",
"Le premier argument est la phrase à modifier.",
"Le deuxième argument est le mot à remplacer (avant).",
@ -277,6 +305,8 @@
"NB: Tu dois respecter les majuscules ou miniscules du mot originel que tu remplaces. Par exemple, si tu veux remplacer le mot \"Livre\" par \"chien\", tu devras le remplacer par \"Chien\"",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "aa7697ea2477d1316795783b",
@ -315,21 +345,27 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Latín de los cerdos",
"descriptionEs": [
"translations": {
"es": {
"title": "Latín de los cerdos",
"description": [
"Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)",
"<a href=\"http://en.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".",
"Si la palabra comienza con una vocal, simplemente añade \"way\" al final.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Pig latin",
"descriptionFr": [
]
},
"fr": {
"title": "Pig latin",
"description": [
"Traduis la phrase donnée en pig latin (verlan anglais)",
"Le <a href=\"http://fr.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> prend la ou les première(s) consonne(s) d'un mot en anglais et les mets à la fin du mot accompagné par le suffixe \"ay\".",
"Si un mot commence par une voyelle ajoute \"way\" à la fin du mot.",
"Les chaînes de caractères entrées sont garanties d'être des mots anglais, en lettres minuscules.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "afd15382cdfb22c9efe8b7de",
@ -364,17 +400,21 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Emparejando bases de ADN",
"descriptionEs": [
"translations": {
"es": {
"title": "Emparejando bases de ADN",
"description": [
"A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo vector",
"<a href=\"http://es.wikipedia.org/wiki/Apareamiento_de_bases\" target=\"_blank\">Parejas de bases</a> son pares de AT y CG. Encuentra el elemento que hace falta para cada una de las letras que se te presentan.",
"Devuelve la letra que se te provee como el primer elemento en cada vector",
"Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el vector: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
"Cada letra que se te provee y su pareja deben estar contenidos en un vector, y cada uno de estos vectores debe estar contenidos en un vector.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Coupler les bases d'ADN",
"descriptionFr": [
]
},
"fr": {
"title": "Coupler les bases d'ADN",
"description": [
"Une base d'ADN a perdu sa paire. Assemble chaque paire de caractères et renvoie les résultats dans un second tableau.",
"Les <a href=\"https://fr.wikipedia.org/wiki/Paire_de_bases\" target=\"_blank\">paires de bases</a> sont des paires d'AT et CG. Associe l'élement manquant au caractère donné.",
"Renvoie le caractère donné comme premier élément de chaque tableau.",
@ -382,6 +422,8 @@
"Chaque caractère et sa paire sont couplées dans un tableau, et tous les tableaux sont groupés dans un tableau.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "af7588ade1100bde429baf20",
@ -414,18 +456,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Letras perdidas",
"descriptionEs": [
"translations": {
"es": {
"title": "Letras perdidas",
"description": [
"Crea una función que devuelva la letra que falta en el rango de letras que se le pasa",
"Si todas las letras en el rango están presentes, la función debe devolver undefined.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Lettres perdues",
"descriptionFr": [
]
},
"fr": {
"title": "Lettres perdues",
"description": [
"Crée une fonction qui renvoie la lettre manquante dans la série.",
"Si aucune lettre n'est manquante, renvoie undefined.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a77dbc43c33f39daa4429b4f",
@ -464,18 +512,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "¡Bu!",
"descriptionEs": [
"translations": {
"es": {
"title": "¡Bu!",
"description": [
"Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
"Los primitivos booleanos primitivos son: true y false",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Boo !",
"descriptionFr": [
]
},
"fr": {
"title": "Boo !",
"description": [
"Crée une fonction qui vérifie qu'une valeur est de type booléen. Renvoie true ou false.",
"Les primitives booléennes sont true ou false.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a105e963526e7de52b219be9",
@ -510,22 +564,28 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Intersección ordenada",
"descriptionEs": [
"translations": {
"es": {
"title": "Intersección ordenada",
"description": [
"Escribe una función que tome dos o más vectores y que devuelva un nuevo vector con los valores únicos en el orden de aparición de los vectores que se te pasaron",
"En otra palabras, todos los valores presentes en todos los vectores deben aparecer en el vector final en su orden original, pero sin duplicados.",
"Los valores únicos deben aparecer en el orden original, pero el vector final no necesariamente debe mostrar los elementos en orden numérico.",
"Puedes usar de referencia las pruebas de verificación si necesitas ejemplos.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Union arrangée",
"descriptionFr": [
]
},
"fr": {
"title": "Union arrangée",
"description": [
"Crée une fonction qui accepte deux tableaux ou plus et renvoie un nouvel array de valeurs uniques dans l'ordre des tableaux donnés.",
"En d'autres termes, toutes les valeurs des tableaux doivent être incluses dans l'ordre originel, sans doublon dans le tableau final.",
"Les valeurs uniques doivent être classées dans l'ordre originel, mais le tableau final ne doit pas être classé par ordre croissant.",
"Réfère toi aux test pour plus d'examples.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a6b0bb188d873cb2c8729495",
@ -562,16 +622,22 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Convierte entidades HTML",
"descriptionEs": [
"translations": {
"es": {
"title": "Convierte entidades HTML",
"description": [
"Convierte los caracteres <code>&</code>, <code>&lt;<code>, <code>&gt;<code>, <code>\"<code>' (comilla), y <code>'<code> (apóstrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Convertir les entités HTML",
"descriptionFr": [
]
},
"fr": {
"title": "Convertir les entités HTML",
"description": [
"Convertis les caractères <code>&</code>, <code>&lt;<code>, <code>&gt;<code>, <code>\"<code>' (guillemet), y <code>'<code> (apostrophe), contenus dans la chaîne de caractères en entités HTML.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a103376db3ba46b2d50db289",
@ -606,16 +672,22 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "separado-por-guiones",
"descriptionEs": [
"translations": {
"es": {
"title": "separado-por-guiones",
"description": [
"Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Trait d'union",
"descriptionFr": [
]
},
"fr": {
"title": "Trait d'union",
"description": [
"Convertis la chaîne de caractères en spinal case. Spinal case correspond au bas-de-casse-séparé-par-des-tirets.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a5229172f011153519423690",
@ -650,20 +722,26 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Suma todos los números de Fibonacci que son impares",
"descriptionEs": [
"translations": {
"es": {
"title": "Suma todos los números de Fibonacci que son impares",
"description": [
"Crea una función que devuelva la suma de todos los números impares en la secuencia de Fibonacci hasta el número que se le pasa como argumento, incluyéndolo en caso de ser un número de la secuencia.",
"Los primeros números de la secuencia son 1, 1, 2, 3, 5 y 8, y cada número siguiente es la suma de los dos números anteriores.",
"Por ejemplo, si se te pasa el número 4, la función deberá devolver 5, ya que los números impares menores que 4 son 1, 1 y 3.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Additionner tous les nombre de Fibonacci impairs",
"descriptionFr": [
]
},
"fr": {
"title": "Additionner tous les nombre de Fibonacci impairs",
"description": [
"Crée une fonction qui additionne tous les nombre de Fibonacci jusqu'au nombre donné (inclus si c'est un nombre de Fibonacci).",
"Les premiers chiffres de la séquence sont 1, 1, 2, 3, 5 y 8, et chaque nombre correspond à la somme des deux nombres précédents.",
"Par example, pour le chiffre 4, la fonction doit retourner 5, puisque les chiffres précédent 4 sont 1, 1 et 3.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a3bfc1673c0526e06d3ac698",
@ -696,20 +774,26 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Suma todos los números primos",
"descriptionEs": [
"translations": {
"es": {
"title": "Suma todos los números primos",
"description": [
"Suma todos los números primos hasta, e incluyendo, el número que se te pasa",
"Números primos son todos aquellos que sólo son divisibles entre 1 y entre sí mismos. Por ejemplo, el número 2 es primo porque solo es divisible por 1 y por 2. Por el contrario, el número 1 no es primo, ya que sólo puede dividirse por sí mismo",
"El número que se le provee a la función no puede ser primo",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Additionner tous les nombres primaires",
"descriptionFr": [
]
},
"fr": {
"title": "Additionner tous les nombres primaires",
"description": [
"Additionne tous les nombres primaires jusqu'au nombre donné (inclus).",
"Un nombre primaire est un nombre divisible que par 1 ou par lui-même (plus grand que 1). Par exemple, 2 est un nombre primaire puisqu'il n'est divisible que par 1 et 2. 1 n'est pas primaire puiqu'il n'est divisible que par lui-même.",
"Le nombre donné en argument n'est pas forcément un nombre primaire.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "ae9defd7acaf69703ab432ea",
@ -744,20 +828,26 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Mínimo común múltiplo",
"descriptionEs": [
"translations": {
"es": {
"title": "Mínimo común múltiplo",
"description": [
"En el ejercicio se te provee un vector con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.",
"Tu función debe aceptar como argumento un vector con dos números, los cuales no necesariamente estarán en orden.",
"Por ejemplo, si se te pasan los números 1 y 3, deberás encontrar el mínimo común múltiplo de 1 y 3 que es divisible por todos los números <em>entre</em> 1 y 3.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Plus petit commun multiple",
"descriptionFr": [
]
},
"fr": {
"title": "Plus petit commun multiple",
"description": [
"Cherche le plus petit commun multiple qui soit divisible par les deux nombres donnés et par les nombres de la série entre ces deux nombres.",
"La série est un tableau de deux nombres qui ne seront pas nécessairement dans l'ordre croissant.",
"Par exemple, pour 1 et 3, il faut trouver le plus petit commun multiple de 1 et 3 mais aussi des nombres <em>entre</em> 1 et 3/",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a6e40f1041b06c996f7b2406",
@ -787,16 +877,22 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Buscando la verdad",
"descriptionEs": [
"translations": {
"es": {
"title": "Buscando la verdad",
"description": [
"Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Détecteur de mensonges",
"descriptionFr": [
]
},
"fr": {
"title": "Détecteur de mensonges",
"description": [
"Crée une fonction qui parcourt un tableau (premier argument) et renvoie le premier élément du tableau qui passe le test (second argument).",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a5deed1811a43193f9f1c841",
@ -834,18 +930,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "¡Fuera de aquí!",
"descriptionEs": [
"translations": {
"es": {
"title": "¡Fuera de aquí!",
"description": [
"Toma los elementos contenidos en el vector que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.",
"Retorna el resto del vector, de lo contrario retorna un vector vacío.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Laisse tomber",
"descriptionFr": [
]
},
"fr": {
"title": "Laisse tomber",
"description": [
"Écarte les éléments du tableau (premier argument), en commençant par la gauche, jusqu'à ce la fonction (second argument) renvoie true.",
"Renvoie le reste du tableau, ou dans le cas contraire un tableau vide",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "ab306dbdcc907c7ddfc30830",
@ -877,16 +979,22 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Aplanadora",
"descriptionEs": [
"translations": {
"es": {
"title": "Aplanadora",
"description": [
"Aplana el vector anidado que se te provee. Tu función debe poder aplanar vectores de cualquier forma.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Rouleau compresseur",
"descriptionFr": [
]
},
"fr": {
"title": "Rouleau compresseur",
"description": [
"Aplatis le tableau donné. Ta fonction doit pour gérer différentes formes de tableaux.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a8d97bd4c764e91f9d2bda01",
@ -917,18 +1025,24 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Mensaje secreto",
"descriptionEs": [
"translations": {
"es": {
"title": "Mensaje secreto",
"description": [
"Haz que la función devuelva el mensaje en inglés escondido en el código binario de la cadena de texto que se le pasa.",
"La cadena de texto binaria estará separada por espacios.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Agent binaire",
"descriptionFr": [
]
},
"fr": {
"title": "Agent binaire",
"description": [
"Traduis la chaîne binaire donnée en anglais.",
"La chaîne binaire comporte des espaces.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a10d2431ad0c6a099a4b8b52",
@ -963,18 +1077,24 @@
"isRequired": true,
"type": "bonfire",
"challengeType": 5,
"titleEs": "Que todo sea verdadero",
"descriptionEs": [
"translations": {
"es": {
"title": "Que todo sea verdadero",
"description": [
"Verifica si la función en el segundo argumento devuelve true para todos los elementos de la colección en el primer argumento.",
"Recuerda que puedes accesar a las propiedades de un objeto, ya sea a través de la notación por punto o de la notación por corchete usando [].",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Tout doit être vrai",
"descriptionFr": [
]
},
"fr": {
"title": "Tout doit être vrai",
"description": [
"Vérifie que la fonction donnée (second argument) est vraie sur tous les éléments de la collection (premier argument).",
"Tu peux utiliser un point ou des [] pour accéder aux propritétés de l'objet.",
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
},
{
"id": "a97fd23d9b809dac9921074f",
@ -1012,8 +1132,10 @@
],
"isRequired": true,
"challengeType": 5,
"titleEs": "Argumentos opcionales",
"descriptionEs": [
"translations": {
"es": {
"title": "Argumentos opcionales",
"description": [
"Crea una función que sume dos argumentos. Si sólo se le pasa un argumento a la función, haz que devuelva otra función que acepte un argumento y que devuelva la suma correspondiente.",
"Por ejemplo, <code>add(2, 3)</code> debe devolver <code>5</code>, y <code>add(2)</code> debe devolver una función.",
"Al llamar esta función con un único argumento devolverá la suma:",
@ -1021,9 +1143,11 @@
"<code>sumTwoAnd(3)</code> devuelve <code>5</code>.",
"Si alguno de los argumentos no es un número válido, haz que devuelva undefined.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"titleFr": "Arguments optionnels",
"descriptionFr": [
]
},
"fr": {
"title": "Arguments optionnels",
"description": [
"Crée une fonction qui additionne deux arguments. Si un seul argument est donné, renvoie une fonction qui attend un argument et renvoie la somme.",
"Par exemple, <code>add(2, 3)</code>, doit renvoyer <code>5</code>, et <code>add(2)</code> doit renvoyer une fonction.",
"Appeler cette fonction avec un seul argument renvoie la somme:",
@ -1033,5 +1157,7 @@
"N'oublie pas d'utiliser <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
]
}
}
}
]
}

136
seed/challenges/01-front-end-development-certification/intermediate-ziplines.json
View File

@ -22,7 +22,25 @@
],
"tests": [],
"type": "zipline",
"descriptionRu": [
"isRequired": true,
"challengeType": 3,
"translations": {
"es": {
"title": "Crea una máquina de frases aleatorias",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/FreeCodeCamp/full/ONjoLe/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón que me mostrará una nueva frase aleatoria.",
"<span class='text-info'>Bonus User Story:</span> Puedo presionar un botón para twitear una frase.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте генератор случайных цитат",
"description": [
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/FreeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/FreeCodeCamp/full/ONjoLe/</a>.",
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
@ -34,21 +52,9 @@
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"descriptionEs": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/FreeCodeCamp/full/ONjoLe/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón que me mostrará una nueva frase aleatoria.",
"<span class='text-info'>Bonus User Story:</span> Puedo presionar un botón para twitear una frase.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте генератор случайных цитат",
"titleEs": "Crea una máquina de frases aleatorias"
]
}
}
},
{
"id": "bd7158d8c442eddfaeb5bd10",
@ -71,7 +77,26 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionRu": [
"isRequired": true,
"translations": {
"es": {
"title": "Muestra el clima local",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
"Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Покажите местную погоду",
"description": [
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
@ -84,22 +109,9 @@
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"descriptionEs": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
"Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleRu": "Покажите местную погоду",
"titleEs": "Muestra el clima local"
]
}
}
},
{
"id": "bd7158d8c442eddfaeb5bd19",
@ -123,7 +135,11 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"title": "Crea un buscador de Wikipedia",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/FreeCodeCamp/full/wGqEga/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
@ -138,9 +154,9 @@
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Crea un buscador de Wikipedia"
]
}
}
},
{
"id": "bd7158d8c442eddfaeb5bd1f",
@ -166,7 +182,29 @@
"tests": [],
"type": "zipline",
"challengeType": 3,
"descriptionRu": [
"isRequired": true,
"translations": {
"es": {
"title": "Usa el API JSON de Twitch.tv",
"description": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
"<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
"<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
"<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
"<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API</code>.",
"<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
"<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Используйте Twitch.tv JSON API",
"description": [
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
@ -183,25 +221,9 @@
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Read-Search-Ask</a>.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"descriptionEs": [
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
"<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
"<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
"<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
"<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API</code>.",
"<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
"<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleRu": "Используйте Twitch.tv JSON API",
"titleEs": "Usa el API JSON de Twitch.tv"
]
}
}
}
]
}

561
seed/challenges/01-front-end-development-certification/jquery.json
View File

@ -50,18 +50,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
"descriptionEs": [
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
"En primer lugar, añade un elemento de programa <code>script</code> en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin tu <code>función de documento listo</code>, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
],
"titleDe": "Lerne, wie Script Tags und Document Ready funktionieren",
"descriptionDe": [
"translations": {
"de": {
"title": "Lerne, wie Script Tags und Document Ready funktionieren",
"description": [
"Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
"Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
"Füge als erstes ein <code>script</code> Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
@ -69,9 +61,23 @@
"Füge innerhalb deines <code>script</code> Elements folgenden Code hinzu: <code>$(document).ready(function() {</code>. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines <code>script</code> Elements) mit: <code>});</code>",
"Wir werden später noch mehr über <code>Funktionen</code> lernen. Wichtig zu wissen ist, dass der Code innerhalb der <code>Funktion</code> ausgeführt wird, sobald der Browser die Seite geladen hat.",
"Das ist wichtig, denn ohne deine <code>Document Ready Funktion</code> könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
],
"titleFr" : "Apprendre comment fonctionnent les balises Script et Document Ready",
"descriptionFr": [
]
},
"es": {
"title": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
"description": [
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
"En primer lugar, añade un elemento de programa <code>script</code> en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin tu <code>función de documento listo</code>, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
"fr": {
"title": "Apprendre comment fonctionnent les balises Script et Document Ready",
"description": [
"Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
"Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
"Premièrement, ajoutez un élément <code>script</code> en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
@ -80,6 +86,8 @@
"Nous en apprendrons plus sur les <code>functions</code> plus tard. Le plus important à savoir est que le code à l'intérieur de cette <code>function</code> sera exécuté dès que le navigateur aura chargé votre page.",
"Ceci est important car sans votre <code>document ready function</code>, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
]
}
}
},
{
"id": "bad87fee1348bd9bedc08826",
@ -130,26 +138,32 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige elementos HTML usando selectores y jQuery",
"descriptionEs": [
"Ya tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego le hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"<code>$(\"button\").addClass(\"animated bounce\")</code>",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a tus elementos <code>button</code>."
],
"titleDe": "HTML-Elemente mit Selektoren durch jQuery auswählen",
"descriptionDe": [
"translations": {
"de": {
"title": "HTML-Elemente mit Selektoren durch jQuery auswählen",
"description": [
"Jetzt haben wir eine <code>Document Ready Funktion</code>.",
"Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem <code>$</code>, für gewöhnlich als <code>Dollar-Zeichen Operator</code> bezeichnet.",
"jQuery wählt oft HTML-Elemente mit einem <code>Selektor</code> aus, um dann mit diesen Elementen etwas zu machen.",
"Zum Beispiel, lasse alle deine <code>Button</code> Elemente hüpfen. Dazu musst du nur folgenden Code in deine <code>Document Ready Funktion</code> hinzufügen:",
"<code>$(\"button\").addClass(\"animated bounce\");</code>",
"Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die <code>bounce</code> Klasse von Animate.css zu deinen <code>Button</code> Elementen hinzuzufügen."
],
"titleFr": "Cibler des élements HTML par sélecteurs avec jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elige elementos HTML usando selectores y jQuery",
"description": [
"Ya tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego le hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"<code>$(\"button\").addClass(\"animated bounce\")</code>",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a tus elementos <code>button</code>."
]
},
"fr": {
"title": "Cibler des élements HTML par sélecteurs avec jQuery",
"description": [
"Nous avons maintenant un <code>document ready function</code>.",
"Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un <code>$</code>, habituellement nommé <code>opérateur dollar</code>, ou <code>bling</code>.",
"jQuery sélectionne souvent un élément HTML à l'aide d'un <code>selector</code>, puis fait quelque chose à cet élement.",
@ -158,6 +172,8 @@
"Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe <code>bounce</code> d'Animate.css à vos éléments <code>button</code>.",
"De plus, assurez-vous d'utiliser <code>$(\"button\").addClass(\"animated bounce\");</code> et non <code>$('button').addClass(\"animated bounce\");</code> car les apostrophes ne passeront pas nos tests."
]
}
}
},
{
"id": "bad87fee1348bd9aedc08826",
@ -208,18 +224,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige elementos por su clase usando jQuery",
"descriptionEs": [
"¿Viste como hicimos rebotar todos tus elementos <code>button</code>? Los seleccionamos con <code>$(\"button\")</code>, y luego les añadimos algunas clases CSS con <code>.addClass(\"animated bounce\");.</code> ",
"Acabas de usar la función <code>addClass()</code> de jQuery, que te permite añadir clases a los elementos.",
"En primer lugar, apuntemos a tus elementos <code>div</code> que tengan la clase <code>well</code> usando el selector <code>$(\".well\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un <code>.</code> antes del nombre de la clase.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>shake</code>.",
"Por ejemplo, podrías hacer que todos los elementos con la clase <code>text-primary</code> se sacudieran añadiendo lo siguiente a tu <code>función de documento listo</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
],
"titleDe": "Elemente anhand von Klassen mit jQuery auswählen",
"descriptionDe": [
"translations": {
"de": {
"title": "Elemente anhand von Klassen mit jQuery auswählen",
"description": [
"Siehst du, wie wir alle deine <code>Button</code> Elemente hüpfen haben lassen? Wir haben sie mit <code>$(\"button\")</code> ausgewählt, dann CSS-Klassen mit <code>.addClass(\"animated bounce\");</code> hinzugefügt.",
"Du hast gerade jQuery's <code>.addClass()</code> Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
"Wähle als erstes deine <code>div</code> Elemente mit der Klasse <code>well</code>, indem du den <code>$(\".well\")</code> Selektor nutzt.",
@ -227,9 +235,23 @@
"Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen.",
"Zum Beispiel könntest du alle Elemente mit der Klasse <code>text-primary</code> schütteln lassen, indem du folgendes zu deiner <code>Document Ready Funktion</code> hinzufügst:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
],
"titleFr" : "Cibler les élements par Classe avec jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elige elementos por su clase usando jQuery",
"description": [
"¿Viste como hicimos rebotar todos tus elementos <code>button</code>? Los seleccionamos con <code>$(\"button\")</code>, y luego les añadimos algunas clases CSS con <code>.addClass(\"animated bounce\");.</code> ",
"Acabas de usar la función <code>addClass()</code> de jQuery, que te permite añadir clases a los elementos.",
"En primer lugar, apuntemos a tus elementos <code>div</code> que tengan la clase <code>well</code> usando el selector <code>$(\".well\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un <code>.</code> antes del nombre de la clase.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>shake</code>.",
"Por ejemplo, podrías hacer que todos los elementos con la clase <code>text-primary</code> se sacudieran añadiendo lo siguiente a tu <code>función de documento listo</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
]
},
"fr": {
"title": "Cibler les élements par Classe avec jQuery",
"description": [
"Voyez comment nous avons fait rebondir tous nos éléments <code>button</code>? Nous les avons sélectionné avec <code>$(\"button\")</code>, puis nous leur avons ajouté des classes CSS avec <code>.addClass(\"animated bounce\");</code>.",
"Vous venez d'utiliser la fonction jQuery <code>.addClass()</code>, ce qui nous permet d'ajouter des classes aux éléments.",
"Tout d'abord, ciblons nos éléments <code>div</code> qui ont la classe <code>well</code> en utilisant le sélecteur <code>$(\".well\")</code>.",
@ -238,6 +260,8 @@
"Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe <code>text-primary</code> s'agitent en ajoutant le code suivant à votre <code>document ready function</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aeda08826",
@ -290,26 +314,32 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige elementos por ID usando jQuery",
"descriptionEs": [
"También puedes elegir un elemento por su atributo id.",
"Primero selecciona tu elemento <code>button</code> con el id <code>target3</code> mediante el uso del selector <code>$(\"#target3\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un <code>#</code> antes de la identificación.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>fadeOut</code>.",
"He aquí cómo haces que desaparezca el elemento <code>button</code> con la identificación <code>target6</code>:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
],
"titleDe": "Elemente anhand der ID mit jQuery auswählen",
"descriptionDe": [
"translations": {
"de": {
"title": "Elemente anhand der ID mit jQuery auswählen",
"description": [
"Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
"Wähle als erstes dein <code>Button</code> Element mit der ID <code>target3</code>, indem du den <code>$(\"#target3\")</code> Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - eine <code>#</code> vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>fadeOut</code> hinzuzufügen.",
"So könntest du das <code>Button</code> Element mit der ID <code>target6</code> ausblenden lassen:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
],
"titleFr" : "Cibler les éléments par ID avec jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elige elementos por ID usando jQuery",
"description": [
"También puedes elegir un elemento por su atributo id.",
"Primero selecciona tu elemento <code>button</code> con el id <code>target3</code> mediante el uso del selector <code>$(\"#target3\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un <code>#</code> antes de la identificación.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>fadeOut</code>.",
"He aquí cómo haces que desaparezca el elemento <code>button</code> con la identificación <code>target6</code>:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
]
},
"fr": {
"title": "Cibler les éléments par ID avec jQuery",
"description": [
"Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
"Premièrement, cibler votre élément <code>button</code> avec l'id <code>target3</code> en utilisant le sélecteur <code>$(\"#target\")</code>.",
"Notez que, tout comme les expressions CSS, vous ajoutez un <code>#</code> avant le nom de l'id.",
@ -317,6 +347,8 @@
"Voici comment vous pouvez faire en sorte que l'élément <code>button</code> avec l'id <code>target6</code> disparaisse en fondu:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aeda08726",
@ -368,21 +400,29 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elimina tus funciones jQuery",
"descriptionEs": [
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
],
"titleDe": "Lösche deine jQuery Funktionen",
"descriptionDe": [
"translations": {
"de": {
"title": "Lösche deine jQuery Funktionen",
"description": [
"Anfangs waren diese Animationen noch cool, jetzt sind sie aber ein wenig störend.",
"Lösche alle drei jQuery Funktionen deiner <code>Document Ready Funktion</code>, aber lasse die <code>Document Ready Funktion</code> selbst intakt."
],
"titleFr" : "Effacer vos fonctions jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elimina tus funciones jQuery",
"description": [
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
]
},
"fr": {
"title": "Effacer vos fonctions jQuery",
"description": [
"Ces animations sont sympathiques à première vue, mais maintenant elles deviennent plutôt distrayantes.",
"Effacez les trois fonctions jQuery de votre <code>document ready function</code>, mais laissez votre <code>document ready function</code> lui-même intact."
]
}
}
},
{
"id": "bad87fee1348bd9aed908626",
@ -437,32 +477,40 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige un mismo elemento con múltiples selectores jQuery",
"descriptionEs": [
"Ahora ya sabes tres formas de seleccionar elementos: por tipo <code>$(\"button\")</code>, por clase <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code> para:",
"Agregar la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agregar la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agregar la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
],
"titleDe": "Wähle das gleiche Element mit mehreren jQuery Selektoren aus",
"descriptionDe": [
"translations": {
"de": {
"title": "Wähle das gleiche Element mit mehreren jQuery Selektoren aus",
"description": [
"Bis jetzt kennst du drei verschiedene Wege um Elemente auszuwählen: mit dem Element-Typ: <code>$(\"button\")</code>, mit der Element-Klasse: <code>$(\".btn\")</code>, und der Element-ID: <code>$(\"#target1\")</code>.",
"Auch wenn es möglich ist, mehrere Klassen in einem einzigen <code>.addClass()</code> Aufruf hinzuzufügen, lass uns jetzt die Klassen in drei verschiedenen Wegen dem Element hinzufügen.",
"Nutze jeden der oben erwähnten jQuery Selektoren und die <code>addClass()</code> Funktion:",
"Füge die Klasse <code>animated</code> zu allen Elementen des Typs <code>button</code> hinzu.",
"Füge die Klasse <code>shake</code> zu allen Buttons mit der Klasse <code>.btn</code> hinzu.",
"Füge die Klasse <code>btn-primary</code> zu dem Button mit der ID <code>#target1</code> hinzu."
],
"titleFr" : "Cibler le même élément avec plusieurs sélecteurs jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elige un mismo elemento con múltiples selectores jQuery",
"description": [
"Ahora ya sabes tres formas de seleccionar elementos: por tipo <code>$(\"button\")</code>, por clase <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code> para:",
"Agregar la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agregar la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agregar la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
]
},
"fr": {
"title": "Cibler le même élément avec plusieurs sélecteurs jQuery",
"description": [
"À présent, vous connaissez trois façons de cibler les éléments: par type: <code>$(\"button\")</code>, par classe: <code>$(\".btn\")</code>, et par id <code>$(\"#target1\")</code>.",
"En utilisant <code>.addClass()</code>, ajoutez uniquement une classe à la fois au même élément, de trois façons différentes:",
"Ajoutez la classe <code>animated</code> à tous les éléments de type <code>button</code>.",
"Ajoutez la classe <code>shake</code> à tous les boutons qui ont la classe <code>.btn</code>.",
"Ajoutez la classe <code>btn-primary</code> au bouton qui a l'id <code>#target1</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed918626",
@ -514,27 +562,35 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elimina clases de un elemento con jQuery",
"descriptionEs": [
"De la misma manera que puedes agregar clases a un elemento con la función <code>addClass()</code> de jQuery, puedes eliminarlas con la función <code>removeClass()</code>.",
"He aquí cómo puedes hacerlo para un botón específico:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Vamos a quitar la clase <code>btn-default</code> de todos nuestros elementos <code>button</code>."
],
"titleDe": "Entferne Klassen von einem Element mit jQuery",
"descriptionDe": [
"translations": {
"de": {
"title": "Entferne Klassen von einem Element mit jQuery",
"description": [
"Genauso wie du Klassen mit der jQuery Funktion <code>addClass()</code> hinzufügen kannst, kannst du mit der jQuery Funktion <code>removeClass()</code> Klassen entfernen.",
"So könntest du das bei einem spezifischen Button machen:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Lass uns alle <code>btn-default</code> Klassen von unseren <code>Button</code> Elementen entfernen."
],
"titleFr" : "Supprimer des classes d'un élément avec jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Elimina clases de un elemento con jQuery",
"description": [
"De la misma manera que puedes agregar clases a un elemento con la función <code>addClass()</code> de jQuery, puedes eliminarlas con la función <code>removeClass()</code>.",
"He aquí cómo puedes hacerlo para un botón específico:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Vamos a quitar la clase <code>btn-default</code> de todos nuestros elementos <code>button</code>."
]
},
"fr": {
"title": "Supprimer des classes d'un élément avec jQuery",
"description": [
"De la même façon que vous pouvez ajouter des classes à un élément avec la fonction jQuery <code>addClass()</code>, vous pouvez les supprimer avec la fonction jQuery <code>removeClass()</code>.",
"Voici comment procéder pour un bouton spécifique:",
"<code>$(\"#target2\").removeClass(\"btn-default\");",
"Supprimons la classe <code>btn-default</code> de tous nos éléments <code>button</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed908826",
@ -589,18 +645,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Cambia el CSS de un elemento usando jQuery",
"descriptionEs": [
"También podemos cambiar el CSS de un elemento HTML directamente con jQuery.",
"jQuery tiene una función llamada <code>.css()</code> que te permite cambiar el CSS de un elemento.",
"Así es como cambiaríamos su color a azul:",
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
"Elimina tus selectores jQuery, dejando en blanco la <code>función de documento listo</code>.",
"Selecciona <code>target1</code> y cambia su color a rojo."
],
"titleDe": "Das CSS eines Elements mit jQuery ändern",
"descriptionDe": [
"translations": {
"de": {
"title": "Das CSS eines Elements mit jQuery ändern",
"description": [
"Wir können auch das CSS eines HTML-Elements mit jQuery verändern.",
"jQuery hat die Funktion <code>.css()</code>, welche dir erlaubt, das CSS eines Elements zu ändern.",
"So können wir die Farbe einer ID zu Blau ändern:",
@ -608,9 +656,23 @@
"Das ist ein wenig anders als eine normale CSS-Deklaration, weil die CSS-Eigenschaft und deren Wert in Anführungszeichen sind und durch ein Komma anstatt eines Doppelpunkts getrennt werden.",
"Lösche deine jQuery Selektoren, damit eine leere <code>Document Ready Funktion</code> übrig bleibt.",
"Wähle <code>target1</code> und ändere dessen Farbe zu Rot."
],
"titleFr" : "Changer le CSS d'un élément en utilisant jQuery",
"descriptionFr" : [
]
},
"es": {
"title": "Cambia el CSS de un elemento usando jQuery",
"description": [
"También podemos cambiar el CSS de un elemento HTML directamente con jQuery.",
"jQuery tiene una función llamada <code>.css()</code> que te permite cambiar el CSS de un elemento.",
"Así es como cambiaríamos su color a azul:",
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
"Elimina tus selectores jQuery, dejando en blanco la <code>función de documento listo</code>.",
"Selecciona <code>target1</code> y cambia su color a rojo."
]
},
"fr": {
"title": "Changer le CSS d'un élément en utilisant jQuery",
"description": [
"Nous pouvons aussi changer le CSS d'un élément HTML directement avec jQuery.",
"jQuery dispose d'une fonction appelée <code>.css()</code> qui vous permet de changer le CSS d'un élément.",
"Voici comment changer sa couleur en bleu:",
@ -619,6 +681,8 @@
"Effacez vos sélecteurs jQuery, laissant votre <code>document ready function</code> vide.",
"Sélectionnez <code>target1</code> et changez sa couleur en rouge."
]
}
}
},
{
"id": "bad87fee1348bd9aed808826",
@ -670,35 +734,32 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Desactiva un elemento usando jQuery",
"descriptionEs": [
"También puedes cambiar propiedades que no son CSS de los elementos HTML con jQuery. Por ejemplo, puedes desactivar los botones. ",
"Al deshabilitar un botón, se volverá gris y no podrá pulsarse.",
"jQuery tiene una función llamada <code>.prop()</code> que te permite ajustar las propiedades de los elementos.",
"He aquí cómo puedes desactivar todos los botones:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Desactiva sólo el botón <code>target1</code>."
],
"titleDe": "Elemente mit jQuery deaktivieren",
"descriptionDe": [
"translations": {
"de": {
"title": "Elemente mit jQuery deaktivieren",
"description": [
"Du kannst auch die nicht-CSS Eigenschaften eines HTML-Elements mit jQuery ändern. Zum Beispiel kannst du <code>Buttons</code> deaktivieren.",
"Wenn du einen <code>Button</code> deaktivierst, wird er grau unterlegt und kann nicht mehr geklickt werden.",
"jQuery hat eine Funktion namens <code>.prop()</code>, die es dir erlaubt, die Eigenschaften von Elementen anzupassen.",
"So kannst du alle <code>Buttons</code> deaktivieren:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Deaktiviere nur den <code>target1</code> Button."
],
"titleFr" : "Désactivez un élément en utilisant jQuery",
"descriptionFr" : [
"Vous pouvez également changer les propriétés non-CSS des éléments HTML avec jQuery. Par exemple, vous pouvez désactiver les boutons.",
"Lorsque vous désactivez un bouton, il devient gris et on ne peut plus cliquer dessus.",
"jQuery dispose d'une fonction appelée <code>.prop()</code> qui vous permet de modifier les propriétés des éléments.",
"Voici comment vous pouvez désactiver tous les boutons:",
]
},
"es": {
"title": "Desactiva un elemento usando jQuery",
"description": [
"También puedes cambiar propiedades que no son CSS de los elementos HTML con jQuery. Por ejemplo, puedes desactivar los botones. ",
"Al deshabilitar un botón, se volverá gris y no podrá pulsarse.",
"jQuery tiene una función llamada <code>.prop()</code> que te permite ajustar las propiedades de los elementos.",
"He aquí cómo puedes desactivar todos los botones:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Désactivez uniquement le bouton <code>target1</code>"
],
"titleFr" : "Changer le texte à l'intérieur d'un élément en utilisant jQuery",
"descriptionFr" : [
"Desactiva sólo el botón <code>target1</code>."
]
},
"fr": {
"title": "Changer le texte à l'intérieur d'un élément en utilisant jQuery",
"description": [
"En utilisant jQuery, vous pouvez changer le texte entre les balises ouvrante et fermante d'un élément. Vous pouvez même changer les balises HTML.",
"jQuery dispose d'une fonction appelée <code>.html()</code> qui vous permet d'ajouter des balises HTML et du texte à l'intérieur d'un élément. Tout le contenu de l'élément sera alors remplacé par le contenu que vous indiquerez en utilisant la fonction.",
"Voici comment vous pourriez ré-écrire et mettre en italique le texte de notre titre:",
@ -706,6 +767,8 @@
"jQuery dispose également d'une fonction similaire appelée <code>.text()</code> qui change uniquement le texte sans ajouter de balises. Autrement dit, cette fonction n'évaluera aucune balise HTML que vous lui donnez, mais les traitera comme du texte que vous désirez ajouter à votre élément.",
"Changez le bouton avec l'id <code>target4</code> en mettant en italique son texte."
]
}
}
},
{
"id": "564944c91be2204b269d51e3",
@ -760,17 +823,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Cambia el texto de un elemento usando jQuery",
"descriptionEs": [
"Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.",
"jQuery tiene una función llamada <code>.html()</code> que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.",
"He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:",
"<code>$(\"h3\").html(\"&#60;i&#62;jQuery Playground&#60;/i&#62;\");</code>",
"jQuery también tiene una función similar llamada <code>.text()</code> que sólo altera el texto sin añadir etiquetas.",
"Cambia el botón con identificación <code>target4</code> de forma que su texto quede en itálicas."
],
"titleDe": "Ändere den Text innerhalb eines Elements mit jQuery",
"descriptionDe": [
"translations": {
"de": {
"title": "Ändere den Text innerhalb eines Elements mit jQuery",
"description": [
"Mit jQuery kannst du den Text zwischen dem Start- und dem End-Tag eines Elements ändern. Du kannst sogar das HTML-Markup ändern.",
"jQuery hat eine Funktion namens <code>.html()</code>, die dich HTML-Tags und Text innerhalb eines Elements hinzufügen lässt. Jeglicher Content der sich vorher innerhalb des Elements befand, wird mit jenem Content ersetzt, den du durch diese Funktion bereitstellst.",
"So kannst du den Text unserer Überschrift überschreiben und hervorheben:",
@ -779,6 +835,19 @@
"Ändere den Button mit der ID <code>target4</code> indem du seinen Text hervorhebst."
]
},
"es": {
"title": "Cambia el texto de un elemento usando jQuery",
"description": [
"Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.",
"jQuery tiene una función llamada <code>.html()</code> que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.",
"He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:",
"<code>$(\"h3\").html(\"&#60;i&#62;jQuery Playground&#60;/i&#62;\");</code>",
"jQuery también tiene una función similar llamada <code>.text()</code> que sólo altera el texto sin añadir etiquetas.",
"Cambia el botón con identificación <code>target4</code> de forma que su texto quede en itálicas."
]
}
}
},
{
"id": "bad87fee1348bd9aed708826",
"title": "Remove an Element Using jQuery",
@ -826,19 +895,25 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elimina un elemento usando jQuery",
"descriptionEs": [
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
"jQuery tiene una función llamada <code>.remove()</code> que eliminará un elemento HTML por completo",
"Elimina el elemento con identificación <code>target4</code> de la página utilizando la función <code>.remove()</code>."
],
"titleDe": "Entferne ein Element mit jQuery",
"descriptionDe": [
"translations": {
"de": {
"title": "Entferne ein Element mit jQuery",
"description": [
"Lass uns jetzt ein HTML-Element mit jQuery von deiner Seite entfernen.",
"jQuery hat eine Funktion namens <code>.remove()</code>, die ein HTML-Element komplett entfernt.",
"Entferne das Element <code>target4</code> von der Seite, indem du die <code>.remove()</code> Funktion nutzt."
]
},
"es": {
"title": "Elimina un elemento usando jQuery",
"description": [
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
"jQuery tiene una función llamada <code>.remove()</code> que eliminará un elemento HTML por completo",
"Elimina el elemento con identificación <code>target4</code> de la página utilizando la función <code>.remove()</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed608826",
"title": "Use appendTo to Move Elements with jQuery",
@ -890,16 +965,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa appendTo para mover elementos con jQuery",
"descriptionEs": [
"Ahora intentemos mover elementos de un <code>div</code> a otro.",
"jQuery tiene una función llamada <code>appendTo()</code> que te permite seleccionar elementos HTML y anexarlos a otro elemento.",
"Por ejemplo, si quisiéramos mover <code>target4</code> de nuestro pozo (<em>well</em>) derecho a nuestro pozo izquierdo, usaríamos:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Mueve tu elemento <code>target2</code> de tu <code>left-well</code> a tu <code>right-well</code>."
],
"titleDe": "Verwende appendTo um Elemente mit jQuery zu verschieben.",
"descriptionDe": [
"translations": {
"de": {
"title": "Verwende appendTo um Elemente mit jQuery zu verschieben.",
"description": [
"Lass uns jetzt versuchen, ein Element von einem <code>div</code> zum Nächsten zu verschieben.",
"jQuery hat eine Funktion namens <code>appendTo()</code>, die es dir erlaubt HTML-Elemente auszuwählen und diese zu einem anderen Element anzuhängen.",
"Wenn wir zum Beispiel <code>target4</code> von <code>right-well</code> zu <code>left-well</code> verschieben wollen, würden wir folgenden Code nutzen:",
@ -907,6 +976,18 @@
"Verschiebe dein <code>target2</code> Element von <code>left-well</code> zu <code>right-well</code>."
]
},
"es": {
"title": "Usa appendTo para mover elementos con jQuery",
"description": [
"Ahora intentemos mover elementos de un <code>div</code> a otro.",
"jQuery tiene una función llamada <code>appendTo()</code> que te permite seleccionar elementos HTML y anexarlos a otro elemento.",
"Por ejemplo, si quisiéramos mover <code>target4</code> de nuestro pozo (<em>well</em>) derecho a nuestro pozo izquierdo, usaríamos:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Mueve tu elemento <code>target2</code> de tu <code>left-well</code> a tu <code>right-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed508826",
"title": "Clone an Element Using jQuery",
@ -960,17 +1041,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Clona un elemento usando jQuery",
"descriptionEs": [
"Además de mover elementos, puedes copiarlos de un sitio a otro.",
"jQuery tiene una función llamada <code>clone()</code> que hace una copia de un elemento.",
"Por ejemplo, si quisiéramos copiar <code>target2</code> de nuestro <code>left-well</code> a nuestro <code>right-well</code>, usaríamos:",
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como <code>encadenamiento</code> y es una manera conveniente de hacer las cosas con jQuery. ",
"Clona tu elemento <code>target5</code> y añadelo a tu <code>left-well</code>."
],
"titleDe": "Ein Element kopieren mit jQuery",
"descriptionDe": [
"translations": {
"de": {
"title": "Ein Element kopieren mit jQuery",
"description": [
"Neben der Möglichkeit Elemente zu verschieben, können diese auch von einem Platz zum nächsten kopiert werden.",
"jQuery hat eine Funktion namens <code>clone()</code>, die eine Kopie eines Elements anfertigt.",
"Wenn wir zum Beispiel <code>target2</code> von <code>left-well</code> zu <code>right-well</code> kopieren wollen, würden wir folgenden Code nutzen:",
@ -979,6 +1053,19 @@
"Kopiere dein <code>target5</code> Element und verschiebe es zu <code>left-well</code>."
]
},
"es": {
"title": "Clona un elemento usando jQuery",
"description": [
"Además de mover elementos, puedes copiarlos de un sitio a otro.",
"jQuery tiene una función llamada <code>clone()</code> que hace una copia de un elemento.",
"Por ejemplo, si quisiéramos copiar <code>target2</code> de nuestro <code>left-well</code> a nuestro <code>right-well</code>, usaríamos:",
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como <code>encadenamiento</code> y es una manera conveniente de hacer las cosas con jQuery. ",
"Clona tu elemento <code>target5</code> y añadelo a tu <code>left-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed308826",
"title": "Target the Parent of an Element Using jQuery",
@ -1036,17 +1123,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige el padre de un elemento usando jQuery",
"descriptionEs": [
"Cada elemento HTML tiene un elemento <code>padre</code> del cual <code>hereda</code> propiedades.",
"Por ejemplo, tu elemento <code>h3</code> <code>jQuery Playground</code> tiene el elemento padre <code>&#60;div class=\"container-fluid\"&#62</code>, que a su vez tiene el padre <code>body</code>. ",
"jQuery tiene una función llamada <code>parent()</code> que te permite acceder al padre de cualquier elemento que haya seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>parent()</code> si quisieras darle al elemento padre del elemento <code>left-well</code> un color de fondo azul:",
"<code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
"Dale al padre del elemento <code>#target1</code> un color de fondo (<code>background-color</code>) rojo."
],
"titleDe": "Wähle das Eltern-Element mit jQuery aus",
"descriptionDe": [
"translations": {
"de": {
"title": "Wähle das Eltern-Element mit jQuery aus",
"description": [
"Jedes HTML-Element hat ein <code>Eltern-Element</code>, von dem es Eigenschaften <code>erbt</code>.",
"Dein <code>jQuery Playground</code> <code>h3</code> Element hat zum Beispiel das Eltern-Element <code>&#60;div class=\"container-fluid\"&#62</code>, welches das <code>body</code> Element als Eltern-Element hat.",
"jQuery hat eine Funktion namens <code>parent()</code>, die es dir erlaubt auf die Eltern-Elemente eines von dir ausgewählten Elements zuzugreifen.",
@ -1055,6 +1135,19 @@
"Gib dem Eltern-Element des <code>#target1</code> Elements eine rote Hintergrundfarbe."
]
},
"es": {
"title": "Elige el padre de un elemento usando jQuery",
"description": [
"Cada elemento HTML tiene un elemento <code>padre</code> del cual <code>hereda</code> propiedades.",
"Por ejemplo, tu elemento <code>h3</code> <code>jQuery Playground</code> tiene el elemento padre <code>&#60;div class=\"container-fluid\"&#62</code>, que a su vez tiene el padre <code>body</code>. ",
"jQuery tiene una función llamada <code>parent()</code> que te permite acceder al padre de cualquier elemento que haya seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>parent()</code> si quisieras darle al elemento padre del elemento <code>left-well</code> un color de fondo azul:",
"<code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
"Dale al padre del elemento <code>#target1</code> un color de fondo (<code>background-color</code>) rojo."
]
}
}
},
{
"id": "bad87fee1348bd9aed208826",
"title": "Target the Children of an Element Using jQuery",
@ -1110,17 +1203,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige los hjos de un elemento usando jQuery",
"descriptionEs": [
"Muchos elementos HTML tienen <code>hijos</code>, los cuales <code>heredan</code> sus propiedades de sus elementos padres",
"Por ejemplo, cada elemento HTML es un hijo de tu elemento <code>body</code>, y tu elemento <code>h3</code> \"jQuery Playground\" es un hijo de tu elemento <code>&#60;div class=\"container-fluid\"&#62</code>.",
"jQuery tiene una función llamada <code>children()</code> que te permite acceder a los hijos de cualquier elemento que hayas seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>children()</code> para darle a los hijos de tu elemento <code>left-well</code> el color azul:",
"<code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
"Da a todos los hijos de tu elemento <code>right-well</code> el color naranja."
],
"titleDe": "Wähle Kinder-Elemente mit jQuery aus",
"descriptionDe": [
"translations": {
"de": {
"title": "Wähle Kinder-Elemente mit jQuery aus",
"description": [
"Viele HTML-Elemente haben <code>Kinder-Elemente</code>, die ihre Eigenschaften von ihren Eltern-Elementen <code>erben</code>.",
"Zum Beispiel ist jedes HTML-Element ein Kind-Element des <code>body</code> Elements und dein <code>\"jQuery Playground\"</code> <code>h3</code> Element ist ein Kind-Element deines <code>&#60;div class=\"container-fluid\"&#62</code> Elements.",
"jQuery hat eine Funktion namens <code>children()</code>, die es dir erlaubt, auf die Kinder-Elemente des von dir ausgewählten Elements zuzugreifen.",
@ -1129,6 +1215,19 @@
"Gib allen Kinder-Elementen von <code>#right-well</code> die Farbe Orange."
]
},
"es": {
"title": "Elige los hjos de un elemento usando jQuery",
"description": [
"Muchos elementos HTML tienen <code>hijos</code>, los cuales <code>heredan</code> sus propiedades de sus elementos padres",
"Por ejemplo, cada elemento HTML es un hijo de tu elemento <code>body</code>, y tu elemento <code>h3</code> \"jQuery Playground\" es un hijo de tu elemento <code>&#60;div class=\"container-fluid\"&#62</code>.",
"jQuery tiene una función llamada <code>children()</code> que te permite acceder a los hijos de cualquier elemento que hayas seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>children()</code> para darle a los hijos de tu elemento <code>left-well</code> el color azul:",
"<code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
"Da a todos los hijos de tu elemento <code>right-well</code> el color naranja."
]
}
}
},
{
"id": "bad87fee1348bd9aed108826",
"title": "Target a Specific Child of an Element Using jQuery",
@ -1185,17 +1284,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige un hijo específico de un elemento usando jQuery",
"descriptionEs": [
"Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ",
"Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> te permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puedes usar un elemento",
"He aquí cómo le asignarás la clase <code>bounce</code> al tercer elemento de cada pozo:",
"<code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>",
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase <code>target</code>."
],
"titleDe": "Wähle ein spezifisches Kinder-Element mit jQuery aus",
"descriptionDe": [
"translations": {
"de": {
"title": "Wähle ein spezifisches Kinder-Element mit jQuery aus",
"description": [
"Du hast gesehen, warum ID-Attribute so praktisch sind, um Elemente mit jQuery Selektoren auszuwählen. Leider hast du aber nicht immer so praktische IDs, mit denen du arbeiten kannst.",
"Zum Glück hat jQuery einige Tricks auf Lager, um die richtigen Elemente auszuwählen.",
"jQuery nutzt CSS-Selektoren um Elemente auszuwählen. Der <code>target:nth-child(n)</code> CSS-Selektor erlaubt dir das n-te Element aus einer Zielklasse oder Element-Typ zu wählen.",
@ -1204,6 +1296,19 @@
"Lasse das zweite Kind-Element jeder Vertiefung hüpfen. Dazu musst das Kind-Element mit der <code>target</code> Klasse auswählen."
]
},
"es": {
"title": "Elige un hijo específico de un elemento usando jQuery",
"description": [
"Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ",
"Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> te permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puedes usar un elemento",
"He aquí cómo le asignarás la clase <code>bounce</code> al tercer elemento de cada pozo:",
"<code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>",
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase <code>target</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed008826",
"title": "Target Even Numbered Elements Using jQuery",
@ -1261,15 +1366,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Elige elementos con numeración par usando jQuery",
"descriptionEs": [
"También puedes elegir todos los elementos con numeración par.",
"He aquí cómo elegirías todos los elementos impares con clase <code>target</code> y como les agregarías unas clases:",
"<code>$(\".target:odd\").addClass(\"animated shake\");</code>",
"Intenta seleccionar todos los elementos de número par y agrégales las clases <code>animated</code> y <code>shake</code>."
],
"titleDe": "Wähle gerade Zahlen mit jQuery aus",
"descriptionDe": [
"translations": {
"de": {
"title": "Wähle gerade Zahlen mit jQuery aus",
"description": [
"Du kannst auch alle geradzahligen Elemente auswählen.",
"Hier siehst du, wie du ungeradzahlige Elemente mit der Klasse <code>target</code> auswählen und ihnen folgende Klassen geben kannst:",
"<code>$(\".target:odd\").addClass(\"animated shake\");</code>",
@ -1277,6 +1377,17 @@
"Versuche alle geradzahligen Elemente auszuwählen und ihnen die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen."
]
},
"es": {
"title": "Elige elementos con numeración par usando jQuery",
"description": [
"También puedes elegir todos los elementos con numeración par.",
"He aquí cómo elegirías todos los elementos impares con clase <code>target</code> y como les agregarías unas clases:",
"<code>$(\".target:odd\").addClass(\"animated shake\");</code>",
"Intenta seleccionar todos los elementos de número par y agrégales las clases <code>animated</code> y <code>shake</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aecb08826",
"title": "Use jQuery to Modify the Entire Page",
@ -1332,20 +1443,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Usa jQuery para modificar la página entera",
"descriptionEs": [
"Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!",
"jQuery también puede elegir el elemento <code>body</code>.",
"Así es como haríamos que el cuerpo entero desapareciera: <code>$(\"body\").addClass('animated fadeOut');</code>",
"Pero vamos a hacer algo más dramático. Añade las clases <code>animated</code> y <code>hinge</code> a tu elemento <code>body</code>."
],
"titleDe": "Mit jQuery die gesamte Seite modifizieren",
"descriptionDe": [
"translations": {
"de": {
"title": "Mit jQuery die gesamte Seite modifizieren",
"description": [
"Genug mit unserem jQuery Spielplatz herumgespielt. Reißen wir ihn ein!",
"jQuery kann auch das <code>body</code> Element auswählen.",
"Hier siehst du, wie wir den gesamten <code>body</code> Bereich ausblenden können: <code> $(\"body\").addClass(\"animated fadeOut\");</code>",
"Aber lass uns noch etwas Dramatischeres machen. Füge die Klassen <code>animated</code> und <code>hinge</code> zu deinem <code>body</code> Element hinzu."
]
},
"es": {
"title": "Usa jQuery para modificar la página entera",
"description": [
"Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!",
"jQuery también puede elegir el elemento <code>body</code>.",
"Así es como haríamos que el cuerpo entero desapareciera: <code>$(\"body\").addClass('animated fadeOut');</code>",
"Pero vamos a hacer algo más dramático. Añade las clases <code>animated</code> y <code>hinge</code> a tu elemento <code>body</code>."
]
}
}
}
]
}

112
seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
View File

@ -49,17 +49,21 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Activa eventos de pulsación con jQuery",
"descriptionEs": [
"translations": {
"es": {
"title": "Activa eventos de pulsación con jQuery",
"description": [
"En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.",
"También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.",
"En primer lugar, vamos a revisar lo que hace la función <code>$(document).ready()</code>. Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.",
"Hagamos que nuestro botón \"Get message\" cambie el texto del elemento con clase <code>message</code>.",
"Antes de poder hacer esto, tenemos que implementar un <code>evento de pulsación</code> dentro de nuestra función <code>$(document).ready()</code>, añadiendo este código:",
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
],
"titlePt": "Ativando eventos de clique com jQuery",
"descriptionPt": [
]
},
"pt": {
"title": "Ativando eventos de clique com jQuery",
"description": [
"Nesta sessão, vamos aprender como obter dados de uma API. As APIS - Interface de Programação de Aplicativos - são ferramentas usadas pelos computadores para se comunicarem entre si.",
"Também aprenderemos como utilizar o HTML com os dados obtidos de uma API usando uma tecnologia chamada Ajax",
"Em primeiro lugar, vamos revir o que faz a função <code>$(document).ready()</code>. Esta função faz com que todo o codigo que esteja dentro de seu escopo execute somente quando a nossa página tenha sido carregada.",
@ -67,6 +71,8 @@
"Antes de poder fazer isso, temos que implementar um <code>evento de clique</code> dentro da nossa função <code>$(document).ready()</code>, adicionando este código:",
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392d5",
@ -112,20 +118,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Cambia texto con eventos de pulsación",
"descriptionEs": [
"translations": {
"es": {
"title": "Cambia texto con eventos de pulsación",
"description": [
"Cuando nuestro evento de pulsación ocurre, podemos utilizar jQuery para actualizar un elemento HTML.",
"Hagamos que cuando un usuario pulse el botón \"Get Message\", el texto del elemento con la clase <code>message</code> cambie para decir \"Here is the message\".",
"Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:",
"<code>$(\".message\").html(\"Here is the message\");</code>"
],
"titlePt": "Mundando texto com eventos de clique",
"descriptionPt": [
]
},
"pt": {
"title": "Mundando texto com eventos de clique",
"description": [
"Quando nosso evento de clique ocorre, podemos utilizar o jQuery para atualixar um elemento HTML",
"Vamos fazer que quando um usuário clicar no botão \"Get Message\", o texto do elemento com a classe <code>message</code> passe a dizer \"Here is the message\".",
"Podemos fazer isso adicionando o seguinte código dentro do nosso evento de clique:",
"<code>$(\".message\").html(\"Here is the message\");</code>"
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392d6",
@ -183,8 +195,10 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Obtén JSON con el método getJSON de jQuery",
"descriptionEs": [
"translations": {
"es": {
"title": "Obtén JSON con el método getJSON de jQuery",
"description": [
"También puedes solicitar los datos de una fuente externa. Aquí es donde entran en juego las API. ",
"Recuerda que las API - o interfaces de programación de aplicaciones - son herramientas que utilizan los ordenadores para comunicarse entre sí.",
"La mayoría de las API para el web transfieren datos en un formato llamado JSON. JSON significa notación de objeto JavaScript (<em>JavaScript Object Notation</em>).",
@ -194,9 +208,11 @@
"Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:",
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
"Una vez lo añadas, pulsa el botón \"Get Message\". Tu función Ajax sustituirá el texto \"The message will go here\" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp."
],
"titlePt": "Obter um JSON com o método getJSON do jQuery",
"descriptionPt": [
]
},
"pt": {
"title": "Obter um JSON com o método getJSON do jQuery",
"description": [
"Também é possivel solicitar os dados de uma fonte externa. É aqui onde as API's entram em jogo.",
"Lembre que as API's - Interface de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicar entre si.",
"A maioria das API's transferem de dados para web em um formato chamado JSON. JSON significa notação de objeto JavaScript (<em>JavaScript Object Notation</em>).",
@ -207,6 +223,8 @@
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
"Uma vez adicionadas, aperte o botão \"Get Message\". Sua função Ajax substituirá o texto \"The message will go here\" com a saída bruta do JSON da API de gatos do Free Code Camp."
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392d7",
@ -263,17 +281,21 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Convierte datos JSON a datos HTML",
"descriptionEs": [
"translations": {
"es": {
"title": "Convierte datos JSON a datos HTML",
"description": [
"Ahora que estamos obteniendo datos de una API JSON, mostremóslos en nuestro HTML.",
"Podemos usar el método <code>.forEach()</code> para recorrer nuestros datos y modificar nuestros elementos HTML.",
"En primer lugar, vamos a declarar una variable llamada <code>html</code> con <code>var html = \"\";</code>.",
"Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ",
"Aquí está el código que hace esto:",
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"&lt;div class = 'cat'&gt;\";</br> keys.forEach(function(key) {</br> html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br> });</br> html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>"
],
"titlePt": "Converter dados JSON para HTML",
"descriptionPt": [
]
},
"pt": {
"title": "Converter dados JSON para HTML",
"description": [
"Agora que estamos obtendo os dados de uma API JSON, vamos mostra-los em nosso HTML",
"Podemos usar o método <code>.forEach()</code> para percorrer os nossos dados e modificar o elementos HTML.",
"Em primeiro lugar, vamos declarar uma variável chamada <code>html</code> com <code>var html = \"\";</code>.",
@ -281,6 +303,8 @@
"Aqui está o código que faz isso:",
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"&lt;div class = 'cat'&gt;\";</br> keys.forEach(function(key) {</br> html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br> });</br> html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>"
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392d8",
@ -344,20 +368,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Presenta imágenes de fuentes de datos",
"descriptionEs": [
"translations": {
"es": {
"title": "Presenta imágenes de fuentes de datos",
"description": [
"Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave <code>imageLink</code> con un valor que corresponde a la URL de la imagen de un gato.",
"Cuando estamos recorriendo estos objetos, usemos esta propiedad <code>imageLink</code> para visualizar la imagen en un elemento <code>img</code>.",
"Aquí está el código que hace esto:",
"<code>html += \"&lt;img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>"
],
"titlePt": "Apresentar as imagens da fonte de dados",
"descriptionPt": [
]
},
"pt": {
"title": "Apresentar as imagens da fonte de dados",
"description": [
"Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave <code>imageLink</code> com um valor que corresponde a URL da imagem de um gato.",
"Quando estamos percorrendo por estes objetos, usamos a propriedade <code>imageLink</code> para visualizar a imagem em um elemento <code>img</code>.",
"Aqui está o código para fazer isso:",
"<code>html += \"&lt;img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>"
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392d9",
@ -423,20 +453,26 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Pre-filtra JSON",
"descriptionEs": [
"translations": {
"es": {
"title": "Pre-filtra JSON",
"description": [
"Si no queremos presentar cada foto de gato que obtengamos de la API JSON de fotos de gato de Free Code Camp, podemos pre-filtrar el json antes de iterar a través de este.",
"Vamos a filtrar el gato cuya llave \"id\" tiene un valor de 1.",
"Aquí está el código para hacer esto:",
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
],
"titlePt": "Pré-filtro JSON",
"descriptionPt": [
]
},
"pt": {
"title": "Pré-filtro JSON",
"description": [
"Se não queremos apresentar cada foto de gato que obtemos da API JSON de fotos de gatos do Free Code Camp, podemos realizar um pré-filtro o JSON antes de iterar através dele.",
"Vamos filtrar o gato cuja a chave \"id\" tenha o valor 1.",
"Aqui está o código para fazer isso:",
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
]
}
}
},
{
"id": "56bbb991ad1ed5201cd392da",
@ -471,17 +507,21 @@
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Recibir datos de Geo-localización",
"descriptionEs": [
"translations": {
"es": {
"title": "Recibir datos de Geo-localización",
"description": [
"Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ",
"El navegador puede obtener la longitud y latitud actual de nuestros usuarios.",
"Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ",
"Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud",
"Aquí hay un código que hace esto:",
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
],
"titlePt": "Receber dados de Geo-localização",
"descriptionPt": [
]
},
"pt": {
"title": "Receber dados de Geo-localização",
"description": [
"Outra coisa interessante que podemos fazer é acessar a atual localização do nosso usuário. Todos os navegadores tem implementado um geo-localizador que pode nos fornecer essa informação.",
"O navegador pode obter a longitude e latitude atual de nossos usuários",
"Você irá ver uma janela para bloquear ou permitir que o site possa conhecer a nossa localização atual. O desafio será completado de qualquer maneira, sempre que o código estará correto.",
@ -490,5 +530,7 @@
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
]
}
}
}
]
}

104
seed/challenges/01-front-end-development-certification/object-oriented-and-functional-programming.json
View File

@ -46,11 +46,15 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Declara objetos de JavaScript como variables",
"descriptionEs": [
"translations": {
"es": {
"title": "Declara objetos de JavaScript como variables",
"description": [
"Antes de sumergirnos en Programación Orientada a Objetos, vamos a revisar los objetos de JavaScript.",
"Dale a tu objeto <code>motorBike</code> un atributo <code>wheels</code>, otro llamado <code>motors</code> y otro <code>seats</code> y asignales números."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb2bdef",
@ -92,8 +96,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Construye objetos de JavaScript con funciones",
"descriptionEs": [
"translations": {
"es": {
"title": "Construye objetos de JavaScript con funciones",
"description": [
"También podemos crear objetos utilizando funciones <code>constructoras</code>.",
"A cada función <code>constructora</code> se le da un nombre comenzando en mayúsculas para que quede claro que es una <code>constructora</code>.",
"He aquí un ejemplo de una función <code>constructora</code>:",
@ -108,6 +114,8 @@
"Puedes pensar en una <code>constructora</code> como una descripción del objeto que crea.",
"Haz que tu <code>constructora</code> <code>MotorBike</code> describa un objeto con las propiedades <code>wheels</code>,<code>engines</code> and <code>seats</code> y asignales números."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb4bdef",
@ -150,8 +158,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Crea instancias de objetos con funciones constructoras",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea instancias de objetos con funciones constructoras",
"description": [
"¡Ahora usemos esa gran <code>constructora</code> que hicimos en la última lección!",
"Para utilizar una función <code>constructora</code> la llamamos con la palabra reservada <code>new</code> al frente, como:",
"<code>var miCarro = new Carro();</code>",
@ -168,6 +178,8 @@
"En el editor, utiliza la <code>constructora</code> <code>Car</code> para crear una nueva <code>instancia</code> y asignala a <code>myCar</code>.",
"A continuación, dale a <code>myCar</code> una propiedad <code>nickname</code> con un valor tipo cadena."
]
}
}
},
{
"id": "563cfb55594311ffcb333c70",
@ -208,8 +220,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Crea objetos únicos pasando parámetros a la constructora",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea objetos únicos pasando parámetros a la constructora",
"description": [
"La <code>constructora</code> que tenemos es fabulosa, pero ¿qué hacer si no queremos crear siempre el mismo objeto?",
"Para solucionar esto podemos añadir<code>parámetros</code>en nuestra <code>constructora</code>. Hacemos esto como en el siguiente ejemplo: ",
"<code>var Carro = function (ruedas, asientos, motores) {</code>",
@ -228,6 +242,8 @@
"¡Ahora date una oportunidad a ti mismo! Modifica la <code>constructora</code> <code>Car</code> para que use <code>parámetros</code> que permitan asignar valores para las propiedades <code>wheels</code>, <code>seats</code>, y <code>engines</code>. ",
"Entonces llama a tu nueva <code>constructora</code> con tres <code>argumentos</code> numéricos y asígnala a <code>myCar</code>para verla en acción."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb3bdef",
@ -288,8 +304,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Crea propiedades privadas de un objeto",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea propiedades privadas de un objeto",
"description": [
"Los objetos tienen sus propios atributos, llamados <code>propiedades</code>, y sus propias funciones, llamadas<code>métodos</code>.",
"En los desafíos anteriores, se utilizó la palabra reservada <code>this</code> para referenciar <code>propiedades públicas</code>del objeto actual.",
"También podemos crear <code>propiedades privadas</code> y <code>métodos privados</code>, que no son accesibles desde fuera del objeto.",
@ -299,6 +317,8 @@
"En el editor se puede ver un ejemplo de una <code>constructora</code> de <code>Car</code> que implementa este patrón.",
"¡Ahora pruébalo tú mismo! Modifica la <code>constructora</code> <code>Bike</code> para tener una <code>propiedad privada</code> llamada <code>gear</code>y dos<code>métodos públicos</code> llamados <code>getGear</code>y<code>setGear</code> para obtener y establecer ese valor."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb7bdef",
@ -331,8 +351,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Iterar sobre vectores con .map",
"descriptionEs": [
"translations": {
"es": {
"title": "Iterar sobre vectores con .map",
"description": [
"El método <code>map</code> es una manera conveniente de iterar sobre vectores. He aquí un ejemplo de uso: ",
"<code>var porCuatro = vectorAntiguo.map(function(val){</code>",
"<code>&nbsp;&nbsp;return val * 4;</code>",
@ -341,6 +363,8 @@
"En nuestro ejemplo, la función de devolución de llamada sólo usa el valor del elemento del vector sobre el que está iterando (parámetro <code>val</code>), pero tu función de devolución de llamada también puede incluir parámetros para el <code>índice</code> y el <code>vector</code> completo. ",
"Usa la función <code>map</code> para añadir 3 a cada valor de la variable <code>oldArray</code>."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb8bdef",
@ -374,8 +398,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Condensa vectores con .reduce",
"descriptionEs": [
"translations": {
"es": {
"title": "Condensa vectores con .reduce",
"description": [
"El método <code>reduce</code> de un vector, se utiliza para iterar a través del vector y condensarlo en un valor.",
"Para usar <code>reduce</code> tu le pasas una función de devolución de llamada cuyos argumentos sean un acumulador (en este caso, <code>valorPrevio</code>) y el valor actual (<code>valorActual</code>). ",
"<code>reduce</code> tiene un argumento opcional que puede usarse para asignar un valor inicial al acumulador. Si no se especifica ningún valor inicial, este será el primer elemento del vector y <code>valorActual</code> comenzará en el segundo elemento del vector. ",
@ -385,6 +411,8 @@
"<code>}, 0);</code>",
"Usa el método <code>reduce</code> para sumar todos los valores en <code>array</code> y asignarlo a <code>singleVal</code>."
]
}
}
},
{
"id": "cf1111c1c15feddfaeb9bdef",
@ -419,8 +447,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Filtrar vectores con .filter",
"descriptionEs": [
"translations": {
"es": {
"title": "Filtrar vectores con .filter",
"description": [
"El método <code>filter</code> se utiliza para iterar a través de un vector y filtrar los elementos que hagan falsa un condición determinada.",
"<code>filter</code> recibe una función de devolución de llamada que a su vez recibe como argumento el valor actual (que hemos llamado <code>val</code>).",
"Cualquier elemento del vector para el cual la función de devolución de llamada retorne <code>true</code> se mantendrá y los elementos que devuelven <code>false</code> serán filtrados.",
@ -431,6 +461,8 @@
"<code>});</code>",
"Usa <code>filter</code> para crear un nuevo vector con todos los valores de <code>oldArray</code> que son menores a 6. <br><code>oldArray</code> no debe cambiar."
]
}
}
},
{
"id": "cf1111c1c16feddfaeb1bdef",
@ -465,8 +497,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Ordena vectores con .sort",
"descriptionEs": [
"translations": {
"es": {
"title": "Ordena vectores con .sort",
"description": [
"Puedes utilizar el método <code>sort</code> para ordenar alfabética o numéricamente los valores de un vector.",
"A diferencia de los métodos de vector que hemos visto,<code>sort</code>en realidad altera el vector en su lugar. Sin embargo, también devuelve este vector ordenado. ",
"<code>sort</code> puede recibir como parámetro una función de devolución de llamada para comparar. Sin no se provee una función de comparación, convertirá los valores a cadenas y los ordenará alfabéticamente. ",
@ -477,6 +511,8 @@
"<code>});</code>",
"Usa <code>sort</code> para ordenar<code>array</code> de mayor a menor."
]
}
}
},
{
"id": "cf1111c1c16feddfaeb2bdef",
@ -509,8 +545,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Invierte vectores con .reverse",
"descriptionEs": [
"translations": {
"es": {
"title": "Invierte vectores con .reverse",
"description": [
"Puedes utilizar el método <code>reverse</code> para invertir los elementos en un vector.",
"<code>reverse</code> es otro método de vector que altera el vector mismo, y también devuelve el vector invertido.",
"<code>var miVector = [1, 2, 3];</code>",
@ -518,6 +556,8 @@
"<em>devuelve [3, 2, 1]</em>",
"Usa <code>reverse</code> para invertir la variable <code>array</code> y asignarla a <code>newArray</code>."
]
}
}
},
{
"id": "cf1111c1c16feddfaeb3bdef",
@ -552,14 +592,18 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Concatena vectores con .concat",
"descriptionEs": [
"translations": {
"es": {
"title": "Concatena vectores con .concat",
"description": [
"<code>concat</code> se puede utilizar para combinar el contenido de dos vectores en uno solo.",
"<code>concat</code> recibe un vector como argumento y devuelve un nuevo vector con los elementos del vector que recibe concatenados al final.",
"He aquí un ejemplo de <code>concat</code> cuando se usa para concatenar <code>otroVector</code> al final de <code>vectorAntiguo</code>:",
"<code>vectorNuevo = vectorAntiguo.concat(otroVector);</code>",
"Usa <code>.concat ()</code> para concatenar <code>concatMe</code> al final de <code>oldArray</code> y asigna el vector resultante a <code>newArray</code>."
]
}
}
},
{
"id": "cf1111c1c16feddfaeb4bdef",
@ -591,14 +635,18 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Divide cadenas con .split",
"descriptionEs": [
"translations": {
"es": {
"title": "Divide cadenas con .split",
"description": [
"Puedes utilizar el método <code>split</code> para dividir una cadena en un vector.",
"<code>split</code> utiliza el argumento que recibe como delimitador para determinar en qué puntos debe dividir la cadena.",
"He aquí un ejemplo del uso de <code>split</code> para dividir una cadena en cada caracter <code>s</code>:",
"<code>var vector = string.split('s');</code>",
"Usa <code>split</code> para crear un vector con las palabras de una <code>cadena</code> y asígnalo a la variable <code>array</code>."
]
}
}
},
{
"id": "cf1111c1c16feddfaeb5bdef",
@ -629,8 +677,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Une cadenas con .join",
"descriptionEs": [
"translations": {
"es": {
"title": "Une cadenas con .join",
"description": [
"Podemos usar el método <code>join</code> para unir los elementos de un vector en una cadena, separándolos con el delimitador que proporciones como argumento.",
"El siguiente es un ejemplo del uso de <code>join</code> para unir todos los elementos de un vector en una cadena con todos los elementos separados entre si por palabra` Na`: ",
"<code>var uneme = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];</code>",
@ -639,5 +689,7 @@
"Usa el método <code>join</code> para crear una cadena a partir <code>joinMe</code> con espacios entre cada par de elementos y asignarla a <code>joinedString </code>."
]
}
}
}
]
}

6
seed/challenges/02-data-visualization-certification/d3.json
View File

@ -13,7 +13,11 @@
"tests": [],
"type": "waypoint",
"challengeType": 3,
"titleEs": "Desafios para aprender D3"
"translations": {
"es": {
"title": "Desafios para aprender D3"
}
}
}
]
}

18
seed/challenges/02-data-visualization-certification/data-visualization-certificate.json
View File

@ -92,7 +92,10 @@
],
"type": "Waypoint",
"challengeType": 7,
"descriptionEs": [
"translations": {
"es": {
"title": "Reclama tu certificado de Visualización de datos",
"description": [
[
"//i.imgur.com/Et3iD74.jpg",
"Una imagen que muestra nuestro certificado de Visualización de datos",
@ -117,9 +120,11 @@
"¡Felicitaciones! Hemos agregado tu certificado de Visualización de datos a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
""
]
],
"titleEs": "Reclama tu certificado de Visualización de datos",
"descriptionFr": [
]
},
"fr": {
"title": "Réclamer votre Certificat de Visualisation de données",
"description": [
[
"//i.imgur.com/Et3iD74.jpg",
"Une image de note Certificat de Visualisation de données",
@ -144,8 +149,9 @@
"Félicitations! On vient d’ajouter votre Certificat de Visualisation de données à votre profile. Cette certificat est public et vérifiable, mais vous pouvez le cacher si vous désirer.",
""
]
],
"titleFr":"Réclamer votre Certificat de Visualisation de données"
]
}
}
}
]
}

40
seed/challenges/02-data-visualization-certification/data-visualization-projects.json
View File

@ -27,8 +27,10 @@
"releasedOn": "January 1, 2016",
"type": "zipline",
"challengeType": 3,
"titleEs": "Visualiza datos utilizando un gráfico de barras",
"descriptionEs": [
"translations": {
"es": {
"title": "Visualiza datos utilizando un gráfico de barras",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/vGjLVZ' target='_blank'>https://codepen.io/FreeCodeCamp/full/vGjLVZ</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -40,6 +42,8 @@
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7178d8c242eddfaeb5bd13",
@ -64,8 +68,10 @@
"releasedOn": "January 1, 2016",
"type": "zipline",
"challengeType": 3,
"titleEs": "Visualiza datos utilizando un gráfico de dispersión",
"descriptionEs": [
"translations": {
"es": {
"title": "Visualiza datos utilizando un gráfico de dispersión",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/ONxvaa/' target='_blank'>https://codepen.io/FreeCodeCamp/full/ONxvaa/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -77,6 +83,8 @@
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7188d8c242eddfaeb5bd13",
@ -102,8 +110,10 @@
"releasedOn": "January 1, 2016",
"type": "zipline",
"challengeType": 3,
"titleEs": "Visualiza datos utilizando un mapa de calor",
"descriptionEs": [
"translations": {
"es": {
"title": "Visualiza datos utilizando un mapa de calor",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/aNLYPp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/aNLYPp/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -116,6 +126,8 @@
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7198d8c242eddfaeb5bd13",
@ -141,8 +153,10 @@
"releasedOn": "January 1, 2016",
"type": "zipline",
"challengeType": 3,
"titleEs": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
"descriptionEs": [
"translations": {
"es": {
"title": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/KVNNXY' target='_blank'>https://codepen.io/FreeCodeCamp/full/KVNNXY</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -157,6 +171,8 @@
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7108d8c242eddfaeb5bd13",
@ -182,8 +198,10 @@
"releasedOn": "January 1, 2016",
"type": "zipline",
"challengeType": 3,
"titleEs": "Mapea datos a lo largo del Globo",
"descriptionEs": [
"translations": {
"es": {
"title": "Mapea datos a lo largo del Globo",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/FreeCodeCamp/full/mVEJag</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -197,5 +215,7 @@
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
}
]
}

214
seed/challenges/02-data-visualization-certification/react-projects.json
View File

@ -28,22 +28,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте предпросмотрщик языка разметки Markdown",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/FreeCodeCamp/full/JXrLLE/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу использовать язык разметки в стиле GitHub в текстовом поле.",
"<strong>Пользовательская история:</strong> Я могу видеть предварительный просмотр вывода моей разметки по мере ввода текста.",
"<strong>Подсказка:</strong> Вам не нужно интерпретировать разметку самостоятельно - вы можете импортировать библиотеку Marked для этого: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
"<strong>Заметка:</strong> Если вы хотите использовать синтаксис React JSX, вам понадобится задействовать 'Babel' в качестве препроцессора.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Crea un visualizador de lenguaje de marcado (Markdown)",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un visualizador de lenguaje de marcado (Markdown)",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/FreeCodeCamp/full/JXrLLE/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -57,6 +45,24 @@
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте предпросмотрщик языка разметки Markdown",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/FreeCodeCamp/full/JXrLLE/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу использовать язык разметки в стиле GitHub в текстовом поле.",
"<strong>Пользовательская история:</strong> Я могу видеть предварительный просмотр вывода моей разметки по мере ввода текста.",
"<strong>Подсказка:</strong> Вам не нужно интерпретировать разметку самостоятельно - вы можете импортировать библиотеку Marked для этого: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
"<strong>Заметка:</strong> Если вы хотите использовать синтаксис React JSX, вам понадобится задействовать 'Babel' в качестве препроцессора.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
},
{
"id": "bd7156d8c242eddfaeb5bd13",
"title": "Build a Camper Leaderboard",
@ -82,23 +88,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте таблицу Кемперов-Лидеров",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
"<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
"<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Crea un marcador para los campistas",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un marcador para los campistas",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -113,6 +106,25 @@
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте таблицу Кемперов-Лидеров",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
"<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
"<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
},
{
"id": "bd7155d8c242eddfaeb5bd13",
"title": "Build a Recipe Box",
@ -140,24 +152,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте хранилище рецептов",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/FreeCodeCamp/full/xVXWag/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу создавать рецепты, содержащие название и ингредиенты.",
"<strong>Пользовательская история:</strong> Я могу просмотреть корневой вид, на котором видны все рецепты.",
"<strong>Пользовательская история:</strong> Я могу нажать на имя каждого из рецептов для просмотра содержимого.",
"<strong>Пользовательская история:</strong> Я могу отредактировать эти рецепты.",
"<strong>Пользовательская история:</strong> Я могу удалить эти рецепты.",
"<strong>Пользовательская история:</strong> Все новые рецепты, которые я добавил, сохранены в локальном хранилище моего браузера. Если я обновлю страницу, эти рецепты будут всё ещё там.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Crea una caja de recetas",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea una caja de recetas",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/FreeCodeCamp/full/xVXWag/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -173,6 +171,26 @@
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте хранилище рецептов",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/FreeCodeCamp/full/xVXWag/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Я могу создавать рецепты, содержащие название и ингредиенты.",
"<strong>Пользовательская история:</strong> Я могу просмотреть корневой вид, на котором видны все рецепты.",
"<strong>Пользовательская история:</strong> Я могу нажать на имя каждого из рецептов для просмотра содержимого.",
"<strong>Пользовательская история:</strong> Я могу отредактировать эти рецепты.",
"<strong>Пользовательская история:</strong> Я могу удалить эти рецепты.",
"<strong>Пользовательская история:</strong> Все новые рецепты, которые я добавил, сохранены в локальном хранилище моего браузера. Если я обновлю страницу, эти рецепты будут всё ещё там.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
},
{
"id": "bd7154d8c242eddfaeb5bd13",
"title": "Build the Game of Life",
@ -201,26 +219,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте игру \"Жизнь\"",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/FreeCodeCamp/full/reGdqx/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
"<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
"<strong>Пользовательская история:</strong> Я могу настроить доску.",
"<strong>Пользовательская история:</strong> Я могу очистить доску.",
"<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
"<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
"<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
"<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Crea un Juego de la vida",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un Juego de la vida",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/FreeCodeCamp/full/reGdqx/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -238,6 +240,28 @@
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте игру \"Жизнь\"",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/FreeCodeCamp/full/reGdqx/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
"<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
"<strong>Пользовательская история:</strong> Я могу настроить доску.",
"<strong>Пользовательская история:</strong> Я могу очистить доску.",
"<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
"<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
"<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
"<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
},
{
"id": "bd7153d8c242eddfaeb5bd13",
"title": "Build a Roguelike Dungeon Crawler Game",
@ -267,27 +291,10 @@
"type": "zipline",
"isRequired": true,
"challengeType": 3,
"titleRu": "Создайте Roguelike-подобную игру Подземелье",
"descriptionRu": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
"<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
"<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
"<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
"<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
"<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
"<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
"<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
"<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
],
"titleEs": "Crea un juego de dragones al estilo Rogue",
"descriptionEs": [
"translations": {
"es": {
"title": "Crea un juego de dragones al estilo Rogue",
"description": [
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
@ -305,6 +312,29 @@
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
"ru": {
"title": "Создайте Roguelike-подобную игру Подземелье",
"description": [
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
"<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
"<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
"<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
"<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
"<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
"<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
"<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
"<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
"<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
"Если что-то не получается, не забывайте пользоваться методом <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help' target='_blank'>Читай-Ищи-Спрашивай</a>.",
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
]
}
}
}
]
}

6
seed/challenges/02-data-visualization-certification/react.json
View File

@ -13,7 +13,11 @@
"tests": [],
"type": "waypoint",
"challengeType": 3,
"titleEs": "Desafios para aprender React"
"translations": {
"es": {
"title": "Desafios para aprender React"
}
}
}
]
}

2
seed/challenges/02-data-visualization-certification/sass.json
View File

@ -13,7 +13,7 @@
"tests": [],
"type": "waypoint",
"challengeType": 3,
"titleEs": "Desafios para aprender Sass"
"translations": {}
}
]
}

43
seed/challenges/03-back-end-development-certification/api-projects.json
View File

@ -91,7 +91,8 @@
"tests": [],
"type": "Waypoint",
"challengeType": 7,
"isRequired": false
"isRequired": false,
"translations": {}
},
{
"id": "bd7158d8c443edefaeb5bdef",
@ -114,8 +115,10 @@
"releasedOn": "January 1, 2016",
"type": "basejump",
"challengeType": 4,
"titleEs": "Microservicio de Marca Temporal",
"descriptionEs": [
"translations": {
"es": {
"title": "Microservicio de Marca Temporal",
"description": [
"<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
@ -125,6 +128,8 @@
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7158d8c443edefaeb5bdff",
@ -145,8 +150,10 @@
"releasedOn": "January 1, 2016",
"type": "basejump",
"challengeType": 4,
"titleEs": "Microservicio para analizar el encabezado de una petición",
"descriptionEs": [
"translations": {
"es": {
"title": "Microservicio para analizar el encabezado de una petición",
"description": [
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
@ -154,6 +161,8 @@
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7158d8c443edefaeb5bd0e",
@ -177,8 +186,10 @@
"releasedOn": "January 1, 2016",
"type": "basejump",
"challengeType": 4,
"titleEs": "Microservicio para acortar URLs",
"descriptionEs": [
"translations": {
"es": {
"title": "Microservicio para acortar URLs",
"description": [
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://little-url.herokuapp.com/' target='_blank'>https://little-url.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
@ -188,6 +199,8 @@
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7158d8c443edefaeb5bdee",
@ -210,8 +223,10 @@
"releasedOn": "January 1, 2016",
"type": "basejump",
"challengeType": 4,
"titleEs": "Capa de abstracción para buscar imágenes",
"descriptionEs": [
"translations": {
"es": {
"title": "Capa de abstracción para buscar imágenes",
"description": [
"<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que te permite buscar imágenes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> y examinar las búsquedas recientes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Después, despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
@ -221,6 +236,8 @@
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
},
{
"id": "bd7158d8c443edefaeb5bd0f",
@ -243,8 +260,10 @@
"releasedOn": "January 1, 2016",
"type": "basejump",
"challengeType": 4,
"titleEs": "Microservicio de metadatos de archivos",
"descriptionEs": [
"translations": {
"es": {
"title": "Microservicio de metadatos de archivos",
"description": [
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
@ -255,5 +274,7 @@
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
}
}
]
}

16
seed/challenges/03-back-end-development-certification/automated-testing-and-debugging.json
View File

@ -26,13 +26,17 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Utiliza la consola de JavaScript",
"descriptionEs": [
"translations": {
"es": {
"title": "Utiliza la consola de JavaScript",
"description": [
"Tanto Chrome como Firefox tienen excelentes consolas JavaScript, también conocidas como DevTools, para depurar tu código JavaScript.",
"Puedes encontrar las Herramientas para desarrolladores (<code>Developer tools</code>) en el menú de Chrome o la Consola web (<code>Web Console</code>) en el menú de FireFox. Si estás utilizando un navegador diferente, o un dispositivo móvil, nuestra recomendación es que cambies a la versión de escritorio de Firefox o Chrome.",
"Vamos a imprimir en esta consola utilizando el método <code>console.log</code>.",
"<code>console.log('Hello world!')</code>"
]
}
}
},
{
"id": "cf1111c1c16feddfaeb7bdef",
@ -62,8 +66,10 @@
],
"type": "waypoint",
"challengeType": 1,
"titleEs": "Usando typeof",
"descriptionEs": [
"translations": {
"es": {
"title": "Usando typeof",
"description": [
"Puedes usar <code>typeof</code> para verificar la <code>estructura de datos</code>, o el tipo, de una variable.",
"Ten en cuenta que, en JavaScript, los vectores son técnicamente un tipo de objeto.",
"Intenta utilizar <code>typeof</code> en cada uno de los siguientes valores para ver de qué tipo son.",
@ -73,5 +79,7 @@
"<code>console.log(typeof({}));</code>"
]
}
}
}
]
}

16
seed/challenges/03-back-end-development-certification/back-end-development-certificate.json
View File

@ -92,7 +92,10 @@
],
"type": "Waypoint",
"challengeType": 7,
"descriptionEs": [
"translations": {
"es": {
"title": "Reclama tu certificado de desarrollo del lado del servidor",
"description": [
[
"//i.imgur.com/8v3t84p.jpg",
"Una imagen que muestra nuestro certificado de desarrollo del lado del servidor",
@ -117,10 +120,11 @@
"¡Felicitaciones! Hemos agregado tu certificado de desarrollo del lado del servidor. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
""
]
],
"titleEs": "Reclama tu certificado de desarrollo del lado del servidor",
"titleFr": "Demandez votre certificat de développement Back End",
"descriptionFr": [
]
},
"fr": {
"title": "Demandez votre certificat de développement Back End",
"description": [
[
"//i.imgur.com/8v3t84p.jpg",
"Une image de notre certificat de développement Back End",
@ -147,5 +151,7 @@
]
]
}
}
}
]
}

63
seed/challenges/03-back-end-development-certification/dynamic-web-applications.json
View File

@ -98,8 +98,10 @@
"type": "Waypoint",
"challengeType": 7,
"isRequired": false,
"titleEs": "Prepárate para nuestros Proyectos de Desarrollo en el lado del servidor",
"descriptionEs": [
"translations": {
"es": {
"title": "Prepárate para nuestros Proyectos de Desarrollo en el lado del servidor",
"description": [
[
"//i.imgur.com/4IZjWZ3.gif",
"Una imagen gif que te muestra cómo crear una cuenta en c9.io.",
@ -185,6 +187,8 @@
""
]
]
}
}
},
{
"id": "bd7158d8c443eddfaeb5bdef",
@ -210,7 +214,10 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"description": [
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a> y despliégala en Heroku.",
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
"Estas son las Historias de usuario que debes satisfacer para este proyecto:",
@ -224,9 +231,9 @@
"<strong>Historia de usuario:</strong> Como un usuario autenticado, si no me gustan las opciones en una votación, puedo crear una nueva opción.",
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Crea una aplicación de votaciones"
]
}
}
},
{
"id": "bd7158d8c443eddfaeb5bdff",
@ -249,7 +256,10 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"description": [
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> y despliégala en Heroku.",
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
@ -260,9 +270,9 @@
"<span class='text-info'>Pista:</span> Prueba utilizar el <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>API de Yelp</a> para encontrar lugares en las ciudades donde tus usuarios buscan. Si utilizas el API de Yelp, asegúrate de mencionarlo en tu aplicación.",
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Crea una aplicación de coordinación de vida nocturna"
]
}
}
},
{
"id": "bd7158d8c443eddfaeb5bd0e",
@ -284,7 +294,10 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"description": [
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://watchstocks.herokuapp.com/' target='_blank'>http://watchstocks.herokuapp.com/</a> y despliégalo en Heroku.",
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
@ -294,9 +307,9 @@
"<strong>Historia de usuario:</strong> Como usuario, puedo ver cambios en tiempo real cuando algún otro usuario agrega o remueve una acción. Puedes usar Web Sockets para hacer esto.",
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Grafica el mercado de acciones"
]
}
}
},
{
"id": "bd7158d8c443eddfaeb5bd0f",
@ -318,7 +331,10 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"description": [
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> y despliégalo en Heroku.",
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
@ -328,9 +344,9 @@
"<strong>Historia de usuario:</strong> Puedo proponer un intercambio y esperar a que algún otro usuario acepte el trato.",
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Administra un club de intercambio de libros"
]
}
}
},
{
"id": "bd7158d8c443eddfaeb5bdee",
@ -355,7 +371,10 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"descriptionEs": [
"isRequired": true,
"translations": {
"es": {
"description": [
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://pintech.herokuapp.com/' target='_blank'>http://pintech.herokuapp.com/</a> y despliégalo en Heroku.",
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
@ -368,9 +387,9 @@
"<strong>Pista:</strong> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> es una librería que permite crear cuadrículas de imágenes al estilo de Pinterest.",
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
],
"isRequired": true,
"titleEs": "Crea un clon de Pinterest"
]
}
}
}
]
}

8
seed/challenges/03-back-end-development-certification/git.json
View File

@ -41,8 +41,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Guarda las revisiones de tu código por siempre con Git",
"descriptionEs": [
"translations": {
"es": {
"title": "Guarda las revisiones de tu código por siempre con Git",
"description": [
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
@ -70,5 +72,7 @@
"Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
]
}
}
}
]
}

8
seed/challenges/03-back-end-development-certification/mongodb.json
View File

@ -41,8 +41,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Guarda tus datos en MongoDB",
"descriptionEs": [
"translations": {
"es": {
"title": "Guarda tus datos en MongoDB",
"description": [
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
@ -70,5 +72,7 @@
"Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
]
}
}
}
]
}

40
seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json
View File

@ -48,8 +48,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Administrando paquetes con NPM",
"descriptionEs": [
"translations": {
"es": {
"title": "Administrando paquetes con NPM",
"description": [
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
@ -78,6 +80,8 @@
"Completa \"Publish Again\"",
"Una vez hayas completado estas lecciones, puedes saltarte el resto (que todavía requieren algunas correcciones), y continuar con el siguiente desafío."
]
}
}
},
{
"id": "bd7153d8c441eddfaeb5bdff",
@ -112,8 +116,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Inicia un servidor en Node.js",
"descriptionEs": [
"translations": {
"es": {
"title": "Inicia un servidor en Node.js",
"description": [
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
@ -136,6 +142,8 @@
"Completa \"HTTP Client\"",
"Una vez hayas completado estas primeras siete lecciones, continúa con el siguiente desafío."
]
}
}
},
{
"id": "bd7153d8c441eddfaeb5bdfe",
@ -156,8 +164,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Continuemos trabajando con servidores en Node.js",
"descriptionEs": [
"translations": {
"es": {
"title": "Continuemos trabajando con servidores en Node.js",
"description": [
"Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
"Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
@ -167,6 +177,8 @@
"Completa \"Time Server\"",
"Una vez hayas completado estas tres lecciones, continúa con el siguiente desafío."
]
}
}
},
{
"id": "bd7153d8c441eddfaeb5bdfd",
@ -187,8 +199,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Terminemos de trabajar con servidores en Node.js",
"descriptionEs": [
"translations": {
"es": {
"title": "Terminemos de trabajar con servidores en Node.js",
"description": [
"Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
"Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
@ -198,6 +212,8 @@
"Completa \"HTTP JSON API Server\"",
"Una vez hayas completado estas tres lecciones, continúa con el último desafío."
]
}
}
},
{
"id": "bd7153d8c441eddfaeb5bd1f",
@ -233,8 +249,10 @@
"tests": [],
"type": "waypoint",
"challengeType": 2,
"titleEs": "Creando Web Apps con Express.js",
"descriptionEs": [
"translations": {
"es": {
"title": "Creando Web Apps con Express.js",
"description": [
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
@ -259,5 +277,7 @@
"Una vez hayas completado estas lecciones, continúa con el último desafío."
]
}
}
}
]
}

6
seed/challenges/04-video-challenges/accessibility.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Accessibility"
"translations": {
"es": {
"title": "Accessibility"
}
}
}
]
}

6
seed/challenges/04-video-challenges/agile.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Agile"
"translations": {
"es": {
"title": "Agile"
}
}
}
]
}

20
seed/challenges/04-video-challenges/bigonotation.json
View File

@ -32,7 +32,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Notación O mayúscula: ¿Qué es y porque te debe interesar?",
"description": [
"La complejidad temporal es una forma de discutir cunto tiempo toma un algoritmo específico. Esto es útil al ajustar software para que opere tan rápido como sea posible.",
"Cuando escribes código, debes tener en cuenta cuanto se va a demorar su ejecución. Nadie quiere crear un producto que fruste a los usuarios por su lentitud.",
"Se habla de complejidad temporal en relación con un algoritmo, una colección de una o más funciones.",
@ -41,8 +44,9 @@
"Además, pueden haber preguntas en entrevistas sobre la notación O mayúscula y de complejidad temporal.",
"Tu empleador podrá querer saber que el código que escribes no tardará demasiado en cargar en la página de los usuarios, y el conocimiento de la notación O mayúscula muestra que reconoces esto mientras escribies tu código.",
"Lo que esperamos que te quede de este video es que la notación O mayúscula te ayuda a identificar cuando podría haber problemas (en ocasiones problemas MAYÚSCULOS) en velocidad y memoria cuando tu sitio o aplicación crezcan."
],
"titleEs": "Notación O mayúscula: ¿Qué es y porque te debe interesar?"
]
}
}
},
{
"id": "56b15f15632298c12f31517a",
@ -84,7 +88,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Notación O mayúscula: Unos pocos ejemplos",
"description": [
"La complejidad en tiempo comunmente se estima contando la cantidad de operaciones elementales que un algoritmo efectua (una operación elemental es una cuya ejecución requiere una cantidad de tiempo fijo).",
"La complejidad temporal se clasifica por la naturaleza de la función T(n) donde T representa una función matemática para el tiempo que tarda el algoritmo y n representa la cantidad de elementos sobre los que actua el algoritmo.",
"La complejidad en el peor caso, es la que más se demoraría con una entrada válida, es la forma más comun de expresar la complejidad.",
@ -103,8 +110,9 @@
"<a href='http://bigocheatsheet.com/' target='_blank'>bigocheatsheet.com/</a>",
"El curso de Coursera de Princeton no es para débiles de corazón. Con ejemplos y prácticas en Java, este curso cubre iteración sobre los datos especifcamente algoritmos de ordenamiento y búsqueda.",
"<a href='http://coursera.org/course/algs4partI' target='_blank'>coursera.org/course/algs4partI</a>"
],
"titleEs": "Notación O mayúscula: Unos pocos ejemplos"
]
}
}
}
]
}

90
seed/challenges/04-video-challenges/chromedevtools.json
View File

@ -32,7 +32,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Elementos",
"description": [
"Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: <a href='http://developers.google.com/web/tools/iterate/inspect-styles/basics' target='_blank'>developers.google.com/web/tools/iterate/inspect-styles/basics</a>",
"Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.",
"Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!",
@ -41,8 +44,9 @@
"También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.",
"El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.",
"Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>http://developers.google.com/web/tools/chrome-devtools/</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Elementos"
]
}
}
},
{
"id": "56b15f15632298c12f315183",
@ -71,7 +75,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: red",
"description": [
"La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'",
"El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.",
"Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.",
@ -79,8 +86,9 @@
"Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.",
"Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.",
"Consulta más documentación detallada aquí: <a href='http://developers.google.com/web/tools/profile-performance/network-performance/resource-loading' target='_blank'>developers.google.com/web/tools/profile-performance/network-performance/resource-loading</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: red"
]
}
}
},
{
"id": "56b15f15632298c12f315182",
@ -111,7 +119,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Fuentes",
"description": [
"La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ",
"Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ",
"Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.",
@ -120,8 +131,9 @@
"Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.",
"Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.",
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/javascript/breakpoints/' target='_blank'>developers.google.com/web/tools/javascript/breakpoints/</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Fuentes"
]
}
}
},
{
"id": "56b15f15632298c12f315181",
@ -152,7 +164,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Línea de tiempo",
"description": [
"El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ",
"Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.",
"En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ",
@ -161,8 +176,9 @@
"Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.",
"Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ",
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool' target='_blank'>developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Línea de tiempo"
]
}
}
},
{
"id": "56b15f15632298c12f315180",
@ -190,14 +206,18 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Perfiles",
"description": [
"El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ",
"Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ",
"Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.",
"Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ",
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/profile-performance/rendering-tools/js-execution' target='_blank'>developers.google.com/web/tools/profile-performance/rendering-tools/js-execution</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Perfiles"
]
}
}
},
{
"id": "56b15f15632298c12f31517f",
@ -219,13 +239,17 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Recursos",
"description": [
"El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.",
"Puedes ver y editar toda esta información dentro del navegador.",
"A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.",
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/iterate/manage-data/index' target='_blank'>developers.google.com/web/tools/iterate/manage-data/index</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Recursos"
]
}
}
},
{
"id": "56b15f15632298c12f31517e",
@ -254,15 +278,19 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Las auditorías",
"description": [
"La herramienta de auditoría te guía para mejorar tu página paso a paso.",
"En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.",
"Las sugerencias que se ven, se generan automáticamente con la función de auditoría.",
"Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.",
"A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.",
"Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar."
],
"titleEs": "Herramientas de desarrollo de Chrome: Las auditorías"
]
}
}
},
{
"id": "56b15f15632298c12f31517d",
@ -292,7 +320,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Consola",
"description": [
"El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo",
"Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.",
"Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.",
@ -300,8 +331,9 @@
"Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.",
"La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ",
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/javascript/console/' target='_blank'>developers.google.com/web/tools/javascript/console/</a>"
],
"titleEs": "Herramientas de desarrollo de Chrome: Consola"
]
}
}
},
{
"id": "56b15f15632298c12f31517c",
@ -322,12 +354,16 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Herramientas de desarrollo de Chrome: Resumen",
"description": [
", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ",
", Utiliza la documentación, incluso si nunca has leído documentación antes: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a> ",
", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort."
],
"titleEs": "Herramientas de desarrollo de Chrome: Resumen"
]
}
}
}
]
}

218
seed/challenges/04-video-challenges/computer-basics.json
View File

@ -42,7 +42,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentes básicos del computador: Las 4 partes básicas de un computador",
"description": [
"Una máquina necesita por lo menos cuatro partes básicas para ser considerada un computador.",
"Hoy vamos a hablar acerca de conceptos básicos de hardware.",
"Los computadores se componen de 4 partes básicas: Los dispositivos de entrada, los dispositivos de salida, la CPU y la memoria.",
@ -56,8 +59,9 @@
"Ahora, la CPU tiene acceso exclusivo a esta memoria.",
"No se puede llegar a la memoria desde la entrada o desde la salida sin el uso de la CPU.",
"Por lo tanto, sólo para repasar, tenemos 4 partes básicas de la computadora: los dispositivos de entrada, los dispositivos de salida, la CPU y la memoria."
],
"titleEs": "Fundamentes básicos del computador: Las 4 partes básicas de un computador"
]
}
}
},
{
"id": "bd7127d8c441eddfbeb5bddf",
@ -97,7 +101,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Más Hardware",
"description": [
"En este video cubrimos las funciones básicas de una placa base, tarjetas de expansión, y la fuente de poder.",
"Vamos a revisar rápidamente - las 4 partes básicas de un computador son dispositivos de entrada, como el ratón o el teclado, dispositivos de salida, monitor o altavoces, la CPU, la unidad central de procesamiento, y la memoria.",
"Ahora la memoria puede ser memoria a corto plazo, llamada memoria RAM, o memoria de largo plazo.",
@ -110,8 +117,9 @@
"Por lo general es la parte que tiene un ventilador en él para evitar que se sobrecaliente.",
"Así que vamos a hacer un repaso rápido.",
"Además de las cuatro partes básicas dispositivos de entrada, dispositivos de salida, CPU, y la memoria, también por lo general tenemos una placa base, las tarjetas de expansión, y una fuente de poder."
],
"titleEs": "Fundamentos básicos del computador: Más Hardware"
]
}
}
},
{
"id": "bd7129d8a441eddfbeb5bddf",
@ -149,7 +157,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Chips y la Ley de Moore",
"description": [
"Discutiremos lo que constituye un chip y por qué la tecnología se vuelve más barata cada año.",
"En este video vamos a estar hablando sobre chips y algo que se llama la Ley de Moore.",
"Probablemente has notado en los últimos 10 años más o menos, que si vas a ir a comprar un reproductor de MP3, podrás obtener cada vez más espacio de almacenamiento por un precio cada vez más bajo.",
@ -160,8 +171,9 @@
"Lo que hace que estos chips sean más grandes o más rápidos es la cantidad de transistores en un solo chip.",
"La Ley de Moore es la observación de que la cantidad de transistores que caben en un chip se ha duplicado cada dos años desde 1965.",
"Esto es importante porque hace que la tecnología sea más económica y accesible."
],
"titleEs": "Fundamentos básicos del computador: Chips y la Ley de Moore"
]
}
}
},
{
"id": "bd7126d8c441eddfbeb5bddf",
@ -195,7 +207,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Introducción a código binario",
"description": [
"Cómo se ve lo binario, y lo que puede significar.",
"Los 0s y 1s pueden interpretarse como datos mucho más complejos.",
"Hoy vamos a hablar un poco sobre el código binario.",
@ -203,8 +218,9 @@
"Aquellos 1s y 0s pueden ser casi cualquier cosa, pero por lo general son sólo números, letras y símbolos.",
"Vamos a revisar cómo decodificar un número en binario, pero como podrás adivinar, la traducción binaria se puede hacer con una rápida búsqueda en Google.",
"La parte más importante de esto es que entiendas el concepto de que incluso cosas simples como 1s y 0s se pueden traducir en algo muy complejo, que es la base para todos los lenguajes de programación existentes en la actualidad."
],
"titleEs": "Fundamentos básicos del computador: Introducción a código binario"
]
}
}
},
{
"id": "bd7125d8c441eddfbeb5bddf",
@ -240,7 +256,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: decodificar un número binario",
"description": [
"En este vídeo, decodificaremos un número escrito en notación binaria.",
"Hablemos sobre el sistema de numeración binario, también conocido como un montón de 1s y 0s una y otra vez.",
"Vamos a empezar por la numeración de las posiciones, observando de atrás hacia adelante, comenzando en 0 hasta llegar a la cantidad de dígitos del número menos uno.",
@ -250,8 +269,9 @@
"Si hay un 1, dejamos el número (2 a la potencia de la posición) y lo agregamos a los números de otras posiciones que estén en \"1\" o \"encendidas\".",
"Si es un 0, hacemos caso omiso del número de esa posición.",
"En este video, la suma de los números da 75."
],
"titleEs": "Fundamentos básicos del computador: decodificar un número binario"
]
}
}
},
{
"id": "bd7122d8c441eddfbeb5bddf",
@ -285,7 +305,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Bytes en binario",
"description": [
"En binario se puede hacer más que representar números - mediante bytes, puede simbolizar todos los símbolos alfanuméricos, los cuales pueden ser interpretados en códigos más complejos",
"Vamos a hablar sobre el nivel más básico que un computador puede comprender otros lenguajes como JavaScript.",
"Lo más básico es un bit, arriba o abajo, 1 ó 0.",
@ -293,8 +316,9 @@
"Todos los números (255 y menos), las letras y símbolos se pueden traducir en bytes que el computador puede entender.",
"Por lo tanto, todos los números, letras y símbolos en su código JavaScript se puede traducir.",
"Hay una gran cantidad de lenguajes con los cuales los computadores pueden operar, y lo que quiero que te quede de este video es que todos los datos en tu computador se reducen a bytes binarios."
],
"titleEs": "Fundamentos básicos del computador: Bytes en binario"
]
}
}
},
{
"id": "bd7124d8c441eddfbeb5bddf",
@ -333,7 +357,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Cómo medir el tamaño de los datos",
"description": [
"¿Cómo se mide el tamaño/cantidad de datos, a partir de un bit y continuando hasta un petabyte.",
"Hoy vamos a estar hablando de tamaño de los datos.",
"El tamaño más pequeño que podemos tener se llama un <em>bit</em>.",
@ -346,8 +373,9 @@
"Después de eso no hay Megabyte, o 1024 bytes a la potencia de dos.",
"Entonces es Gigabyte, 1024 Bytes a la tercera potencia; Terabyte, 1024 bytes a la cuarta potencia y petabyte que es 1024 a la quinta potencia.",
"!Crecieron realmente rápidamente!"
],
"titleEs": "Fundamentos básicos del computador: Cómo medir el tamaño de los datos"
]
}
}
},
{
"id": "bd7123d8c441eddfbeb5bddf",
@ -381,7 +409,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: medición de la velocidad de datos",
"description": [
"La velocidad de datos y el tamaño de los datos se miden de manera diferente.",
"En este video, cubrimos cómo se mide la velocidad de los datos.",
"Hablemos sobre la velocidad de datos.",
@ -393,8 +424,9 @@
"En la velocidad de red, hablamos de gigabits por segundo (¡mil millones de bits por segundo!).",
"La conclusión principal es que la velocidad se mide generalmente en bits por segundo mientras que el tamaño se mide en bytes.",
"Además, si tienes una velocidad de internet de cierta cantidad de bits por segundo, ten en cuenta que te están hablando de algo que es la octava parte de la cantidad en bytes, que es la manera típica como mides tamaños de datos."
],
"titleEs": "Fundamentos básicos del computador: medición de la velocidad de datos"
]
}
}
},
{
"id": "bd7121d8c441eddfbeb5bddf",
@ -433,7 +465,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Tipos de Computadores",
"description": [
"Este video cubre los conceptos básicos de los supercomputadores, servidores, estaciones de trabajo, PC y microcontroladores.",
"Vamos a discutir los diferentes tipos de computadores.",
"El tipo más grande se llama un super computador, un computador con muchas CPUs que trabajan en el mismo problema, al mismo tiempo usando una técnica llamada de procesamiento en paralelo.",
@ -446,8 +481,9 @@
"Tal vez has oído \"¡Soy un Mac!\" o \"¡Soy un PC!\", Algo que indica que son diferentes, pero en realidad mi propio MacBook personal sigue siendo un PC, un computador personal.",
"Es a la vez un Mac y un PC.",
"El último tipo de equipo del que hablaremos es un microcontrolador, el tipo de equipo que puedes tener en tu carro que es realmente bueno en una pequeña tarea especializada, pero no se utilizaría la misma forma que un PC."
],
"titleEs": "Fundamentos básicos del computador: Tipos de Computadores"
]
}
}
},
{
"id": "bd7120d8c441eddfbeb5bddf",
@ -488,7 +524,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Más sobre la placa base",
"description": [
"Un poco más de detalle sobre lo que constituye una placa base y sus funciones estándar en un computador.",
"Hoy vamos a hablar más sobre la placa base.",
"La hemos mencionado brevemente en videos anteriores, pero vamos a dar algunos detalles más hoy.",
@ -503,8 +542,9 @@
"Además de las ranuras de expansión, las placas base tienen puertos.",
"En tu computador, probablemente sabes que hay un lugar para conectar USB, FireWire, tarjeta SD, Ethernet, e incluso un plug-in de audio para escuchar a través de auriculares.",
"Todos estos son considerados puertos, un lugar en la placa base donde puedes conectar la CPU a algun dispositivo externo bien para obtener o para dar información."
],
"titleEs": "Fundamentos básicos del computador: Más sobre la placa base"
]
}
}
},
{
"id": "bd712fd8c441eddfbeb5bddf",
@ -545,7 +585,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Redes de datos",
"description": [
"Este video cubre los conceptos básicos de redes de área local, redes de área amplia y redes privadas virtuales.",
"En este vídeo se habla de redes de datos.",
"Usted ha oído hablar de las redes, como una red de agua, red de carreteras, red de telefonía celular, o red de televisión.",
@ -559,8 +602,9 @@
"Podrían utilizar una WAN.",
"Podrías pensar que estas es posible conectarlas usando Internet, y en el caso de una VPN (red privada virtual, que conceptualmente es básicamente lo mismo que una una WAN), tendrías la razón.",
"Sin embargo, por lo general una WAN alquila un cable de una empresa de Internet para crear la conexión."
],
"titleEs": "Fundamentos básicos del computador: Redes de datos"
]
}
}
},
{
"id": "bd712ed8c441eddfbeb5bddf",
@ -594,7 +638,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Direcciones IP",
"description": [
"Cada dispositivo tiene una dirección IP.",
"Las direcciones IP se asignan en función de la ubicación, y son vitales para que Internet funcione.",
"Vamos a hablar sobre Internet: Parte 1, Cómo funciona Internet.",
@ -607,8 +654,9 @@
"Este número no es lo suficientemente específico como para que llames al 911, les des tu dirección IP, y así les permitas saber donde vives.",
"Sin embargo, es lo suficientemente específico como para buscar en Google \"¿Dónde está el mejor helado cerca de mí\" y Google podría darte información cercana a tu ubicación.",
"Esto se hace utilizando tu dirección IP."
],
"titleEs": "Fundamentos básicos del computador: Direcciones IP"
]
}
}
},
{
"id": "bd712dd8c441eddfbeb5bddf",
@ -644,7 +692,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: ¿Cómo funciona Internet",
"description": [
"Esta es una descripción breve y descripción de cómo funciona Internet.",
"Para una explicación más en profundidad, dale un vistazo a <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>.",
"Vamos a hablar un poco más acerca de cómo funciona el Internet.",
@ -658,8 +709,9 @@
"Lo que quiero que te lleves de este video es que tu dispositivo, que tiene una dirección IP, puede enviar una petición de información, y que esa información regresará a tu dispositivo por medio de servidores y enrutadores que componen el Internet.",
"Ahora bien, esta explicación es realmente básica.",
"Para obtener más información, echa un vistazo a <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>."
],
"titleEs": "Fundamentos básicos del computador: ¿Cómo funciona Internet"
]
}
}
},
{
"id": "bd712cd8c441eddfbeb5bddf",
@ -685,7 +737,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Software",
"description": [
"Diferenciamos entre hardware y software, y también discutimos las diferencias entre el sistema operativo y el software de aplicación.",
"En este video, vamos a discutir los fundamentos del software.",
"Ya hemos cubierto hardware, que son las partes del computador que puedes ver y sentir con tus manos.",
@ -694,8 +749,9 @@
"Los dos tipos de software de los cuales vamos a hablar hoy son el sistema operativo y las aplicaciones.",
"Hay tres sistemas operativos principales: Windows, Mac y Linux.",
"Las aplicaciones comprenden el resto del software, como tu navegador web, juegos, cosas como Photoshop, con lo que ves tu correo, o con lo que editas documentos, etc."
],
"titleEs": "Fundamentos básicos del computador: Software"
]
}
}
},
{
"id": "56b15f15632298c12f31510f",
@ -729,7 +785,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Fundamentos básicos del computador: Redes de distribución de contenido",
"description": [
"Una red de distribución de contenido (del inglés <em>Content Delivery Network</em>) es un sistema (red) de servidores distribuidos que sirven páginas web y otros contenidos web a los usuarios en función de su ubicación geográfica, el origen de la página web y un servidor de entrega de contenido.",
"El objetivo de una RDC (CDN) es establecer conexiones de red de mayor calidad.",
"Las RDC logran esto proporcionando rutas eficaces entre sus propios servidores que pueden encaminar rápidamente a los usuarios a sus destinos, o si resulta más rápido o económico, a otra copia del sitio web destino, la cual se aloja en otro servidor.",
@ -741,8 +800,9 @@
"Como usuario, es probable que utilices RDC todo el tiempo sin darte cuenta.",
"Como desarrollador, es posible que desees utilizar RDCs como las bibliotecas de Google para ayudar a que tu página cargue más rápido.",
"Como empresa, una RDC sería útil si quieres que tu producto o sitio llegue a los usuarios de manera más eficiente en el esquema más grande de su red y en Internet en su conjunto."
],
"titleEs": "Fundamentos básicos del computador: Redes de distribución de contenido"
]
}
}
},
{
"id": "bd7129d80441eddfbeb5bddf",
@ -778,7 +838,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Analógico vs digital y compresión de archivos",
"description": [
"¿Cómo los computadores pueden volver sonido analógico en archivos digitales, y los pros y los contras de la compresión de datos?",
"Vamos a discutir datos anàlogos frente a datos digitales en un nivel muy básico.",
"Más especificamente, hablaremos de cómo los computadores interpretan el sonido analógico y lo convierten en un archivo digital.",
@ -792,8 +855,9 @@
"Otra forma es tomando una medida desde un punto medio y no desde 0, de forma que los número registrados sean más pequeños.",
"En imágenes, se hace midiendo grupos de a 16 píxeles en lugar de hacer mediciones individuales.",
"Lo que te llevas de este video es que querrás utilizar archivos digitales pues son de mayor calidad, y cuando te fijes en compresión, tendrás que decidir qué tan lejos estás dispuesto a ir para garantizar que el usuario tenga la mejor experiencia posible."
],
"titleEs": "Analógico vs digital y compresión de archivos"
]
}
}
},
{
"id": "bd7129d8b441eddfbeb5bddf",
@ -845,7 +909,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Enrutadores y paquetes",
"description": [
"En este video, vamos a entrar en más detalle respecto a enrutadores y paquetes, conceptos importantes para entender cómo funciona Internet.",
"Vamos a hablar más acerca de los enrutadores y cómo se relacionan con la creación de redes.",
"Los enrutadores son los dispositivos que conectan diferentes pequeñas redes.",
@ -870,8 +937,9 @@
"Las tramas no tienen que recorrer la misma ruta hasta el destino final.",
"Pueden tomar cualquier ruta abierta, la que sea más rápida, y dado que tienen la dirección IP final, todos los enrutadores saben dónde enviarlos.",
"Una vez que llegan al destino final, ese computador sabe cómo poner junta toda la información."
],
"titleEs": "Enrutadores y paquetes"
]
}
}
},
{
"id": "bd7029d8c441eddfbeb5bddf",
@ -916,7 +984,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Código Fuente",
"description": [
"En este video se discute lo que es código fuente, intérpretes y compiladores, y lo que significa fuentes abiertas.",
"Vamos a hablar sobre el código fuente: lo que el código fuente es, donde lo puedes ver, y cómo el computador lo entiende.",
"El código fuente en sí es el documento de texto que el programador crea: ellos lo teclean, sus letras, números y símbolos",
@ -935,8 +1006,9 @@
"Podrías preguntarte, \"¿y eso qué?\", pero lo que es increíble es que si deseas cambiar o mejorar FreeCodeCamp, puedes describir la mejora y tal vez implementarla.",
"Es una gran manera para los sitios web y para el software de crecer de forma fuerte y rápida debido a la comunidad que trabaja en conjunto para mejorarlo.",
"Una regla no escrita al contribuir a proyectos de fuentes abiertas es que en general deberías compartir tus mejoras para que también sean de fuentes abiertas, y al retornar esa mejora al público también les permites a otros utilizar tus mejoras."
],
"titleEs": "Código Fuente"
]
}
}
},
{
"id": "bd712ad8c441eddfbeb5bddf",
@ -970,8 +1042,10 @@
],
"type": "hike",
"challengeType": 6,
"nameEs": "Consola y Logging",
"descriptionEs": [
"translations": {
"es": {
"title": "Consola y Logging",
"description": [
"Nosotros discutimos que es la consola (y donde está), porque es útil y mostrar un poco de como trabaja.",
"La consola: que es, donde la puedes encontrar, y para que la usas.",
"La consola es usada comunmente para mostrar los mensajes administrativos del sistema.",
@ -983,6 +1057,8 @@
"Además esto funcionará con números y booleanos, cuyos valores posibles son verdadro/falso",
"Cuando se envian palabras a la consola, es importante ponerlas dentro de comillas para reconocer que es una cadena."
]
}
}
},
{
"id": "bd7119d8c441eddfbeb5bddf",
@ -1012,7 +1088,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Las variables en el código",
"description": [
"Las variables se utilizan con frecuencia en Javascript y en muchos otros lenguajes de programación.",
"En este video, vamos a hablar acerca de las variables en el código.",
"Las variables, al igual que en álgebra, son letras o palabras que representan algo más.",
@ -1020,8 +1099,9 @@
"Cuando se ejecute <code>console.log(x)</code> presentará \"Briana\".",
"Pero ten cuidado - si pones <code>console.log(\"x\")</code>, con la <code>x</code> entre comillas, se presentará la \"x\".",
"Lo que yo quiero que te lleves con este video es que existen las variables en el código, y que puedes almacenar todo, desde una simple cadena hasta una función, todo con un simple nombre."
],
"titleEs": "Las variables en el código"
]
}
}
},
{
"id": "bd712bd8c441eddfbeb5bddf",
@ -1058,7 +1138,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "¿Qué hacen los programadores?",
"description": [
"Los programadores (también conocidos como codificadores, desarrolladores, o ingenieros de software) resuelven problemas convirtiendo grandes ideas en pequeños pasos que un computador puede entender.",
"En este video, vamos a discutir lo que hacen los programadores.",
"Los programadores también pueden llamarse codificadores, desarrolladores o ingenieros de software, y lo que todas estas personas hacen es tomar ideas y convertirlas en código que funciona.",
@ -1069,8 +1152,9 @@
"Todo se hace secuencialmente, de manera directa, por lo que hacer referencia a algo que está por debajo y que todavía no ha sucedido dará lugar a un problema.",
"Los computadores sólo leen de arriba hacía abajo, como tu leerías un libro.",
"Los programadores son los responsables de dividir sus ideas en pequeños pasos y escribirlos de una manera que las computadoras pueden entenderlos."
],
"titleEs": "¿Qué hacen los programadores?"
]
}
}
},
{
"id": "bd7129d89441eddfbeb5bddf",
@ -1124,7 +1208,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "Seguridad en los computadores",
"description": [
"Lo fundamental de la seguridad en los computadores y cómo proteger su información.",
"Echemos una mirada a la seguridad en los computadores.",
"De lo primero que vamos a hablar es de algo conocido como ataque diccionario que se dirige a sus claves.",
@ -1152,8 +1239,9 @@
"Una de las formas en que se puede comprometer tu información es cuando los 'los chicos malos' encuentran huecos en las versiones viejas de los programas",
"Estos defectos se corrigen en las versiones nuevas, por lo que evitarás problemas si mantienes el software actualizado.",
"Estas son algunas cosas muy básicas que debes saber acerca de cómo proteger la información de tu computador."
],
"titleEs": "Seguridad en los computadores"
]
}
}
}
]
}

6
seed/challenges/04-video-challenges/computer-science.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Computer Science"
"translations": {
"es": {
"title": "Computer Science"
}
}
}
]
}

6
seed/challenges/04-video-challenges/data-visualization.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Data Visualization"
"translations": {
"es": {
"title": "Data Visualization"
}
}
}
]
}

6
seed/challenges/04-video-challenges/devops.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "DevOps"
"translations": {
"es": {
"title": "DevOps"
}
}
}
]
}

20
seed/challenges/04-video-challenges/dom.json
View File

@ -30,15 +30,19 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "El DOM: ¿Qué es el Modelo de objetos del documento?",
"description": [
"El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
"Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
"De hecho, puedes hacer muchas cosas con el DOM. De hecho, ya lo estás haciendo desde el momento en que estás escribiendo código en JS y jQuery.",
"Puedes insertar nuevos elementos, o cambiar el estilo o contenido de los elementos previamente existentes.",
"Esto se puede hacer con javascript puro, como: document.getElementById(id), element.getElementsByTagName(name), o document.createElement(name).",
"También puedes usar librerías como jQuery para simplificar, estandarizar y automatizar la manipulación del DOM, como por ejemplo: $('#caja2').append('Esto se agregará a caja2!')"
],
"titleEs": "El DOM: ¿Qué es el Modelo de objetos del documento?"
]
}
}
},
{
"id": "56b15f15632298c12f31518e",
@ -66,14 +70,18 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "El DOM: Estilo en el encabezado, código al pie de página",
"description": [
"Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (<code>header</code>) y que los enlaces al código (JS) deben estar incluidos al pie de página (<code>footer</code>). ¿Alguna vez te preguntaste por qué?",
"Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
"Esto tiene que ver con la forma en que el navegador decide si ha cargado suficiente información para mostrar. Hay un evento llamado 'DOMContentLoaded', y una vez que ese evento ocurre, lo que sea que se haya cargado hasta entonces será mostrado.",
"El DOM le dirá al navegador que está listo una vez que el código HTML ha sido cargado, y a veces el CSS y JS no se han alcanzado a cargar. Si pones el CSS en el encabezado y el JS al pie de página, puedes estar seguro que todo el contenido será cargado antes que el DOM desencadene el evento 'DOMContentLoaded', el cual muestra tu contenido al usuario.",
"Esta es una explicación simplificada, al igual que la que encontrarás en el resto de estos videos. Si quieres más información, creo que el siguiente enlace es de bastante ayuda: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
],
"titleEs": "El DOM: Estilo en el encabezado, código al pie de página"
]
}
}
}
]
}

6
seed/challenges/04-video-challenges/embedded-and-internet-of-things.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Embedded and Internet of Things"
"translations": {
"es": {
"title": "Embedded and Internet of Things"
}
}
}
]
}

6
seed/challenges/04-video-challenges/game-development.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Game Development"
"translations": {
"es": {
"title": "Game Development"
}
}
}
]
}

6
seed/challenges/04-video-challenges/gamification.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Gamification"
"translations": {
"es": {
"title": "Gamification"
}
}
}
]
}

90
seed/challenges/04-video-challenges/jslingo.json
View File

@ -30,15 +30,19 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: MDN y Documentación",
"description": [
"Esta es una introducción básica a MDN y el concepto de la documentación.",
"MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de <a href='http://developer.mozilla.org/es/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript</a>",
"Cuando digo documentación, estoy hablando acerca de la información que se proporciona sobre el producto a sus usuarios. La documentación de MDN no necesariamente está escrita por la gente detrás de JS. Brendan Eich creó JS en 1995, pero hoy en día el proyecto continúa creciendo gracias a un esfuerzo comunitario. ",
"A medida que continúes aprendiendo JavaScript, jQuery, y prácticamente cualquier otro lenguaje o servicio para desarrollo o programación, la documentación será tu amiga.",
"Cuanto más rápido te sientas cómodo leyendo y referenciando documentación, más rápido crecerás como desarrollador.",
"Estos vídeos no van a enseñarte JavaScript - te presentan términos y conceptos que serán valiosos a medida que continúes practicando y aprendiendo."
],
"titleEs": "JavaScript Lingo: MDN y Documentación"
]
}
}
},
{
"id": "56b15f15632298c12f31518d",
@ -65,13 +69,17 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Tipos de valores",
"description": [
"Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números",
"Un booleano es un valor <code>true</code> (verdadero) o <code>false</code> (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como \"true\", porque esa palabra es ya universal como un valor lógico (así como lo es \"false\"). ",
"Una cadena es un conjunto de caracteres que se establecen entre apóstrofes (') o entre comillas (\"). Una cadena puede ser \"true\", siempre y cuando sea con comillas o con apóstrofes. ",
"Los números se explican por sí mismos - un número es un valor que se compone sólo de dígitos, aunque también puede contener un decimal o un signo negativo."
],
"titleEs": "JavaScript Lingo: Tipos de valores"
]
}
}
},
{
"id": "56b15f15632298c12f31518b",
@ -101,15 +109,19 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Variables y capitalizaciónCamello",
"description": [
"Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (<em>camelCase</em>).",
"Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.",
"Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.",
"Tu 'declaras' variables por primera vez con <code>var</code> en frente de ella, pero después puedes referenciarla más adelante en tu programa.",
"capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.",
"Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre."
],
"titleEs": "JavaScript Lingo: Variables y capitalizaciónCamello"
]
}
}
},
{
"id": "56b15f15632298c12f31518a",
@ -138,15 +150,19 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Vectores y objetos",
"description": [
"Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.",
"** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ",
"Los vectores son conjuntos de valores entre [corchetes]. Los valores se separan con comas. Cada valor puede ser booleano, cadena, número, o incluso otro vector. A esto último le llamamos vector anidado. A un vector compuesto por vectores de la misma longitud le llamamos matriz. ",
"Los objetos son un tipo de datos que pueden verse o comportarse como un vector, en la medida que se trata de más valores almacenados en una variable de una manera organizada. Oirás que un objeto se puede representar en JSON, y con frecuencia cuando haces llamadas a la API de algunos sitios (para obtener información que necesitas mostrar en tu propia página) está será devuelta en JSON. ",
"Un ejemplo de la notación de objetos es: <code>var obj = { 'nombre': 'Briana', 'comida': 'queso', 'perro': 'Maurice'};</code>",
"Fíjate que un objeto se encierra entre llaves { ... }, que los diferentes atributos se separan por comas, que cada atributo consta de una palabra llave y de un valor. Por ejemplo son llaves 'nombre', 'comida' y 'perro' y sus respectivos valores son 'Briana', 'queso' y 'Maurice'. En este ejmplo todos los valores fueron cadenas, aunque también son válidos booleanos, números y otros tipos de datos."
],
"titleEs": "JavaScript Lingo: Vectores y objetos"
]
}
}
},
{
"id": "56b15f15632298c12f315189",
@ -173,12 +189,16 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Encontrando e indexando valores en vectores",
"description": [
"Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.",
"No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.",
"Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas <code>miVector[2]</code>, realmente vas a obtener la tercera pieza de información del vector <code>miVector</code>."
],
"titleEs": "JavaScript Lingo: Encontrando e indexando valores en vectores"
]
}
}
},
{
"id": "56b15f15632298c12f315188",
@ -208,7 +228,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Manipulación de los datos",
"description": [
"Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.",
"Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.",
"Me gustaría sugerirte dar un vistazo a MDN (Mozilla Developer Network que discutimos en el primer video) para que te familiarices con la cantidad y el potencial general de los métodos que existen. <a href='http://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index</a>",
@ -216,8 +239,9 @@
"Las funciones, al igual que las variables, son algo que tu defines y creas.",
"Durante tu práctica con algoritmos en FreeCodeCamp, vas a crear funciones que reciben una determinada pieza de información y la manipulan de la forma que elijas.",
"Vas a estar más familiarizado con la sintaxis, pero por ahora, sólo recuerda que con los métodos y funciones puedes hacer casi cualquier cosa con tu código."
],
"titleEs": "JavaScript Lingo: Manipulación de los datos"
]
}
}
},
{
"id": "56b15f15632298c12f315187",
@ -247,7 +271,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Matemáticas",
"description": [
"Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.",
"Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ",
"Los ejemplos incluyen <code>Math.random()</code> que devolverá un número aleatorio en un rango y <code>Math.round()</code> que redondeará el número decimal que reciba al entero más cercano.",
@ -255,8 +282,9 @@
"Cuando trabajes con números, también debes estar consciente de que JS tiene un atributo interesante llamado 'formato de coma flotante'.",
"Dependiendo de la cantidad de números, su tamaño y la cantidad de cálculos, JS puede devolver un número que es inexacto en 0,00004.",
"Hay maneras de evitar esto, y en general no plantean problemas, pero es algo que debes tener en cuenta si te encuentras con algunos problemas que parecen no tienen sentido."
],
"titleEs": "JavaScript Lingo: Matemáticas"
]
}
}
},
{
"id": "56b15f15632298c12f315186",
@ -283,12 +311,16 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: Ciclos",
"description": [
"Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ",
"Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ",
"No es necesario que entiendas todo aquí - sólo que sepas que existen ciclos cuando necesitas recorrer un conjunto de datos y que pueden reducir la cantidad de código que debes escribir."
],
"titleEs": "JavaScript Lingo: Ciclos"
]
}
}
},
{
"id": "56b15f15632298c12f315185",
@ -318,7 +350,10 @@
],
"type": "hike",
"challengeType": 6,
"descriptionEs": [
"translations": {
"es": {
"title": "JavaScript Lingo: expresiones regulares (RegExp)",
"description": [
"Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.",
"Las epresiones regulares (abreviado <em>RegExp</em>) también pueden ser una herramienta muy útil y eficiente.",
"Usando RegExp, puedes hacer coincidir, reemplazar, buscar y dividir una cadena, uno de los tipos más difíciles de manipular.",
@ -326,8 +361,9 @@
"Si quisieras crear una página de registro que verifique las contraseñas para que contengan al menos un número y una letra mayúscula, puedes usar expresiones regulares.",
"Si quieres asegurarte de que las fechas introducidas en una página sean todas fechas válidas en el futuro, puedes usar RegExp.",
"Si bien hay infinitas maneras de utilizar RegExp, muchas de estas incluyen validaciones o ediciones automáticas de información."
],
"titleEs": "JavaScript Lingo: expresiones regulares (RegExp)"
]
}
}
}
]
}

6
seed/challenges/04-video-challenges/machine-learning.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Machine Learning"
"translations": {
"es": {
"title": "Machine Learning"
}
}
}
]
}

6
seed/challenges/04-video-challenges/math-for-programmers.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Math for Programmers"
"translations": {
"es": {
"title": "Math for Programmers"
}
}
}
]
}

6
seed/challenges/04-video-challenges/mobile-javascript-development.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Mobile JavaScript Development"
"translations": {
"es": {
"title": "Mobile JavaScript Development"
}
}
}
]
}

6
seed/challenges/04-video-challenges/software-engineering-principles.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Software Engineering Principles"
"translations": {
"es": {
"title": "Software Engineering Principles"
}
}
}
]
}

6
seed/challenges/04-video-challenges/statistics.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Statistics"
"translations": {
"es": {
"title": "Statistics"
}
}
}
]
}

6
seed/challenges/04-video-challenges/tools.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Tools"
"translations": {
"es": {
"title": "Tools"
}
}
}
]
}

6
seed/challenges/04-video-challenges/user-experience-design.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "User Experience Design"
"translations": {
"es": {
"title": "User Experience Design"
}
}
}
]
}

6
seed/challenges/04-video-challenges/visual-design.json
View File

@ -12,7 +12,11 @@
"tests": [],
"type": "hike",
"challengeType": 6,
"nameEs": "Visual Design"
"translations": {
"es": {
"title": "Visual Design"
}
}
}
]
}

138
seed/normalize-seed-files.js Normal file
View File

@ -0,0 +1,138 @@
var fs = require('fs');
var path = require('path');
var sortKeys = require('sort-keys');
// var Rx = require('rx');
// var langTagRegex = /^[a-z]{2,3}(?:-[A-Z]{2,3}(?:-[a-zA-Z]{4})?)?$/;
var translationRegex = /(description|title)([a-zA-Z]{2,4})/i;
var oldNameRegex = /name([a-zA-Z]{2,4})/i;
function hasOldTranslation(key) {
return translationRegex.test(key) || oldNameRegex.test(key);
}
function normalizeLangTag(tag) {
return tag.slice(0, 2).toLowerCase() + (
tag.length > 2 ? '-' + tag.slice(2).toUpperCase() : ''
);
}
function sortTranslationsKeys(translations) {
Object.keys(translations)
.forEach(function(key) {
if (Object.keys(translations[key]).length > 2) {
console.log('keys', Object.keys(translations[key]));
throw new Error('Unknown keys');
}
});
var _translations = Object.keys(translations)
.reduce(function(_translations, key) {
_translations[key] = sortKeys(translations[key], {
compare: function(a, b) {
return b > a;
}
});
_translations[key] = Object.keys(_translations[key])
.reduce(function(translation, _key) {
translation[_key.toLowerCase()] = _translations[key][_key];
return translation;
}, {});
return _translations;
}, {});
return sortKeys(_translations);
}
function createNewTranslations(challenge) {
return Object.keys(challenge)
.filter(hasOldTranslation)
.reduce(function(translations, oldKey) {
var matches, tag, newTranslation;
if (translationRegex.test(oldKey)) {
matches = oldKey.match(translationRegex);
tag = normalizeLangTag(matches[2]);
newTranslation = {};
newTranslation[matches[1]] = challenge[oldKey];
translations[tag] = translations[tag] ?
Object.assign({}, translations[tag], newTranslation) :
Object.assign({}, newTranslation);
return translations;
}
matches = oldKey.match(oldNameRegex);
tag = normalizeLangTag(matches[1]);
newTranslation = { title: challenge[oldKey] };
translations[tag] = translations[tag] ?
Object.assign({}, translations[tag], newTranslation) :
Object.assign({}, newTranslation);
return translations;
}, {});
}
function normalizeChallenge(challenge) {
var keys = Object.keys(challenge);
challenge.translations = challenge.translations || {};
var hasOldTranslations = keys.some(hasOldTranslation);
if (hasOldTranslations) {
challenge.translations = Object.assign(
{},
challenge.translations,
createNewTranslations(challenge)
);
}
challenge.translations = sortTranslationsKeys(challenge.translations);
// remove old translations from the top level
return Object.keys(challenge)
.filter(function(key) { return !hasOldTranslation(key); })
.reduce(function(newChallenge, key) {
newChallenge[key] = challenge[key];
return newChallenge;
}, {});
}
function normalizeBlock(block) {
block.challenges = block.challenges.map(normalizeChallenge);
return block;
}
function getFilesForDir(dir) {
return fs.readdirSync(path.join(__dirname, '/' + dir))
.map(function(file) {
if (fs.statSync(path.join(__dirname, dir + '/' + file)).isFile()) {
return { path: dir + '/' + file };
}
return getFilesForDir(dir + '/' + file);
})
.reduce(function(files, file) {
if (!Array.isArray(file)) {
files.push(file);
return files;
}
return files.concat(file);
}, []);
}
function normalize(dir) {
return getFilesForDir(dir)
.map(function(data) {
return {
path: data.path,
block: require(path.join(__dirname, data.path))
};
})
.map(function(data) {
return {
path: data.path,
block: normalizeBlock(data.block)
};
})
.forEach(function(data) {
var file = JSON.stringify(data.block, null, 2);
if (/[^\n]$/.test(file)) {
file = file + '\n';
}
fs.writeFileSync(
path.join(__dirname, '/', data.path),
file
);
});
}
normalize('challenges');