diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index e02db83980..30561572ba 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -721,7 +721,7 @@ "descriptionEs": [ "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).", "Primero, haga un llamado a Google para tomar el tipo de letra Lobster y para cargarlo en su HTML.", - "Copie la siguiente porción de código y peguela en la parte superior de su editor de texto:", + "Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Ahora establezca Lobster como valor de font-family en su elemento h2.", "Aplique la familia de fuente (font-family) Lobster a su elemento h2." @@ -787,13 +787,13 @@ "descriptionRu": [], "nameEs": "Especifique como deben degradarse los tipos de letra", "descriptionEs": [ - "Hay diversos tipos de letra por omisión disponible en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", + "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", "Cuando un tipo de letra no está disponible, puede decirle al navegador que \"degrade\" a otro tipo de letra.", "Por ejemplo, si quiere que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puede usar el siguiente estilo CSS:", "p {", "  font-family: Helvetica, Sans-Serif;", "}", - "Ahora ponga en comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." + "Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." ], "namePt": "", "descriptionPt": [], @@ -928,7 +928,7 @@ "    width: 500px;", "  }", "</style>", - "Crea una clase llamada smaller-image y utilizala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." + "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." ], "namePt": "", "descriptionPt": [], @@ -1228,7 +1228,7 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Enlaza páginas externas con elementos de anclaje", + "nameEs": "Enlaza páginas externas con elementos ancla", "descriptionEs": [ "Los elementos a, también conocido como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", @@ -1389,7 +1389,7 @@ "descriptionRu": [], "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", "descriptionEs": [ - "A veces quieres agregar elementos a a tu sitio web antes de saber que enlazarán.", + "A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.", "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, que aprenderemos más adelante.", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ], @@ -1540,9 +1540,9 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Agrega Texto alternativo a una imagen para dar Accesibilidad", + "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", "descriptionEs": [ - "Los atributos alt también conocidos como texto alternativo, son lo que se presentaran si el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", + "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", "En resumen, ¡cada imagen debe tener un atributo alt!", "Usted puede agregar un atributo alt justo en el elemento img así:", "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\">", @@ -1633,7 +1633,7 @@ "  <li>leche</li>", "  <li>queso</li>", "</ul>", - "crea una lista con viñetas con \"leche\" y \"queso\".", + "creará una lista con viñetas con \"leche\" y \"queso\".", "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." ], "namePt": "", @@ -1728,7 +1728,7 @@ "  <li>Garfield</li>", "  <li>Sylvester</li>", "</ol>", - "crea una lista numerada con \"Garfield\" y \"Sylvester\".", + "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], "namePt": "", @@ -2074,7 +2074,7 @@ "descriptionRu": [], "nameEs": "Agrega un botón Enviar a un formulario", "descriptionEs": [ - "Añadamos un elemento submit a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo actio de tu formulario. ", + "Añadamos un elemento submit a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo action de tu formulario. ", "He aquí un ejemplo de un botón de envío:", "<button type=\" submit\">este botón envía el formulario</botón>", "Agrega un botón de enviar a tu elemento form con el tipo submit y con el texto \"Submit\"." @@ -2162,7 +2162,7 @@ "nameEs": "Utiliza HTML5 para especificar campos obligatorios", "descriptionEs": [ "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que él o ella lo haya llenado.", - "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra required dentro de tu elemento input, usarías: <input type=\"text\" requiere> ", + "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra required dentro de tu elemento input, usarías: <input type=\"text\" required> ", "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.", "A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?" ], @@ -2363,7 +2363,7 @@ "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo name.", "He aquí un ejemplo de una casilla de verificación:", "<label><input type=\"checkbox\" name=\"personality\"> Cariñoso</label>", - "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Los tres deben compartir el nombre atributo personalidad ." + "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Las tres deben compartir el atributo nombre." ], "namePt": "", "descriptionPt": [], @@ -2747,7 +2747,7 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Establecer la ID de un elemento", + "nameEs": "Establecer el ID de un elemento", "descriptionEs": [ "Además de las clases, cada elemento HTML también puede tener un atributo de identificación id.", "Hay varias ventajas al usar atributos id, y aprenderás más sobre estas cuando comiences a usar jQuery.", @@ -2852,7 +2852,7 @@ "descriptionRu": [], "nameEs": "Usa un atributo ID para dar estilo a un elemento", "descriptionEs": [ - "Una buena cosa sobre los atributos id es que, al igual que con clases, puede darles estilo usando CSS.", + "Una cosa buena sobre los atributos id es que, al igual que con clases, puede darles estilo usando CSS.", "He aquí un ejemplo de cómo puede tomar su elemento con atributo id en cat-photo-element y póngale el color de fondo verde. En su elemento style: ", "#cat-photo-element {", "  background-color: green;", @@ -3007,7 +3007,7 @@ "El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.", "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Tenga en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ", "Cuando aumentas el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", - "Cambia el maregn (margin) de la caja verde para que coincida con el de la caja roja." + "Cambia el margen (margin) de la caja verde para que coincida con el de la caja roja." ], "namePt": "", "descriptionPt": [], @@ -3076,7 +3076,7 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Agregar un margen negativo a un Elemento", + "nameEs": "Agregar un margen negativo a un elemento", "descriptionEs": [ "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.", "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.", @@ -3305,7 +3305,7 @@ "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sola línea, así: ", "padding: 10px 20px 10px 20px;", "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", - "Usa la notación en sentido horario notación para darle a la clase \".green-box\" un relleno de 40px en la parte superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + "Usa la notación en sentido horario para darle a la clase \".green-box\" un relleno de 40px en la parte superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ], "namePt": "", "descriptionPt": [], @@ -3425,7 +3425,7 @@ "descriptionEs": [ "Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.", "Cada página HTML tiene un cuerpo (body).", - "Podemos demostrar que el elemento (body) aquí, dandole un color de fondo (background-color) negro.", + "Podemos demostrar que el elemento (body) existe aquí, dandole un color de fondo (background-color) negro.", "Podemos hacer esto añadiendo lo siguiente a nuestro elemento style:", "body {", "  background-color: black;", @@ -3473,10 +3473,10 @@ "descriptionRu": [], "nameEs": "Hereda estilos del elemento cuerpo", "descriptionEs": [ - "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS a su elemento body.", - "Recuerda, que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredará sus estilos de tu elemento body.", + "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.", + "Recuerda, que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.", "En primer lugar, crea un elemento h1 con el texto Hello World", - "Después, vamos a darle a todos los elementos de tu página el color vere (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", + "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elmento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." ], "namePt": "", @@ -3571,8 +3571,8 @@ "Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", "Acabamos de demostrar que nuestras clases anularán el CSS del elemento body. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase pink-text?", "Crea una clase CSS adicional llamada texto-azul que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase pink-text. ", - "Aplica la clase blue-text a tu elementou h1 además de tu clase pink-text y veamos cual gana.", - "La aplicación de múltiple atributos de clase a un elemento HTML se hace usando espacios entre ellas así:", + "Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text y veamos cual gana.", + "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", "class=\"clase1 clase2\"" ], "namePt": "", @@ -3631,7 +3631,7 @@ "descriptionEs": [ "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ", "Pero no hemos terminado todavía. Hay otras maneras que usted puede anular CSS. ¿Te acuerdas de los atributos id?", - "Anulemos tus clases pink-text y blue-text, y pongamos anaranjado tu elemento h1, dandole una identificación al elemento h1 y poniendole estilo a esa identificación (id).", + "Anulemos tus clases pink-text y blue-text, y pongamos anaranjado tu elemento h1, dándole una identificación al elemento h1 y poniéndole estilo a esa identificación (id).", "Dale a tu elemento h1 el atributo id con valor orange-text. Recuerda, los estilos id se ven así: ", "<h1 id=\"orange-text\">", "Deja las clases blue-text y pink-text de tu elemento h1.", @@ -3689,11 +3689,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Anula declaraciones de clase con un estilos en línea", + "nameEs": "Anula declaraciones de clase con estilos en línea", "descriptionEs": [ "Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS style.", "Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?", - "Utiliza un in-line style para tratar de hacer blanco nuestro elemento h1. Recuerda, los estílos en línea se ven así: ", + "Utiliza un in-line style para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", "<h1 style=\"color: green\">", "Deja las clases blue-text y pink-text en tu elmento h1." ], @@ -3873,7 +3873,7 @@ "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de rojo los elementos", "descriptionEs": [ - "Te puede estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", + "Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", "¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ", "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el valor más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).", @@ -3991,7 +3991,7 @@ "descriptionEs": [ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", - "Hacer que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" ], "namePt": "", "descriptionPt": [], @@ -4025,11 +4025,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Usa código hex para mezclar colores", + "nameEs": "Usa el código hexadecimal para colorear de gris los elementos", "descriptionEs": [ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", - "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", - "Hacer que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", + "Hacer que el color de fondo del elemento body sea gris, dándole el código hexadecimal #808080" ], "namePt": "", "descriptionPt": [], @@ -4062,11 +4062,10 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Usa el código hexadecimal para los colorear de gris los elementos", + "nameEs": "Usa el código hexadecimal para colorear con tonos grises", "descriptionEs": [ - "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", - "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", - "Hacer que el color de fondo dele elemento body sea gris, dándole el código hexadecimal #808080" + "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", + "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" ], "namePt": "", "descriptionPt": [], @@ -4101,10 +4100,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Usa el código hexadecimal para colorear con tonos grises", + "nameEs": "Uso código hex abreviado", "descriptionEs": [ - "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", - "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" + "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, usted puede acortarlo. ", + "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", + "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", + "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." ], "namePt": "", "descriptionPt": [], @@ -4143,13 +4144,18 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Uso código hex abreviado", + "nameEs": "Usa RGB para colorear elementos", "descriptionEs": [ - "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, usted puede acortarlo. ", - "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", - "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", - "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." + "Otra forma en la que puedes representar colores en CSS es usando valores rgb.", + "El valor RGB para el negro, luce así:", + "rgb(0, 0, 0)", + "El valor RGB para el blanco, se ve así:", + "rgb(255, 255, 255)", + "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", + "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", + "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" ], + "namePt": "", "descriptionPt": [], "nameDe": "", @@ -4185,7 +4191,7 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Usa RGB para colorear de blanco los elementos", + "nameEs": "Usa RGB para colorear de blanco los elementos", "descriptionEs": [ "El valor RGB para el negro, luce así:", "rgb(0, 0, 0)", @@ -4298,7 +4304,7 @@ "descriptionRu": [], "nameEs": "Usa RGB para colorear de azul los elementos", "descriptionEs": [ - "Cambuia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" + "Cambia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" ], "namePt": "", "descriptionPt": [],