From 2106da68900da1294470df9d1243d6226225c9cb Mon Sep 17 00:00:00 2001 From: justinian336 Date: Sun, 29 Nov 2015 02:18:42 +0000 Subject: [PATCH] Add ES translation of bootstrap waypoints. Thanks to @vtamara for the revision --- seed/challenges/bootstrap.json | 259 +++++++++++++++++++++++++-------- 1 file changed, 197 insertions(+), 62 deletions(-) diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json index ef672fb6ee..604b932096 100644 --- a/seed/challenges/bootstrap.json +++ b/seed/challenges/bootstrap.json @@ -84,8 +84,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap", + "descriptionEs": [ + "Ahora vamos de vuelta a nuestra aplicación de fotos de gatos. Esta vez, vamos a darle estilo utilizando la infraestructura CSS del popular Bootstrap.", + "Bootstrap determina qué tan ancha es la pantalla y adapta correspondientemente el tamaño de tus elementos HTML - por eso es que se llama Diseño adaptativo (responsive design).", + "Con diseño adaptativo, no hay necesidad de diseñar una versión móvil para tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.", + "Puedes agregar Bootstrap a cualquier aplicación simplemente incluyéndolo agregando el siguiente código al inicio de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", + "En este caso, lo hemos agregado a esta página por ti.", + "Para iniciar, debemos anidar todo nuestro HTML en un elemento div con la clase container-fluid." + ], "namePt": "", "descriptionPt": [] }, @@ -170,8 +178,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Haz que las imágenes sean adaptativas en dispositivos móviles", + "descriptionEs": [ + "Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo src sea http://bit.ly/fcc-running-cats.", + "Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.", + "Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase img-responsive a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página." + ], "namePt": "", "descriptionPt": [] }, @@ -254,8 +266,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Centra el texto con Bootstrap", + "descriptionEs": [ + "Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase text-center a nuestro elemento h2.", + "Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:", + "<h2 class=\"red-text text-center\">your text</h2>" + ], "namePt": "", "descriptionPt": [] }, @@ -339,8 +355,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un botón con Bootstrap", + "descriptionEs": [ + "Bootstrap tiene sus propios estilos para elementos button, los cuales se ven mejor que los estilos simples de HTML.", + "Crea un nuevo elemento button debajo de tu foto grande del gatito. Dale la clase btn y el texto \"Like\"." + ], "namePt": "", "descriptionPt": [] }, @@ -427,8 +446,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un elemento botón de bloque con Bootstrap", + "descriptionEs": [ + "Normalmente, tus elementos button son sólo tan anchos como el texto que contienen. Al convertir un botón en elemento a nivel de bloque, este se estirará para llenar todo el espacio horizontal y cualquier elemento que lo siga se desplazará a una \"nueva línea\" debajo del bloque.", + "Esta imagen es un ejemplo de la diferencia entre elementos en línea (inline) y elementos a nivel de bloque (block-level):", + "\"Un", + "Ten en cuenta que estos botones todavía necesitan la clase btn.", + "Agrega la clase de Bootstrap btn-block a tu botón Bootstrap." + ], "namePt": "", "descriptionPt": [] }, @@ -513,8 +538,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap", + "descriptionEs": [ + "La clase btn-primary es el color principal que utilizarás en tu aplicación. Es útil resaltar las acciones que quieres que tu usuario ejecute.", + "Agrega la clase btn-primary de Bootstrap a tu botón.", + "Ten en mente que este botón todavía necesita las clases btn y btn-block." + ], "namePt": "", "descriptionPt": [] }, @@ -600,8 +629,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Señala acciones opcionales con botones informativos", + "descriptionEs": [ + "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-info se utiliza para llamar la atención a acciones opcionales que el usuario puede tomar.", + "Crea un nuevo botón a nivel de bloque de Bootstrap debajo de tu botón de \"Like\" con el texto \"Info\", y agrégale las clases de Bootstrap btn-info y btn-block.", + "Ten en mente que estos botones todavía necesitan las clases btn y btn-block." + ], "namePt": "", "descriptionPt": [] }, @@ -688,8 +721,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Advierte a tus usuarios sobre acciones peligrosas", + "descriptionEs": [ + "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-danger es el color de botón que usarías para notificar a los usuarios que el botón ejecuta una acción destructiva, como por ejemplo eliminar la foto de un gato.", + "Crea un botón con el texto \"Delete\" y dale la clase btn-danger.", + "Recuerda que estos botones todavía requieren las clases btn y btn-block." + ], "namePt": "", "descriptionPt": [] }, @@ -781,8 +818,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado", + "descriptionEs": [ + "Bootstrap utiliza un sistema de cuadrícula adaptativa que facilita el poner elementos en fila y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento div.", + "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", + "\"una", + "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.", + "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", + "Pon los botones de Like, Info y Delete lado a lado. Esto se hace anidando los tres botones dentro de un elemento <div class=\"row\">, y luego cada uno de ellos dentro de un elemento <div class=\"col-xs-4\">.", + "La clase row se aplica al elemento div, dentro del cual van anidados los botones." + ], "namePt": "", "descriptionPt": [] }, @@ -881,8 +926,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Reemplaza el CSS personalizado por Bootstrap", + "descriptionEs": [ + "Podemos limpiar nuestro código y hacer que nuestra aplicación de fotos de gatos se vea más convencional, usando los estilos pre-construidos de Bootstrap, en lugar de los estilos personalizados que creamos antes.", + "No te preocupes, luego habrá más tiempo para personalizar nuestro CSS.", + "Elimina las declaraciones CSS .red-text, p, y .smaller-image de tu elemento style, de forma que las únicas declaraciones que queden en tu elemento style sean h2 y thick-green-border.", + "Luego elimina el elemento p que contiene un enlace nulo. Después, elimina la clase red-text de tu elemento h2 y reemplázalo con la clase text-primary de Bootstrap.", + "Por último, elimina la clase \"smaller-image\" de tu primer elemento img y reemplázalo con la clase img-responsive." + ], "namePt": "", "descriptionPt": [] }, @@ -969,8 +1020,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa span para elementos en línea", + "descriptionEs": [ + "Puedes utilizar span para crear elementos en línea. ¿Recuerdas cuando usamos la clase btn-block para hacer que el botón llenara toda la línea?", + "Esta imagen ilustra la diferencia entre elementos en línea (inline) y elementos a nivel de bloque (block-level):", + "\"Un", + "Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", + "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", + "Así es como lo harías con el elemento \"Top 3 things cats hate\":", + "<p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" + ], "namePt": "", "descriptionPt": [] }, @@ -1057,8 +1116,17 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un encabezado personalizado", + "descriptionEs": [ + "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.", + "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento div.", + "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", + "\"una", + "En esta ilustración se está utilizando la clase col-md-*. Aquí, md significa mediano, y * es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.", + "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", + "Anida tu primera imagen y tu elemento h2 dentro de un solo elemento <div class=\"row\">. Anida tu texto h2 dentro de un <div class=\"col-xs-8\"> y tu imagen en un <div class=\"col-xs-4\"> de tal forma que estén en la misma línea.", + "¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?" + ], "namePt": "", "descriptionPt": [] }, @@ -1141,8 +1209,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega iconos de Font Awesome a los botones", + "descriptionEs": [ + "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." + ], "namePt": "", "descriptionPt": [] }, @@ -1225,8 +1296,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega Font Awesome a todos los botones", + "descriptionEs": [ + "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Utiliza Font Awesome para agregar un icono info-circle a tu botón informativo y un icono trash a tu botón de eliminar." + ], "namePt": "", "descriptionPt": [] }, @@ -1309,8 +1383,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea botones de opción con estilo adaptativo", + "descriptionEs": [ + "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.", + "Anida todos los botones de opción dentro de un elemento <div class=\"row\">. Luego, anida cada uno de ellos dentro de un elemento <div class=\"col-xs-6\">." + ], "namePt": "", "descriptionPt": [] }, @@ -1400,8 +1477,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea casillas de selección con estilo adaptativo", + "descriptionEs": [ + "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.", + "Anida todas las casillas de selección en un elemento <div class=\"row\">. Luego, anida cada una de ellas en un elemento <div class=\"col-xs-4\">." + ], "namePt": "", "descriptionPt": [] }, @@ -1500,8 +1580,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Estiliza cajas de texto como controles de formulario", + "descriptionEs": [ + "Puedes agregar el icono fa-paper-plane de Font Awesome incluyendo <i class=\"fa fa-paper-plane\"></i> dentro de tu elemento button de envío.", + "Dale a la entrada de texto de tu formulario la clase form-control. Dale al botón de envío de tu formulario las clases btn btn-primary. También, incluye en ese botón el icono fa-paper-plane de Font Awesome." + ], "namePt": "", "descriptionPt": [] }, @@ -1601,8 +1684,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap", + "descriptionEs": [ + "Ahora vamos a poner el elemento input y el elemento button que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento div con la clase row, y otros elementos div dentro de ese, usando la clase col-xs-*.", + "Anida ambos, el elemento input y el elemento button que dice submit de tu formulario dentro de un div con la clase row. Anida el elemento input de tu formulario dentro de un div con cla clase col-xs-7. Anida el elemento button que dice submit de tu formulario en un elemento div con la clase col-xs-5.", + "¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!" + ], "namePt": "", "descriptionPt": [] }, @@ -1635,8 +1722,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un encabezado con Bootstrap", + "descriptionEs": [ + "Ahora vamos a comenzar un proyecto desde cero para practicar nuestras habilidades con HTML, CSS y Bootstrap.", + "Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.", + "Para empezar, crea un elemento h3, con el texto jQuery Playground.", + "Ponle color a tu elemento h3 con la clase text-primary de Bootstrap, y céntrala con la clase text-center de Bootstrap." + ], "namePt": "", "descriptionPt": [] }, @@ -1664,8 +1756,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap", + "descriptionEs": [ + "Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.", + "Anida tu elemento h3 dentro de un elemento div con la clase container-fluid." + ], "namePt": "", "descriptionPt": [] }, @@ -1697,8 +1792,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea una fila en Bootstrap", + "descriptionEs": [ + "Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.", + "Crea un elemento div debajo de la etiqueta h3, con la clase row." + ], "namePt": "", "descriptionPt": [] }, @@ -1730,8 +1828,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Parte tu fila en Bootstrap", + "descriptionEs": [ + "Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.", + "Crea dos elementos div dentro de tu fila, ambos con la clase col-xs-6." + ], "namePt": "", "descriptionPt": [] }, @@ -1768,8 +1869,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea pozos en Bootstrap", + "descriptionEs": [ + "Bootstrap tiene una clase llamada well que crea una sensación visual de profundidad para tus columnas.", + "Anida un elemento div con la clase well dentro de cada uno de tus elementos div que tienen la clase col-xs-6." + ], "namePt": "", "descriptionPt": [] }, @@ -1814,8 +1918,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega elementos dentro de los pozos de Bootstrap", + "descriptionEs": [ + "Ahora estamos a una profundidad de varios elementos div dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos button.", + "Anida tres elementos button dentro de cada uno de tus elementos div que tienen la clase well." + ], "namePt": "", "descriptionPt": [] }, @@ -1859,8 +1966,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Aplica el estilo de botón predeterminado de Bootstrap", + "descriptionEs": [ + "Bootstrap tiene otra clase de botón llamada btn-default.", + "Aplica las clases btn y btn-default a cada uno de tus elementos button." + ], "namePt": "", "descriptionPt": [] }, @@ -1903,8 +2013,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea una clase para usar con selectores de jQuery", + "descriptionEs": [ + "No todas las clases necesitan tener un código CSS correspondiente. A veces creamos clases sólo con el propósito de seleccionar esos elementos más fácilmente usando jQuery.", + "Dale a cada uno de tus elementos button la clase target." + ], "namePt": "", "descriptionPt": [] }, @@ -1952,8 +2065,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap", + "descriptionEs": [ + "Recuerda que, además de los atributos de clase, también puedes darle a cada uno de tus elementos un atributo id.", + "Cada id debe ser único para un elemento específico y ser usado solamente una vez por página.", + "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", + "Recuerda que puedes darle a un elemento un id como el siguiente:", + "<div class=\"well\" id=\"center-well\">", + "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well." + ], "namePt": "", "descriptionPt": [] }, @@ -2002,8 +2122,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Etiqueta tus pozos de Bootstrap", + "descriptionEs": [ + "Para que todo esté más claro, vamos a ponerle a todos nuestros pozos una etiqueta que sea igual a su id.", + "Sobre tu pozo de la izquierda, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #left-well.", + "Ahora, sobre tu pozo de la derecha, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #right-well." + ], "namePt": "", "descriptionPt": [] }, @@ -2053,8 +2177,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Dale a cada elemento un ID único", + "descriptionEs": [ + "También quisiéramos referirnos a cada botón por su id utilizando jQuery.", + "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6." + ], "namePt": "", "descriptionPt": [] }, @@ -2104,8 +2231,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Etiqueta los botones con Bootstrap", + "descriptionEs": [ + "De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.", + "Dale a cada uno de tus elementos button un texto que corresponda con su id." + ], "namePt": "", "descriptionPt": [] }, @@ -2154,8 +2284,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa elementos para explicar tu código", + "descriptionEs": [ + "Cuando comencemos a usar jQuery, modificarmemos los elementos HTML sin necesidad de hacer cambios reales en el código HTML.", + "Vamos a asegurarnos de que cualquier persona sepa que no deben modificar nada en este código directamente.", + "Recuerda que puedes iniciar un comentario usando <!-- y terminarlo usando -->", + "Agrega un comentario al inicio de tu código HTML que diga No hacer cambios en el código debajo de esta línea." + ], "namePt": "", "descriptionPt": [] }