Merge pull request #4772 from vtamara/add/ES-translation-json-apis-and-ajax
Indenting and translating to spanish json-apis-and-ajax.
This commit is contained in:
Arsen Melikyan
@ -49,7 +49,18 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Activa eventos de pulsación con jQuery",
|
||||
"descriptionEs": [
|
||||
"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:",
|
||||
"<code>$(\"#getMessage\").on(\"click\", function(){</code>",
|
||||
"",
|
||||
"<code>});</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bc000000000000000000001",
|
||||
@ -94,7 +105,14 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Cambia texto con eventos de pulsación",
|
||||
"descriptionEs": [
|
||||
"Cuando nuestro evento de pulsación ocurre, podemos utilizar Ajax 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>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000002",
|
||||
@ -153,7 +171,21 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Obtén JSON con el método getJSON de jQuery",
|
||||
"descriptionEs": [
|
||||
"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>).",
|
||||
"Tú ya has usado JSON al crear objetos en JavaScript. JSON no es más que las propiedades del objeto y sus valores actuales, intercalados entre un <code>{</code> y un <code>}</code>. ",
|
||||
"Estas propiedades y sus valores a menudo se denominan \" pares llave-valor\".",
|
||||
"Vamos a obtener el JSON de la API de fotos de gato de Free Code Camp.",
|
||||
"Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:",
|
||||
"<code> $.getJSON(\"/json/cats.json\", function(json) {</code>",
|
||||
"<code> $(\".message\").html(JSON.stringify(json));</code>",
|
||||
"<code> });</code>",
|
||||
"Una vez lo añadas, pulsa el botón \"Get Message\". Su 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."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000003",
|
||||
@ -203,7 +235,8 @@
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here"," </div>",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
@ -215,7 +248,23 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Convierte datos JSON a datos HTML",
|
||||
"descriptionEs": [
|
||||
"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:",
|
||||
"<code>json.forEach(function(val) {</code>",
|
||||
"<code> var keys = Object.keys(val);</code>",
|
||||
"<code> html += \"<div class = 'cat'>\";</code>",
|
||||
"<code> keys.forEach(function(key) {</code>",
|
||||
"<code> html += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";</code>",
|
||||
"<code> });</code>",
|
||||
"<code> html += \"</div><br>\";</code>",
|
||||
"<code>});</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000004",
|
||||
@ -278,7 +327,15 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Presentar imágenes de fuentes de datos",
|
||||
"descriptionEs": [
|
||||
"Tanto en el JSON que recibimos de la API de fotos de gato de Free Code Camp, como en ",
|
||||
"lo que hemos visto en las dos últimas lecciones, 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 += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000005",
|
||||
@ -345,7 +402,16 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Pre-filtra JSON",
|
||||
"descriptionEs": [
|
||||
"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:",
|
||||
"<code>json = json.filter(function(val) {</code>",
|
||||
"<code> return(val.id !== 1);</code>",
|
||||
"<code>});</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000006",
|
||||
@ -379,7 +445,20 @@
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
"type": "waypoint",
|
||||
"nameEs": "Recibir datos de Geo-localización",
|
||||
"descriptionEs": [
|
||||
"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:",
|
||||
"<code>if (navigator.geolocation) {</code>",
|
||||
"<code> navigator.geolocation.getCurrentPosition(function(position) {</code>",
|
||||
"<code> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);</code>",
|
||||
"<code> });</code>",
|
||||
"<code>}</code>"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user