Fix(curriculum): Added Spanish translations and corrected grammar issues (#37799)

* Fix(curriculum): Added Spanish translations and corrected grammar issues

* Fixed typos and added Spanish translations

Co-authored-by: sebastiansaenz <52339334+sebastiansaenz@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Sebastián
2019-12-22 16:49:25 -03:00
committed by Randell Dawson
parent 98edb4675c
commit da38c969b2
23 changed files with 201 additions and 175 deletions

View File

@@ -8,7 +8,7 @@ localeTitle: Añadir un texto alternativo a las imágenes para que sean accesibl
---
## Descripción
<section id="description"> Es probable que hayas visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. En este contexto, <code>alt</code> significa texto alternativo y se utiliza para describir el contenido de la imagen y/o proporcionar un texto alternativo que se mostraría en caso de que la imagen no cargue correctamente o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender cual es el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> Las personas con discapacidades visuales dependen de los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si sólo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo <code>alt</code> y leer su contenido para entregar información clave. Un buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Esto es considerado actualmente obligatorio en la especificación HTML5. </section>
<section id="description"> Es probable que hayas visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. En este contexto, <code>alt</code> significa texto alternativo y se utiliza para describir el contenido de la imagen y/o proporcionar un texto alternativo que se mostraría en caso de que la imagen no cargue correctamente o no pueda ser vista por un usuario. También es utilizado por los moçtores de búsqueda para comprender cuál es el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> Las personas con discapacidades visuales dependen de los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si sólo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo <code>alt</code> y leer su contenido para entregar información clave. Un buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Esto es considerado actualmente obligatorio en la especificación HTML5. </section>
## Instrucciones
<section id="instructions"> Resulta que Camper Cat es tanto un ninja programador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo <code>alt</code> en la etiqueta <code>img</code> que explique que Camper Cat está haciendo karate. (La imagen <code>src</code> no está vinculada a ningún archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla). </section>
@@ -47,4 +47,5 @@ tests:
```js
// solución requerida
```
</section>

View File

@@ -42,7 +42,7 @@ tests:
</header>
<main>
<section>
<h2>Encuesta para el Toneo de Mortal Kombat</h2>
<h2>Encuesta para el Torneo de Mortal Kombat</h2>
<form>
<p>Indicanos la mejor fecha para esta competencia</p>
<label for="pickdate">Fecha preferida:</label>
@@ -72,6 +72,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -3,14 +3,14 @@ id: 587d778f367417b2b2512aad
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
challengeType: 0
videoUrl: ''
localeTitle: Evite de dar problemas a los usuarios daltonicos elegiendo cuidadosamente los colores que transmiten información
localeTitle: Evite darle problemas a los usuarios daltónicos eligiendo cuidadosamente los colores que proporcionan información
---
## Description
<section id="description"> Existen varias formas de daltonismo. Éstos pueden ser desde una reducida sensibilidad hacia cierta longitud de onda luminosa hasta la incapacidad de distinguir el color completamente. La forma más común es una sensibilidad reducida para detectar el color verde. Por ejemplo, si dos colores verdes similares son el color de primer plano y de fondo de su contenido, es posible que un usuario daltónico no pueda distinguirlos. Los colores similares pueden considerarse vecinos en la rueda de colores, y esas combinaciones deben evitarse cuando se transmite información importante. <strong>Nota</strong> <br> Algunas herramientas de selección de color en línea incluyen simulaciones visuales de cómo aparecen los colores para diferentes tipos de daltonismo. Éstos son recursos en línea excelentes, además de las calculadoras de comprobación de contraste. </section>
<section id="description"> Existen varias formas de daltonismo. Éstas pueden ir desde una reducida sensibilidad a cierta longitud de onda luminosa hasta la incapacidad de distinguir el color completamente. La forma más común es una sensibilidad reducida para detectar el color verde. Por ejemplo, si dos colores verdes similares son el color de primer plano y de fondo de su contenido, es posible que un usuario daltónico no pueda distinguirlos. Los colores similares pueden considerarse vecinos en la rueda de colores, y esas combinaciones deben evitarse cuando se transmite información importante. <strong>Nota</strong> <br> Algunas herramientas de selección de color en línea incluyen simulaciones visuales de cómo aparecen los colores para diferentes tipos de daltonismo. Éstos son recursos excelentes, además de las calculadoras de comprobación de contraste en línea. </section>
## Instructions
<section id="instructions"> Camper Cat está probando diferentes estilos para un botón importante, pero el color <code>background-color</code> amarillo ( <code>#FFFF33</code> ) y el color de texto verde ( <code>#33FF33</code> ) son tonalidades vecinas <code>#33FF33</code> en la rueda de colores y prácticamente indistinguibles para algunos usuarios daltónicos. <code>#33FF33</code> <code>color</code> . (la luminosidad similar también falla la comprobación del nivel de contraste). Cambie el <code>color</code> del texto a azul oscuro ( <code>#003366</code> ) para resolver ambos problemas. </section>
<section id="instructions"> Camper Cat está probando diferentes estilos para un botón importante, pero el color <code>background-color</code> amarillo ( <code>#FFFF33</code> ) y el color de texto verde ( <code>#33FF33</code> ) son tonalidades vecinas <code>#33FF33</code> en la rueda de colores y prácticamente indistinguibles para algunos usuarios daltónicos. <code>#33FF33</code> <code>color</code> . (Su luminosidad similar hace que también falle la comprobación del nivel de contraste). Cambie el <code>color</code> del texto a azul oscuro ( <code>#003366</code> ) para resolver ambos problemas. </section>
## Tests
<section id='tests'>
@@ -42,9 +42,9 @@ tests:
</head>
<body>
<header>
<h1>Danger!</h1>
<h1>Peligro!</h1>
</header>
<button>Delete Internet</button>
<button>Borrar la Internet</button>
</body>
```
@@ -59,6 +59,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -9,14 +9,14 @@ localeTitle: Evita Problemas de Daltonismo Usando Suficiente Contraste
## Descripción
<section id="description"> El color es una parte muy importante del diseño visual, pero su uso presenta dos problemas de accesibilidad. Primero, no debe usarse solo el color como la única forma de transmitir información importante porque los lectores de pantalla no pueden detectarlo. En segundo lugar, los colores de fondo y de primer plano necesitan el contraste suficiente para que los usuarios con daltonismo los puedan distinguir.
Los desafíos anteriores cubren alternativas para el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar a resolver el segundo. La WCAG recomienda una proporción de contraste de 4.5:1, aplica tanto para uso con colores como para uso con escala de grises.
Los desafíos anteriores cubren alternativas para el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar a resolver el segundo. La proporción de contraste de 4.5:1 recomendada por la WCAG aplica tanto para su uso con colores como para su uso con escala de grises.
Los usuarios con daltonismo tienen problemas para distinguir algunos colores de otros, usualmente en el matíz pero también puede suceder con el brillo. Tal vez recuerdes que el contraste se calcula usando los valores del brillo relativo del color de fondo y del color en el primer plano.
Los usuarios con daltonismo tienen problemas para distinguir algunos colores de otros, usualmente en el matiz pero también puede suceder con el brillo. Tal vez recuerdes que el contraste se calcula usando los valores del brillo relativo del color de fondo y del color en el primer plano.
En la práctica la proporción de 4.5:1 puede obtenerse oscureciendo el color más oscuro y aclarando el más claro con la ayuda de una herramienta de comprobación de contraste. Los colores más oscuros en la rueda de colores son los azules, violetas, magentas y rojos, mientras que los colores más claros son los naranjas, amarillos, verdes y verde-azules. </section>
## Instrucciones
<section id="instructions"> Gato camper está experimentando con el uso de color de fondo y color de texto de su blog, pero su combinación actual de un color de fondo verdoso <code>background-color</code> con un color de texto marrón <code>color</code> tiene una proporción de 2.5:1 de contraste. Puedes ajustar fácilmente el brillo de los colores gracias a que usó la propiedad CSS <code>hsl()</code> para declararlos modificando el valor del tercer argumento (hsl viene de: hue, saturation, lightness. Que significa: matiz, saturación, brillo). Aumenta el brillo del <code>background-color</code> de 35% a 55%, y reduce el brillo del <code>color</code> de 20% a 15%. Esto mejora la proporción de contraste a 5.9:1. </section>
<section id="instructions"> Camper Cat está experimentando con el uso de color de fondo y color de texto de su blog, pero su combinación actual de un color de fondo verdoso <code>background-color</code> con un color de texto marrón <code>color</code> tiene una proporción de 2.5:1 de contraste. Puedes ajustar fácilmente el brillo de los colores ya que usó la propiedad CSS <code>hsl()</code> para declararlos modificando el valor del tercer argumento (hsl viene de: hue, saturation, lightness; en español, matiz, saturación y brillo). Aumenta el brillo del <code>background-color</code> de 35% a 55%, y reduce el brillo del <code>color</code> de 20% a 15%. Esto mejora la proporción de contraste a 5.9:1. </section>
## Tests
<section id='tests'>
@@ -48,12 +48,12 @@ tests:
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos profundos con el maestro Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
<h2>Unas Palabras sobre el Reciente Escándalo de Doping de Catnip</h2>
<p>La influencia que tiene el catnip sobre el comportamiento felino ha sido bien documentada, y su uso como suplemento herbario en círculos ninja de competición sigue siendo controvertido aún hoy en día. Una vez más, el debate sobre la prohibición de la sustancia se ha presentado en la opinión pública luego de la gran victoria de Kittytron, acérrimo defensor y consumidor de la sustancia verde, en el Torneo de la Garra de la Furia.</p>
<p>Como ya me he pronunciado en el pasado, creo firmemente que las habilidades de un verdades ninja deben venir de su interior, sin ninguna influencia externa. Mi consumo personal de catnip es y seguirá siendo puramente recreativo.</p>
</article>
</body>
@@ -69,6 +69,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -3,11 +3,11 @@ id: 587d778f367417b2b2512aae
title: Give Links Meaning by Using Descriptive Link Text
challengeType: 0
videoUrl: ''
localeTitle: Dar Significado a Enlaces Usando Texto Descriptivo en el Enlace
localeTitle: Darle Significado a los Enlaces Usando Texto Descriptivo
---
## Descripción
<section id="description"> Los usuarios de lectores de pantalla tienen diferentes opciones para el tipo de contenido que lee su dispositivo. Esto incluye saltar a (o sobre) elementos de hito, saltar al contenido principal u obtener un resumen de la página de los encabezados. Otra opción es escuchar solo los enlaces disponibles en una página. Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que hay entre las etiquetas ancla ( <code>a</code> ). Tener una lista de enlaces &quot;haga clic aquí&quot; o &quot;leer más&quot; no es útil. En su lugar, debemos utilizar un texto breve pero descriptivo dentro de las etiquetas <code>a</code> para proporcionar más contexto a estos usuarios. </section>
<section id="description"> Los usuarios de lectores de pantalla tienen diferentes opciones para el tipo de contenido que lee su dispositivo. Esto incluye saltar a (o sobre) elementos de hito, saltar al contenido principal u obtener un resumen de la página de los encabezados. Otra opción es solo escuchar los enlaces disponibles en una página. Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que hay entre las etiquetas ancla ( <code>a</code> ). Tener una lista de enlaces de &quot;haga clic aquí&quot; o &quot;leer más&quot; no es útil. En su lugar, debemos utilizar un texto breve pero descriptivo dentro de las etiquetas <code>a</code> para proporcionar más contexto a estos usuarios. </section>
## Instrucciones
<section id="instructions"> El texto del enlace que está utilizando Camper Cat no es muy descriptivo sin el contexto que lo rodea. Mueve las etiquetas de anclaje ( <code>a</code> ) para que envuelvan el texto &quot;información sobre baterías&quot; en lugar de &quot;Haga clic aquí&quot;. </section>
@@ -54,6 +54,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -47,10 +47,10 @@ tests:
```html
<body>
<header>
<h1>Real Coding Ninjas</h1>
<h1>Verdaderos Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
<p>Un clip de sonido del lector de pantalla de Zersiax en acción.</p>
@@ -69,6 +69,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -42,41 +42,41 @@ tests:
```html
<body>
<header>
<h1>Training</h1>
<h1>Entrenamiento</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
<li><a href="#stealth">Sigilo &amp; Agilidad</a></li>
<li><a href="#combat">Combate</a></li>
<li><a href="#weapons">Armas</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- Add your code below this line -->
<!-- Agrega tu código debajo de esta línea -->
<div>
<!-- Stacked bar chart will go here -->
<!-- El gráfico de barras irá aquí -->
<br>
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
<p>Desglose por semana del tiempo destinado a entrenar sigilo, combate y armas.</p>
</div>
<!-- Add your code above this line -->
<!-- Agrega tu código por encima de esta línea -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
<h2>Entrenamiento Sigilo &amp; Agilidad</h2>
<article><h3>Trepa el follaje rápidamente usando la técnica del árbol recubridor mínimo (Minimum Spanning Tree)</h3></article>
<article><h3>Ningún entrenamiento es NP-completo sin parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
<h2>Entrenamiento de Combate</h2>
<article><h3>Despacha múltiples enemigos con tácticas multi-hilo</h3></article>
<article><h3>Adiós, mundo: 5 maneras comprobadas de aniquilar a tu oponente</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
<h2>Entrenamiento de Armas</h2>
<article><h3>Espadas: la mejor herramienta para literalmente dividir y triunfar</h3></article>
<article><h3>Breadth-first (amplitud) o depth-first (profundidad) en entrenamiento multi-arma?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
@@ -94,6 +94,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -34,11 +34,11 @@ tests:
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<p>¡Suscríbete aquí para recibir los posts del blog de Camper Cat por email!</p>
<label>Email:</label>
@@ -49,18 +49,18 @@ tests:
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
<h2>Los Archivos Garfield: ¿Lasagna como Combustible de Entrenamiento?</h2>
<p>Internet está repleto de diversas opiniones sobre los paradigmas nutricionales, desde catnip paleo hasta limpieza de bolas de pelos. Pero pongamos ahora nuestra atención en un combustible del bienestar físico muchas veces olvidado, y examinemos la trifecta proteína-carbohidrato-NOM que es la lasagna... </p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
<h2>Venciendo a tu Rival: el Punto Rojo es Nuestro!</h2>
<p>Felinos de todo el mundo vienen dándole batalla a uno de los rivales más persistentes. Este némesis colorado combina un sigilo ingenioso con la velocidad del rayo. Pero anímense, compañeros luchadores, nuestra victoria está cerca...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
<h2>Es Chuck Norris un Hombre Gato?</h2>
<p>Chuck Norris es ampliamente reconocido como el primer artista marcial del planeta, y es una completa coincidencia que todo aquel que no opina lo mismo desaparece misteriosamente poco tiempo después. Pero la verdadera pregunta es: es un hombre gato?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
@@ -77,6 +77,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Mejora la legibilidad con texto de alto contraste
---
## Description
<section id="description"> El bajo contraste entre los colores de fondo y de primer plano puede dificultar la lectura del texto. Un contraste suficiente mejora la legibilidad de su contenido, pero ¿qué significa exactamente &quot;suficiente&quot;? Las Pautas de Accesibilidad al Contenido en la Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación para usted. </section>
<section id="description"> El bajo contraste entre los colores de fondo y de primer plano puede dificultar la lectura del texto. Un contraste correcto mejora la legibilidad de su contenido, pero ¿qué significa exactamente &quot;suficiente&quot;? Las Pautas de Accesibilidad al Contenido en la Web (WCAG por sus siglas en inglés) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que pueden serte de ayuda para calcular esta relación. </section>
## Instructions
<section id="instructions"> La elección del texto gris claro de Camper Cat sobre un fondo blanco para su reciente publicación en el blog tiene una relación de contraste de 1.5: 1, lo que dificulta su lectura. Cambie el <code>color</code> del texto del gris actual ( <code>#D3D3D3</code> ) a un gris más oscuro ( <code>#636363</code> ) para mejorar la relación de contraste a 6: 1. </section>
@@ -42,12 +42,12 @@ tests:
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
<h2>Unas Palabras sobre el Reciente Escándalo de Doping de Catnip</h2>
<p>La influencia que tiene el catnip sobre el comportamiento felino ha sido bien documentada, y su uso como suplemento herbario en círculos ninja de competición sigue siendo controvertido aún hoy en día. Una vez más, el debate sobre la prohibición de la sustancia se ha presentado en la opinión pública luego de la gran victoria de Kittytron, acérrimo defensor y consumidor de la sustancia verde, en el Torneo de la Garra de la Furia.</p>
<p>Como ya me he pronunciado en el pasado, creo firmemente que las habilidades de un verdades ninja deben venir de su interior, sin ninguna influencia externa. Mi consumo personal de catnip es y seguirá siendo puramente recreativo.</p>
</article>
</body>
@@ -63,6 +63,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,10 +7,10 @@ localeTitle: Ir directamente al contenido usando el elemento principal
---
## Description
<section id="description"> HTML5 introdujo una serie de nuevos elementos que brindan a los desarrolladores más opciones al tiempo que incorporan funciones de accesibilidad. Estas etiquetas incluyen <code>main</code> , <code>header</code> , <code>footer</code> , <code>nav</code> , <code>article</code> y <code>section</code> , entre otras. Por defecto, un navegador presenta estos elementos de manera similar a la humble <code>div</code> . Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página o opciones de navegación para sus usuarios. El elemento <code>main</code> se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners. La etiqueta <code>main</code> también tiene una característica de hito incorporada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace &quot;Ir al contenido principal&quot; en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. </section>
<section id="description"> HTML5 introdujo una serie de nuevos elementos que brindan a los desarrolladores más opciones al tiempo que incorporan funciones de accesibilidad. Estas etiquetas incluyen <code>main</code> , <code>header</code> , <code>footer</code> , <code>nav</code> , <code>article</code> y <code>section</code> , entre otras. Por defecto, un navegador presenta estos elementos de manera similar al humilde <code>div</code> . Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página u opciones de navegación para sus usuarios. El elemento <code>main</code> se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners. La etiqueta <code>main</code> también tiene un punto de referencia incorporado que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace &quot;Ir al contenido principal&quot; en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. </section>
## Instructions
<section id="instructions"> Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo a establecer su margen añadiendo etiquetas <code>main</code> de apertura y de cierre entre la etiqueta <code>header</code> y <code>footer</code> (cubierto en otros desafíos). Mantener las etiquetas <code>main</code> vacías por ahora. </section>
<section id="instructions"> Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo a establecer su margen de beneficio mediante la adición de apertura y cierre de etiquetas <code>main</code> entre la <code>header</code> y <code>footer</code> (como se vio en otros desafíos). Mantener las etiquetas <code>main</code> vacías por ahora. </section>
## Tests
<section id='tests'>
@@ -33,7 +33,7 @@ tests:
```html
<header>
<h1>Weapons of the Ninja</h1>
<h1>Las Armas del Ninja</h1>
</header>
@@ -52,6 +52,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,10 +7,10 @@ localeTitle: Sepa cuándo el texto alternativo debe dejarse en blanco
---
## Description
<section id="description"> En el último desafío, aprendiste que incluir un atributo <code>alt</code> en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto <code>alt</code> puede parecer redundante o innecesario. En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el <code>img</code> aún necesita un atributo <code>alt</code> , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> Las imágenes de fondo también suelen caer bajo la etiqueta &#39;decorativa&#39;. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. <strong>Nota</strong> <br> Para imágenes con un título, es posible que desee incluir texto <code>alt</code> , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen. </section>
<section id="description"> En el último desafío, aprendiste que incluir un atributo <code>alt</code> en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto <code>alt</code> puede parecer redundante o innecesario. En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el <code>img</code> aún necesita un atributo <code>alt</code> , pero se puede establecer en un string vacío. Aquí hay un ejemplo: <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> Las imágenes de fondo también suelen caer bajo la etiqueta &#39;decorativa&#39;. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. <strong>Nota</strong> <br> Para imágenes con un título, es posible que desee incluir texto <code>alt</code> , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen. </section>
## Instructions
<section id="instructions"> Camper Cat ha codificado el esqueleto de una página para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo <code>alt</code> a la etiqueta <code>img</code> y establézcalo en una cadena de texto vacía. (Tenga en cuenta que la imagen <code>src</code> no se enlaza con un archivo real, no se preocupe si no se ven espadas en la pantalla). </section>
<section id="instructions"> Camper Cat ha codificado el esqueleto de una página para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo <code>alt</code> a la etiqueta <code>img</code> y establézcalo enun string vacío. (Tenga en cuenta que la imagen <code>src</code> no se enlaza con un archivo real, no se preocupe si no se ven espadas en la pantalla). </section>
## Tests
<section id='tests'>
@@ -32,17 +32,17 @@ tests:
<div id='html-seed'>
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
<h2>Venciendo a tu Rival: el Punto Rojo es Nuestro!</h2>
<p>Próximamente...</p>
</article>
<img src="samuraiSwords.jpeg">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
<h2>Es Chuck Norris un Hombre Gato?</h2>
<p>Próximamente...</p>
</article>
```
@@ -57,6 +57,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -60,41 +60,41 @@ tests:
</nav>
</header>
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<h2>El Programa de Entrenamiento para Principantes de Tres Semanas del Maestro Camper Cat</h2>
<figure>
<!-- Stacked bar chart of weekly training-->
<!-- Gráfico de barras de entrenamiento semanal-->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
<figcaption>Desglose semanal del tiempo de entrenamiento en sigilo, combate y armas.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<caption>Horas de entrenamiento en sigilo, combate y armas</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Sigilo y Agilidad</th>
<th scope="col">Combate</th>
<th scope="col">Armas</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<th scope="row">Semana Uno</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<th scope="row">Semana Dos</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<th scope="row">Semana Tres</th>
<td>4</td>
<td>6</td>
<td>3</td>
@@ -104,19 +104,19 @@ tests:
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
<h2>Entrenamiento Sigilo &amp; Agilidad</h2>
<article><h3>Trepa el follaje rápidamente usando la técnica del árbol recubridor mínimo (Minimum Spanning Tree)</h3></article>
<article><h3>Ningún entrenamiento es NP-completo sin parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
<h2>Entrenamiento de Combate</h2>
<article><h3>Despacha múltiples enemigos con tácticas multi-hilo</h3></article>
<article><h3>Adiós, mundo: 5 maneras comprobadas de aniquilar a tu oponente</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
<h2>Entrenamiento de Armas</h2>
<article><h3>Espadas: la mejor herramienta para literalmente dividir y triunfar</h3></article>
<article><h3>Breadth-first (amplitud) o depth-first (profundidad) en entrenamiento multi-arma?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
@@ -133,6 +133,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Haga que los enlaces sean navegables con claves de acceso HTML
---
## Description
<section id="description"> HTML ofrece la <code>accesskey</code> atributo para especificar una tecla de acceso directo para activar o traer el foco a un elemento. Esto puede hacer que la navegación sea más eficiente para usuarios que solo usan el teclado. HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con los interactivos. Esto incluye enlaces, botones y controles de formulario. Aquí hay un ejemplo: <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> </section>
<section id="description"> HTML ofrece el atributo <code>accesskey</code> para especificar una tecla de acceso directo para activar o traer el foco a un elemento. Esto puede hacer que la navegación sea más eficiente para usuarios que solo usan el teclado. HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con los interactivos. Esto incluye enlaces, botones y controles de formulario. Aquí hay un ejemplo: <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> </section>
## Instructions
<section id="instructions"> Camper Cat desea que los enlaces que se encuentran alrededor de los dos títulos de los artículos del blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agregue un atributo de <code>accesskey</code> a ambos enlaces y establezca el primero en &quot;g&quot; (para Garfield) y el segundo en &quot;c&quot; (para Chuck Norris). </section>
@@ -43,18 +43,18 @@ tests:
<article>
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<h2><a id="first" href="">Los Archivos Garfield: ¿Lasagna como Combustible de Entrenamiento?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
<p>Internet está repleto de diversas opiniones sobre los paradigmas nutricionales, desde catnip paleo hasta limpieza de bolas de pelos. Pero pongamos ahora nuestra atención en un combustible del bienestar físico muchas veces olvidado, y examinemos la trifecta proteína-carbohidrato-NOM que es la lasagna...</p>
</article>
<article>
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
<h2><a id="second" href="">Es Chuck Norris un Hombre Gato?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
<p>Chuck Norris es ampliamente reconocido como el primer artista marcial del planeta, y es una completa coincidencia que todo aquel que no opina lo mismo desaparece misteriosamente poco tiempo después. Pero la verdadera pregunta es: es un hombre gato?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
@@ -71,6 +71,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Facilita la navegación por el lector de pantalla con el pie de pá
---
## Description
<section id="description"> Al igual que el <code>header</code> y la <code>nav</code> , el elemento de <code>footer</code> tiene una característica de hito incorporada que permite que los dispositivos de asistencia naveguen rápidamente hacia él. Se utiliza principalmente para contener información de derechos de autor o enlaces a documentos relacionados que generalmente se encuentran en la parte inferior de una página. </section>
<section id="description"> Al igual que el <code>header</code> y el <code>nav</code> , el elemento de <code>footer</code> tiene incorporado un punto de referencia que permite que los dispositivos de asistencia naveguen rápidamente hacia él. Se utiliza principalmente para contener información de derechos de autor o enlaces a documentos relacionados que generalmente se encuentran en la parte inferior de una página. </section>
## Instructions
<section id="instructions"> La página de entrenamiento de Camper Cat está progresando bien. Cambie el <code>div</code> que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de <code>footer</code> . </section>
@@ -81,6 +81,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Haga que la navegación del lector de pantalla sea más fácil con
---
## Description
<section id="description"> El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del <code>header</code> . Se usa para envolver información introductoria o enlaces de navegación para su etiqueta principal, y funciona bien con el contenido que se repite en la parte superior de varias páginas. <code>header</code> comparte la característica de hito incorporada que vio con <code>main</code> , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. <strong>Nota</strong> <br> <code>header</code> está diseñado para su uso en la etiqueta del <code>body</code> de su documento HTML. Esto es diferente al elemento de <code>head</code> , que contiene el título de la página, metainformación, etc. </section>
<section id="description"> El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del <code>header</code> . Se usa para envolver información introductoria o enlaces de navegación para su etiqueta principal, y funciona bien con el contenido que se repite en la parte superior de varias páginas. El <code>header</code> comparte la característica de hito incorporada que vio con <code>main</code> , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. <strong>Nota</strong> <br> <code>header</code> está diseñado para su uso en la etiqueta del <code>body</code> de su documento HTML. Esto es diferente al elemento de <code>head</code> , que contiene el título de la página, metainformación, etc. </section>
## Instructions
<section id="instructions"> Camper Cat está escribiendo algunos artículos geniales sobre el entrenamiento de ninja y desea agregar una página para ellos en su sitio. Cambie la <code>div</code> superior que actualmente contiene el <code>h1</code> a una etiqueta de <code>header</code> . </section>
@@ -75,6 +75,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -41,7 +41,7 @@ tests:
<h1>Entrenamiento con Camper Cat</h1>
<div>
<ul>
<li><a href="#stealth">Sigilo & Agilidad</a></li>
<li><a href="#stealth">Sigilo &amp; Agilidad</a></li>
<li><a href="#combat">Combate</a></li>
<li><a href="#weapons">Armas</a></li>
</ul>
@@ -79,6 +79,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,10 @@ localeTitle: Estandarizar los tiempos con el atributo datetime HTML5
---
## Description
undefined
<section id='description'>
Continuando con el tema de la fecha, HTML5 también introdujo el elemento <code>time</code> junto con un atributo <code>datetime</code> para estandarizar el tiempo. <code>time</code> es un elemento <code>inline</code> que puede contener una fecha o una hora en la página web. El atributo <code>datetime</code> contiene un formato válido de fecha. Este es el valor al que se accede a través de dispositivos de asistencia. Ayuda a evitar cualquier confusión al mantener una versión estandarizada del tiempo, incluso si en el texto está escrito de manera informal o coloquial. Aquí hay un ejemplo:
<code>&lt;p&gt;El Maestro Camper Cat presentó la pelea en la jaula entre Goro y Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;el miércoles pasado&lt;/time&gt;, que terminó en un empate.&lt;/p&gt;</code>
</section>
## Instructions
<section id="instructions"> ¡Los resultados de la encuesta de Mortal Kombat realizada por Camper Cat están aquí! Envuelve con una etiqueta de <code>time</code> el texto &quot;Jueves, 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot; y agrega un atributo de <code>datetime</code> con el valor &quot;2016-09-15&quot;. </section>
@@ -38,30 +41,30 @@ tests:
```html
<body>
<header>
<h1>Tournaments</h1>
<h1>Torneos</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<h2>Resultados de la Encuestra del Torneo de Mortal Kombat</h2>
<!-- Add your code below this line -->
<!-- Agrega tu código debajo de esta línea -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<p>Gracias a todos por participar de la encuesta del Maestro Camper Cat. El mejor día para llevar a cabo el tan espero torneo de Mortal Kombat es el jueves 15 de septiembre. ¡Qué gane el mejor ninja! </p>
<!-- Add your code above this line -->
<!-- Agrega tu código por encima de esta línea -->
<section>
<h3>Comments:</h3>
<h3>Comentarios:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
<p>Posteado por: Sub-Zero el <time datetime="2016-08-13T20:01Z">13 de agosto</time></p>
<p>Johnny Cage más te vale que estés allí, lo destruiré!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
<p>Posteado por: Doge el <time datetime="2016-08-15T08:12Z">15 de agosto</time></p>
<p>Wow, much combate, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
<p>Posteado por: la Parca el <time datetime="2016-08-16T00:00Z">16 de agosto</time></p>
<p>Parece que estaré bastante ocupada ese día.</p>
</article>
</section>
</article>
@@ -80,6 +83,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Usar encabezados para mostrar relaciones jerárquicas de contenido
---
## Description
<section id="description"> Los encabezados (elementos <code>h1</code> a <code>h6</code> ) son etiquetas de código de trabajo que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla pueden configurarse para leer solo los encabezados de una página, de modo que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de encabezado en su marca tengan un significado semántico y se relacionen entre sí, no para ser elegidas simplemente por sus valores de tamaño. <em>El significado semántico significa</em> que la etiqueta que usa alrededor del contenido indica el tipo de información que contiene. Si estuvieras escribiendo un artículo con una introducción, un cuerpo y una conclusión, no tendría mucho sentido poner la conclusión como una subsección del cuerpo en tu esquema. Debe ser su propia sección. Del mismo modo, las etiquetas de encabezado en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido. Los encabezados con rango igual (o superior) inician nuevas secciones implícitas, encabezados con subsecciones de inicio de rango inferior de la anterior. Como ejemplo, una página con un elemento <code>h2</code> seguido de varias subsecciones etiquetadas con etiquetas <code>h4</code> confundiría a un usuario lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puedes usar CSS para editar el tamaño relativo. Un último punto, cada página debe tener siempre un elemento <code>h1</code> (y solo uno), que es el tema principal de su contenido. Este y los otros encabezados son utilizados en parte por los motores de búsqueda para comprender el tema de la página. </section>
<section id="description"> Los encabezados (elementos <code>h1</code> a <code>h6</code> ) son etiquetas de código de trabajo que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla pueden configurarse para leer solo los encabezados de una página, de modo que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de encabezado en su marca tengan un significado semántico y se relacionen entre sí, no para ser elegidas simplemente por sus valores de tamaño. <em>El significado semántico significa</em> que la etiqueta que usa alrededor del contenido indica el tipo de información que contiene. Si estuvieras escribiendo un artículo con una introducción, un cuerpo y una conclusión, no tendría mucho sentido poner la conclusión como una subsección del cuerpo en tu esquema. Debe ser su propia sección. Del mismo modo, las etiquetas de encabezado en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido. Los encabezados con rango igual (o superior) inician nuevas secciones implícitas, encabezados con subsecciones de inicio de rango inferior de la anterior. Como ejemplo, una página con un elemento <code>h2</code> seguido de varias subsecciones etiquetadas con etiquetas <code>h4</code> confundiría a un usuario lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puedes usar CSS para editar el tamaño relativo. Un último punto: cada página debe tener siempre un elemento <code>h1</code> (y solo uno), que es el tema principal de su contenido. Este y los otros encabezados son utilizados en parte por los motores de búsqueda para comprender el tema de la página. </section>
## Instructions
<section id="instructions"> Camper Cat quiere una página en su sitio dedicada a convertirse en un ninja. Ayúdelo a arreglar los títulos para que su marca dé un significado semántico al contenido y muestre las relaciones correctas entre padres e hijos de sus secciones. Cambie todas las etiquetas <code>h5</code> al nivel de título adecuado para indicar que son subsecciones de las <code>h2</code> . </section>
@@ -32,19 +32,19 @@ tests:
<div id='html-seed'>
```html
<h1>How to Become a Ninja</h1>
<h1>Cómo convertirse en un ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h5>How to Hide in Plain Sight</h5>
<h5>How to Climb a Wall</h5>
<h2>Aprender el Arte de Moverse Sigilosamente</h2>
<h5>Cómo esconderse en plena vista</h5>
<h5>Cómo trepar una pared</h5>
<h2>Learn the Art of Battle</h2>
<h5>How to Strengthen your Body</h5>
<h5>How to Fight like a Ninja</h5>
<h2>Aprender el Arte del Combate</h2>
<h5>Cómo fortalecer tu cuerpo</h5>
<h5>Cómo pelear como un ninja</h5>
<h2>Learn the Art of Living with Honor</h2>
<h5>How to Breathe Properly</h5>
<h5>How to Simplify your Life</h5>
<h2>Aprender el Arte de Vivir con Honor</h2>
<h5>Cómo respirar correctamente</h5>
<h5>Cómo simplificar su vida</h5>
</main>
```
@@ -59,6 +59,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,7 +7,7 @@ localeTitle: Use tabindex para agregar el foco de teclado a un elemento
---
## Description
<section id="description"> El atributo HTML <code>tabindex</code> tiene tres funciones distintas relacionadas con el enfoque del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar. El valor (un entero que es positivo, negativo o cero) determina el comportamiento. Ciertos elementos, como los enlaces y los controles de formulario, reciben automáticamente el enfoque del teclado cuando un usuario se desplaza por una página. Está en el mismo orden en que los elementos vienen en el código fuente HTML. Esta misma funcionalidad se puede dar a otros elementos, como <code>div</code> , <code>span</code> <code>p</code> , colocando un <code>tabindex=&quot;0&quot;</code> en ellos. Aquí hay un ejemplo: <code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> <strong>Nota</strong> <br> Un valor de <code>tabindex</code> negativo (generalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un <code>div</code> para una ventana emergente), y está más allá del alcance de estos desafíos. </section>
<section id="description"> El atributo HTML <code>tabindex</code> tiene tres funciones distintas relacionadas con el enfoque del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar. El valor (un entero que es positivo, negativo o cero) determina el comportamiento. Ciertos elementos, como los enlaces y los controles de formulario, reciben automáticamente el enfoque del teclado cuando un usuario se desplaza por una página. Está en el mismo orden en que los elementos vienen en el código fuente HTML. Esta misma funcionalidad se puede dar a otros elementos, como <code>div</code> , <code>span</code> <code>p</code> , colocando un <code>tabindex=&quot;0&quot;</code> en ellos. Aquí hay un ejemplo: <code>&lt;div tabindex=&quot;0&quot;&gt;¡necesito un enfoque de teclado!&lt;/div&gt;</code> <strong>Nota</strong> <br> Un valor de <code>tabindex</code> negativo (generalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un <code>div</code> para una ventana emergente), y está más allá del alcance de estos desafíos. </section>
## Instructions
<section id="instructions"> Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Sabe que los campos de entrada se enfocan automáticamente en el teclado, pero quiere asegurarse de que los usuarios de su teclado se detengan en las instrucciones mientras repasan los elementos. Agregue un atributo de <code>tabindex</code> a la etiqueta <code>p</code> y establezca su valor en &quot;0&quot;. Bonus: el uso de <code>tabindex</code> también habilita la <code>tabindex</code> CSS <code>:focus</code> para trabajar en la etiqueta <code>p</code> . </section>
@@ -41,37 +41,37 @@ tests:
</head>
<body>
<header>
<h1>Ninja Survey</h1>
<h1>Encuestra Ninja</h1>
</header>
<section>
<form>
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
<p>Instrucciones: Complete TODA su información y luego haga clic en <b>Submit</b></p>
<label for="username">Username:</label>
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username"><br>
<fieldset>
<legend>What level ninja are you?</legend>
<legend>Cuál es su nivel de ninja?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<label for="newbie">Gatito novato</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<label for="intermediate">Estudiante en Desarrollo</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">9th Life Master</label>
<label for="master">Noveno Maestro de la Vida</label>
</fieldset>
<br>
<fieldset>
<legend>Select your favorite weapons:</legend>
<legend>Seleccione sus armas favoritas:</legend>
<input id="stars" type="checkbox" name="weapons" value="stars">
<label for="stars">Throwing Stars</label><br>
<label for="stars">Estrellas voladoras</label><br>
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
<label for="nunchucks">Nunchucks</label><br>
<label for="nunchucks">Nunchaku</label><br>
<input id="sai" type="checkbox" name="weapons" value="sai">
<label for="sai">Sai Set</label><br>
<label for="sai">Dagas Sai</label><br>
<input id="sword" type="checkbox" name="weapons" value="sword">
<label for="sword">Sword</label>
<label for="sword">Espada</label>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
@@ -92,6 +92,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -7,10 +7,10 @@ localeTitle: Use tabindex para especificar el orden de enfoque del teclado para
---
## Description
<section id="description"> El atributo <code>tabindex</code> también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior. Establecer un tabindex = &quot;1&quot; traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y <code>tabindex=&quot;0&quot;</code> . Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla. Aquí hay un ejemplo: <code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code> <code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code> </section>
<section id="description"> El atributo <code>tabindex</code> también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior. Establecer un tabindex = &quot;1&quot; traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y <code>tabindex=&quot;0&quot;</code> . Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla. Aquí hay un ejemplo: <code>&lt;div tabindex=&quot;1&quot;&gt;¡Tengo enfoque de teclado, y lo tengo primero!&lt;/div&gt;</code> <code>&lt;div tabindex=&quot;2&quot;&gt;¡Tengo enfoque de teclado, y lo tengo segundo!&lt;/div&gt;</code> </section>
## Instructions
<section id="instructions"> Camper Cat tiene un campo de búsqueda en su página de citas inspiradoras que planea posicionar en la esquina superior derecha con CSS. Quiere que el campo <code>input</code> de búsqueda y los campos <code>input</code> de controles de formulario sean los dos primeros elementos en el orden de tabulación. Agregue el atributo <code>tabindex</code> estalecido a &quot;1&quot; al campo <code>input</code> de búsqueda, y un atributo de <code>tabindex</code> establecido a &quot;2&quot; al campo <code>input</code> de formulario.</section>
<section id="instructions"> Camper Cat tiene un campo de búsqueda en su página de citas inspiradoras que planea posicionar en la esquina superior derecha con CSS. Quiere que el campo <code>input</code> de búsqueda y los campos <code>input</code> de controles de formulario sean los dos primeros elementos en el orden de tabulación. Agregue el atributo <code>tabindex</code> establecido a &quot;1&quot; al campo <code>input</code> de búsqueda, y un atributo de <code>tabindex</code> establecido a &quot;2&quot; al campo <code>input</code> de formulario.</section>
## Tests
<section id='tests'>
@@ -80,6 +80,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -3,11 +3,11 @@ id: 587d774e367417b2b2512aa0
title: Wrap Content in the article Element
challengeType: 0
videoUrl: ''
localeTitle: Envolver contenido en el artículo Elemento.
localeTitle: Envolver contenido en el elemento article.
---
## Description
<section id="description"> <code>article</code> es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. <code>Article</code> es un elemento de sección y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en foros o artículos de noticias. Determinar si el contenido puede ser independiente es generalmente una llamada de juicio, pero hay un par de pruebas simples que puede usar. Pregúntese si eliminó todo el contexto circundante, ¿ese contenido aún tendría sentido? De manera similar, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS? Recuerde que las personas que usan tecnologías de asistencia confían en un marcado organizado semánticamente significativo para comprender mejor su trabajo. <strong>Nota sobre la <code>section</code> y <code>div</code></strong> <br> El elemento de <code>section</code> también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al <code>article</code> . Un <code>article</code> es para contenido independiente, y una <code>section</code> es para agrupar contenido relacionado temáticamente. Se pueden usar uno dentro del otro, según sea necesario. Por ejemplo, si un libro es el <code>article</code> , entonces cada capítulo es una <code>section</code> . Cuando no haya una relación entre grupos de contenido, use un <code>div</code> . <blockquote> &lt;div&gt; - agrupa contenido <br> &lt;sección&gt; - grupos relacionados con el contenido <br> &lt;article&gt; - agrupa contenido independiente, independiente <br></blockquote></section>
<section id="description"> <code>article</code> es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. <code>Article</code> es un elemento de sección y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en foros o artículos de noticias. Determinar si el contenido puede ser independiente es generalmente un cuestión de juicio personal, pero hay un par de pruebas simples que puede usar. Pregúntese si eliminó todo el contexto circundante, ¿ese contenido aún tendría sentido? De manera similar, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS? Recuerde que las personas que usan tecnologías de asistencia confían en un marcado organizado y semánticamente significativo para comprender mejor su trabajo. <strong>Nota sobre la <code>section</code> y <code>div</code></strong> <br> El elemento de <code>section</code> también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al <code>article</code> . Un <code>article</code> es para contenido independiente, y una <code>section</code> es para agrupar contenido relacionado temáticamente. Se pueden usar uno dentro del otro, según sea necesario. Por ejemplo, si un libro es el <code>article</code> , entonces cada capítulo es una <code>section</code> . Cuando no haya una relación entre grupos de contenido, use un <code>div</code> . <blockquote> &lt;div&gt; - agrupa contenido <br> &lt;sección&gt; - agrupa contenido relacionado <br> &lt;article&gt; - agrupa contenido independiente, contenido en sí mismo <br></blockquote></section>
## Instructions
<section id="instructions"> Camper Cat usó etiquetas de <code>article</code> para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta <code>div</code> para usar una etiqueta de <code>article</code> lugar. </section>
@@ -32,25 +32,25 @@ tests:
<div id='html-seed'>
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
<main>
<div>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
<h2>Los Archivos Garfield: ¿Lasagna como Combustible de Entrenamiento?</h2>
<p>Internet está repleto de diversas opiniones sobre los paradigmas nutricionales, desde catnip paleo hasta limpieza de bolas de pelos. Pero pongamos ahora nuestra atención en un combustible del bienestar físico muchas veces olvidado, y examinemos la trifecta proteína-carbohidrato-NOM que es la lasagna... </p>
</div>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
<h2>Venciendo a tu Rival: el Punto Rojo es Nuestro!</h2>
<p>Felinos de todo el mundo vienen dándole batalla a uno de los rivales más persistentes. Este némesis colorado combina un sigilo ingenioso con la velocidad del rayo. Pero anímense, compañeros luchadores, nuestra victoria está cerca...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
<h2>Es Chuck Norris un Hombre Gato?</h2>
<p>Chuck Norris es ampliamente reconocido como el primer artista marcial del planeta, y es una completa coincidencia que todo aquel que no opina lo mismo desaparece misteriosamente poco tiempo después. Pero la verdadera pregunta es: es un hombre gato?...</p>
</article>
</main>
@@ -66,6 +66,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -47,24 +47,24 @@ tests:
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
<h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<p>¡Subscríbete aquí para recibir por email los posts del blog de Camper Cat!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<div>
<p>What level ninja are you?</p>
<p>Cuál es su nivel de ninja?</p>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<label for="newbie">Gatito Novato</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<label for="intermediate">Estudiante en Desarrollo</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
<label for="master">Maestro</label>
</div>
<!-- Add your code above this line -->
@@ -73,18 +73,18 @@ tests:
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
<h2>Los Archivos Garfield: ¿Lasagna como Combustible de Entrenamiento?</h2>
<p>Internet está repleto de diversas opiniones sobre los paradigmas nutricionales, desde catnip paleo hasta limpieza de bolas de pelos. Pero pongamos ahora nuestra atención en un combustible del bienestar físico muchas veces olvidado, y examinemos la trifecta proteína-carbohidrato-NOM que es la lasagna... </p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
<h2>Venciendo a tu Rival: el Punto Rojo es Nuestro!</h2>
<p>Felinos de todo el mundo vienen dándole batalla a uno de los rivales más persistentes. Este némesis colorado combina un sigilo ingenioso con la velocidad del rayo. Pero anímense, compañeros luchadores, nuestra victoria está cerca...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
<h2>Es Chuck Norris un Hombre Gato?</h2>
<p>Chuck Norris es ampliamente reconocido como el primer artista marcial del planeta, y es una completa coincidencia que todo aquel que no opina lo mismo desaparece misteriosamente poco tiempo después. Pero la verdadera pregunta es: es un hombre gato?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
@@ -101,6 +101,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>

View File

@@ -8,8 +8,8 @@ isRequired: true
## Description
<section id='description'>
Cree una aplicación de JavaScript de pila completa que sea funcionalmente similar a esta: <a href='https://fuschia-custard.glitch.me/' target='_blank'>https://fuschia-custard.glitch.me/</a> .
Trabajar en este proyecto implicará que escriba su código en Glitch en nuestro proyecto de inicio. Después de completar este proyecto, puede copiar su URL de error público (en la página de inicio de su aplicación) en esta pantalla para probarlo. Opcionalmente, puede optar por escribir su proyecto en otra plataforma, pero debe ser visible públicamente para nuestras pruebas.
Cree una aplicación de JavaScript full stack que sea funcionalmente similar a esta: <a href='https://fuschia-custard.glitch.me/' target='_blank'>https://fuschia-custard.glitch.me/</a> .
Trabajar en este proyecto implicará que escriba su código en Glitch en nuestro proyecto de inicio. Después de completar el proyecto, puede copiar su URL pública de Glitch (en la página de inicio de su aplicación) en esta pantalla para probarlo. Opcionalmente, puede optar por escribir su proyecto en otra plataforma, pero debe ser visible públicamente para nuestras pruebas.
Inicie este proyecto en Glitch usando <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-exercisetracker/' target='_blank'>este enlace</a> o clone <a href='https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/'>este repositorio</a> en GitHub! Si utiliza Glitch, recuerde guardar el enlace a su proyecto en un lugar seguro.
</section>
@@ -25,13 +25,13 @@ Inicie este proyecto en Glitch usando <a href='https://glitch.com/#!/import/gith
tests:
- text: Puedo crear un usuario al publicar el nombre de usuario de los datos del formulario en /api/exercise/new-user y se devolverá un objeto con nombre de usuario y <code>_id</code> .
testString: ''
- text: Puedo obtener una matriz de todos los usuarios al obtener api / ejercicio / usuarios con la misma información que cuando se crea un usuario.
- text: Puedo obtener un array de todos los usuarios al acceder a api/exercise/users con la misma información que cuando se crea un usuario.
testString: ''
- text: 'Puedo agregar un ejercicio a cualquier usuario publicando los datos del formulario ID de usuario (_id), descripción, duración y, opcionalmente, fechar en / api / ejercicio / agregar. Si no se proporciona la fecha, se utilizará la fecha actual. La aplicación devolverá el objeto de usuario con los campos de ejercicio agregados. '
- text: Puedo agregar un ejercicio a cualquier usuario publicando los datos del formulario ID de usuario (_id), descripción, duración y, opcionalmente, fechar en /api/exercise/add. Si no se proporciona la fecha, se utilizará la fecha actual. La aplicación devolverá el objeto de usuario con los campos de ejercicio agregados.
testString: ''
- text: Puedo recuperar un registro de ejercicio completo de cualquier usuario obteniendo / api / exercise / log con un parámetro de userId (_id). La aplicación devolverá el objeto de usuario con el registro de matriz agregada y el conteo (recuento total de ejercicios).
- text: Puedo obtener un registro de ejercicio completo de cualquier usuario accediendo a /api/exercise/log con un parámetro de userId (_id). La aplicación devolverá el objeto de usuario con el array de registros agregado y el conteo (recuento total de ejercicios).
testString: ''
- text: 'Puedo recuperar parte del registro de cualquier usuario pasando también parámetros opcionales de desde y hasta o límite. (Formato de fecha aaaa-mm-dd, límite = int) '
- text: Puedo obtener parte del registro de cualquier usuario pasando también parámetros opcionales de desde y hasta o límite. (Formato de fecha aaaa-mm-dd, límite = int)
testString: ''
```
@@ -47,6 +47,7 @@ tests:
<section id='solution'>
```js
// solution required
// solución requerida
```
</section>