chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Agregar un texto alternativo a las imágenes para accesibilidad de usuarios con dificultades de la vista
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 16628
|
||||
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Es probable que en otros desafíos hayas visto un atributo `alt` en una etiqueta `img`. El texto `alt` describe el contenido de la imagen y proporciona una descripción alternativa en formato de texto. Esto ayuda en casos en que la imagen no se carga o que el usuario no pueda verla. También es aprovechado por los motores de búsqueda para interpretar el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
Las personas con dificultades visuales dependen de lectores de pantalla para convertir el contenido web a una interfaz de audio. Por esta razón, no podrán recibir la información si solo se les presenta de manera visual. En el caso de las imágenes, los lectores de pantalla pueden acceder el atributo `alt` y leer su contenido para proporcionar información clave.
|
||||
|
||||
Un buen texto `alt` le brinda al lector una breve descripción de la imagen. Siempre deberías incluir el atributo `alt` en tus imágenes. Además, según la especificación de HTML5, esto ahora se considera obligatorio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat es tanto un ninja de la programación como un ninja de la vida real, y está construyendo un sitio web para compartir sus conocimientos. La foto de perfil que quiere usar es una muestra de sus habilidades y debería poder ser apreciada por todos los visitantes del sitio. Agrega un atributo `alt` en la etiqueta `img` para explicar que Camper Cat está practicando karate. (El atributo `src` de esta imagen no está enlazado a un archivo real, por lo que podrás ver el texto `alt` en la página.)
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu etiqueta `img` debe tener un atributo `alt`, y el mismo no debería estar vacío.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Agregar un selector de fechas accesible
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||
forumTopicId: 301008
|
||||
dashedName: add-an-accessible-date-picker
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los formularios suelen incluir el campo `input`, que puede usarse para crear diferentes tipos de controles en los formularios. El atributo `type` en este elemento indica el tipo de elemento `input` a crear.
|
||||
|
||||
Puede que hayas visto los tipos de campo `text` y `submit` en desafíos anteriores. HTML5 además introdujo una opción para especificar un campo `date` para fechas. Dependiendo del soporte de los navegadores, un selector de fechas debería aparecer cuando el campo `input` esté en foco, y esto hace mucho más sencillo para los usuarios cargar información en el formulario.
|
||||
|
||||
Para los navegadores más antiguos, el tipo será por defecto `text`, por lo que ayuda a mostrar a los usuarios el formato de fecha(date) esperado en el texto `label` o `placeholder` por si acaso.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
```html
|
||||
<label for="input1">Enter a date:</label>
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat está organizando un torneo de Mortal Kombat y quiere pedir a los participantes que consideren cuál fecha les resultaría mejor. Agrega una etiqueta `input` con un atributo `type` de `date`, un atributo `id` de `pickdate` y un atributo `name` con valor `date`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debería añadir una etiqueta `input` para el campo de selección de fecha.
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
Tu etiqueta `input` debe tener un atributo `type` con un valor de `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
Tu etiqueta `input` debe tener un atributo `id` con un valor de `pickdate`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
Tu etiqueta `input` debe tener un atributo `name` con un valor de `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: >-
|
||||
Evita problemas de color para usuarios daltónicos eligiendo cuidadosamente los colores que transmiten información
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
dashedName: >-
|
||||
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Existen varias formas de daltonismo o ceguera al color. Estos pueden ir desde tener una sensibilidad reducida a una longitud de onda de luz específica, hasta la incapacidad total de ver algún color. La forma más común en que se presenta es una sensibilidad reducida para detectar tonos de verde.
|
||||
|
||||
Por ejemplo, si dos colores verdes similares son el color usado en el primer plano y el fondo de tu contenido, un usuario daltónico podría no ser capaz de distinguirlos entre sí. Podemos pensar en los colores cercanos como aquellos colores que son vecinos o adyacentes en la rueda de color. Por este motivo, las combinaciones de estos colores deben evitarse cuando se usan para transmitir información importante.
|
||||
|
||||
**Nota:** Algunas herramientas de selección de colores disponibles en Internet incluyen simulaciones visuales de cómo serían vistos por usuarios con diversos tipos de daltonismo. Estos son excelentes recursos que puedes aprovechar, sumados a las calculadoras para verificar el contraste de color que puedes encontrar en Internet.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat está probando diferentes estilos para un botón importante, pero el `background-color` amarillo (`#FFF33`) y el `color` de texto verde (`#33FF33`) son tonos vecinos en la rueda de color, por lo que resultan prácticamente indistinguibles para algunos usuarios daltónicos. (Además, como tienen un nivel de luminosidad similar, no pasan la verificación de índice de contraste o contrast ratio). Cambia el `color` del texto a azul oscuro (`#003366`) para resolver ambos problemas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe cambiar el `color` del texto en el `button` al color azul oscuro.
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Evita problemas de percepción del color usando el suficiente contraste
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
forumTopicId: 301012
|
||||
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El color es una parte importante del diseño visual, pero su aplicación presenta dos problemas de accesibilidad. El primer problema es que no se debe utilizar el color como la única forma de transmitir información importante, porque los lectores de pantalla no lo distinguen. En segundo lugar, los colores de primer plano y de fondo necesitan tener suficiente contraste para que los usuarios sean capaces de distinguirlos.
|
||||
|
||||
Los desafíos anteriores explicaron la existencia de texto alternativo para remediar el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar con el segundo problema. El índice de contraste de 4.5:1 recomendado por WCAG se aplica tanto para los colores como para combinaciones de escalas de grises.
|
||||
|
||||
Los usuarios daltónicos tienen problemas para distinguir algunos colores de otros. Esto generalmente depende del tono pero también depende a veces de su luminosidad. Posiblemente recuerdes que el índice de contraste se calcula utilizando los valores de luminancia (o luminosidad) relativa de los colores de primer plano y del fondo.
|
||||
|
||||
En la práctica, la relación de contraste de 4.5:1 puede alcanzarse oscureciendo el color más oscuro (o sea, añadiendo negro) y aclarando el color más claro (añadiéndole blanco). Se considera que los tonos más oscuros en la rueda de color son los azules, violetas, magentas y los rojos, mientras que los colores más claros son los naranjas, amarillos, verdes y azul-verdosos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat está experimentando con usar color en el texto y fondo de su blog, pero su combinación actual de `background-color` verdoso con `color` de texto granate tiene un índice de contraste de 2.5:1. Puedes ajustar fácilmente la luminosidad de los colores, ya que los declaró usando la propiedad CSS `hsl()` (que significa tono, saturación, luminosidad o "hue, saturation, lightness") cambiando solo el tercer argumento. Aumenta el valor de luminosidad del `background-color` de 35% a 55%, y disminuye el valor de luminosidad del `color` del texto del 20% al 15%. Esto mejora el índice de contraste llevándolo a 5.9:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código solo debe cambiar el valor de luminosidad para la propiedad de `color` del texto a un valor del 15%.
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
Tu código solo debe cambiar el valor de luminosidad para la propiedad de `background-color` a un valor del 55%.
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master 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>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master 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>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Dar significado a los enlaces agregando un texto descriptivo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los lectores de pantalla tienen diferentes opciones según el tipo de contenido que lea el dispositivo del usuario. Esto incluye saltar a (o pasar por alto) elementos importantes, saltar al contenido principal u obtener un resumen de la página a partir de los títulos. Otra opción es escuchar la narración de los enlaces disponibles en una página.
|
||||
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que haya entre las etiquetas anchor (`a`). Tener una lista de enlaces que solo digan "clic aquí" o "leer más" no ayuda. En lugar de eso, debes utilizar un texto breve pero descriptivo dentro de las etiquetas `a` para proporcionar más significado a estos usuarios.
|
||||
|
||||
# --instructions--
|
||||
|
||||
El texto de los enlaces que utiliza el Camper Cat no es muy descriptivo si se lo toma fuera de su contexto. Mueve las etiquetas anchor (`a`) para que envuelvan el texto `information about batteries` en lugar de `Click here`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe mover las etiquetas anchor `a` de las palabras `Click here` para envolver las palabras `information about batteries`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/^(information about batteries)$/g)
|
||||
);
|
||||
```
|
||||
|
||||
El elemento `a` debe tener un atributo `href` con un valor de cadena vacía `""`.
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
Tu elemento `a` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Mejorar la accesibilidad del contenido de audio con el elemento de audio
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
forumTopicId: 301014
|
||||
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El elemento `audio` de HTLM le da un significado semántico cuando contiene sonido o contenido de flujo de audio en el código. El contenido del audio también necesita un texto alternativo para que las personas sordas o con dificultad para escuchar puedan acceder al mismo. Para esto debe tener un texto cercano en la página o un enlace a una transcripción.
|
||||
|
||||
La etiqueta de `audio` suporta los atributos `controls`. Esto muestra los controles por defecto de reproducir, pausar, entre otros controles, y soporta la funcionalidad del teclado. Este es un atributo booleano por lo que no necesita un valor, su presencia en la etiqueta activa la configuración.
|
||||
|
||||
Acá tenemos un ejemplo:
|
||||
|
||||
```html
|
||||
<audio id="meowClip" controls>
|
||||
<source src="audio/meow.mp3" type="audio/mpeg" />
|
||||
<source src="audio/meow.ogg" type="audio/ogg" />
|
||||
</audio>
|
||||
```
|
||||
|
||||
**Note:** El contenido multimedia generalmente tiene componentes visuales y de audio. Se necesita sincronizar los subtítulos y una transcripción para que los usuarios con dificultades de vista o con problemas para escuchar puedan tener acceso a las mismas. Por lo general, un desarrollador de web no se responsabiliza de la creación de subtítulos o transcripciones pero necesita saber para incluirlos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Es hora de salir del Camper Cat y conocer a nuestro compañero Zersiax (@zersiax), un campión en accesibilidad y un usuario de lector de pantalla. Para escuchar un clip de su lector de pantalla en acción y añadir el elemento `audio` después de `p`. Incluye el atributo `controls`. A continuación, coloca una etiqueta `source` dentro de las etiquetas `audio` con el atributo `src` establecido en `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` y el atributo `type` establecido en `"audio/mpeg"`.
|
||||
|
||||
**Note:** El clip del audio puede sonar rápido y quizás sea difícil de entender pero esta velocidad es normal para los lectores de pantalla.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
El elemento `audio` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/audio>/g).length === 1 &&
|
||||
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||
);
|
||||
```
|
||||
|
||||
La etiqueta `audio` debe tener el atributo `controls`.
|
||||
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
Tu código debe tener una etiqueta `source`.
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
La etiqueta `source` debe estar adentro de las etiquetas `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
El valor para el atributo `src` en `source` debe coincidir exactamente con el link en las instrucciones.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('source').attr('src') ===
|
||||
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||
);
|
||||
```
|
||||
|
||||
El código debe incluir un atributo `type` en la etiqueta `source` con un valor de audio/mpeg.
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Mejora la accesibilidad de gráficos con el elemento figure
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
forumTopicId: 301015
|
||||
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo el elemento `figure` junto con el elemento relacionado `figcaption`. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Esto representa una mejora doble de accesibilidad, porque agrupa contenido semánticamente relacionado y además proporciona un texto alternativo que explica el contenido visual del elemento `figure`.
|
||||
|
||||
En visualizaciones de datos como gráficos, la leyenda o "figcaption" puede ser utilizada para resumir en formato de texto las tendencias o conclusiones, para beneficio de usuarios con discapacidades visuales. Otro de los desafíos se ocupa cómo mover fuera de la pantalla una versión en formato de tabla con los datos del gráfico (usando CSS) para ayudar a usuarios de lectores de pantalla.
|
||||
|
||||
Aquí hay un ejemplo: Ten en cuenta que el elemento `figcaption` va dentro de las etiquetas `figure` y se puede combinar con otros elementos:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||
<br>
|
||||
<figcaption>
|
||||
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat está trabajando para crear un gráfico de barras apiladas que muestre la cantidad de tiempo semanal a dedicar en entrenamiento en sigilo, combate y armas. Ayúdalo a estructurar mejor su página cambiando la etiqueta `div` que usó por una etiqueta `figure`, y cambiando la etiqueta `p` que rodea la leyenda por una etiqueta `figcaption`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
Tu código debe tener una etiqueta `figcaption`.
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `p`.
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
La etiqueta `figcaption` debe ser un hijo de la etiqueta `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
Tu elemento `figure` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/figure>/g) &&
|
||||
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Mejorar la accesibilidad del campo de formulario con la etiqueta element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
forumTopicId: 301016
|
||||
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La mejora de la accesibilidad con el marcado HTML semántico se aplica tanto al uso de nombres de etiquetas apropiados como de atributos. Los próximos desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
|
||||
La etiqueta `label` contiene el texto para un elemento específico de control de formulario, por lo general el nombre o etiqueta para una elección. Esto vincula el significado al elemento y hace que el formulario se lea mejor. El atributo `for` en una etiqueta `label` asocia de manera explícita dicho `label` con el control de formulario utilizado por los lectores de pantalla.
|
||||
|
||||
Ya aprendiste sobre botones de radio y sus etiquetas en una lección de la sección de HTML básico. En esa lección, colocamos el elemento de entrada del botón de radio dentro de la etiqueta `label` junto con la etiqueta del texto para hacer que el texto se pueda cliquear. También, se puede utilizar el atributo `for` como se explicó en esta lección.
|
||||
|
||||
El valor del atributo `for` debe ser igual al valor del atributo `id` del formulario de control. Por ejemplo:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat espera que haya mucho interés en sus publicaciones bien armadas en el blog y quiere incluir un formulario de registro por correo electrónico. Añade un atributo `for` en el correo electrónico `label` que coincida con el `id` en su campo `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener un atributo `for` en una etiqueta `label` que no esté vacía.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
El valor del atributo `for` debe coincidir con el valor `id` en el correo electrónico `input`.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Mejora la legibilidad con texto de alto contraste
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
forumTopicId: 301017
|
||||
dashedName: improve-readability-with-high-contrast-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. El contraste suficiente mejora la legibilidad de tu contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
|
||||
Las Directrices de Accesibilidad al Contenido 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 equilibra entre 1:1 para el mismo color, o sin contraste, y 21:1 para el blanco contra el negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación por ti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
La elección del Gato Campero de texto gris claro sobre un fondo blanco para su reciente publicación de blog tiene una relación de contraste de 1.5:1, por lo que es difícil de leer. Cambie el `color` del texto del gris, actual (`#D3D3D3`) a un gris más oscuro (`#636363`) para mejorar la relación de contraste a 6:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe cambiar el texto `color` para el `body` al gris más oscuro.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
Tu código no debe cambiar el `background-color` para el `body`.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master 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>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master 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>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Salta directamente al contenido usando el elemento principal (main)
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
forumTopicId: 301018
|
||||
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo una serie de nuevos elementos que ofrecen a los desarrolladores más opciones al tiempo que incorporan características de accesibilidad. Estas etiquetas incluyen `main`, `header`, `footer`, `nav`, `article`, y `section`, entre otros.
|
||||
|
||||
Por defecto, un navegador representa estos elementos de manera similar a la humilde `div`. Sin embargo, usarlos cuando sea apropiado da un significado adicional en tu lenguaje de marcado. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar mejores opciones de resumen de páginas o de navegación a sus usuarios.
|
||||
|
||||
El elemento `main` se usa para envolver (lo adivinaste) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información que está relacionada con el tema central de su página. No está destinado a incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
|
||||
La etiqueta `main` también tiene una característica de referencia insertada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez has visto un enlace "Salta al contenido principal" en la parte superior de una página, usando una etiqueta principal proporciona automáticamente a los dispositivos de asistencia esa funcionalidad.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo a configurar su marcado agregado etiquetas de apertura y cierre `main` entre el `header` y el `footer` (cubierto en otros desafíos). Mantenga las etiquetas `main` vacías por ahora.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
Las etiquetas `main` deben estar entre la etiqueta `header` de cierre y la etiqueta `footer` de apertura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Saber Cuando el Texto Alt Debe Dejarse en Blanco
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
dashedName: know-when-alt-text-should-be-left-blank
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
En el último desafío, aprendiste que es obligatorio incluir un atributo `alt` al usar etiquetas `img`. 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 `alt` el texto puede parecer redundante o innecesario.
|
||||
|
||||
En situaciones en las que una ya está explicada con contenido de texto, o no agrega significado a una página, el `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa". Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de lectores de pantalla del lenguaje de marcado.
|
||||
|
||||
**Nota:** Para imágenes con subtítulos, es posible que desees incluir texto `alt`, ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha programado una página esqueleto para la parte del blog de su sitio web. Está planeando agregar una ruptura visual entre sus dos artículos con una imagen decorativa de una espada samurái. Agrega un atributo `alt` a la etiqueta `img` y establezca una cadena vacía. (Ten en cuenta que la imagen `src` no enlace a un archivo real - no te preocupes de que no hay espadas que aparece en la pantalla.)
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu etiqueta `img` debe tener un atributo `alt`.
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
El atributo `alt` debe establecerse en una cadena vacía.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Haz que los elementos solo sean visibles para un lector de pantalla mediante CSS personalizado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||
forumTopicId: 301020
|
||||
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico, y el uso de etiquetas semánticamente significativas alrededor de tu contenido antes de introducir el aspecto de diseño visual.
|
||||
|
||||
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en tu página cuando deseas ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios del lector de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos exclusivos de lector de pantalla fuera del área visual de la ventana del navegador.
|
||||
|
||||
Aquí hay un ejemplo de las reglas de CSS que logran esto:
|
||||
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** Los siguientes enfoques CSS No harán lo mismo:
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> o <code>visibility: hidden;</code> oculta el contenido para todos, incluidos los usuarios del lector de pantalla</li>
|
||||
<li>Los valores cero para los tamaños del píxel, como <code>width: 0px; height: 0px;</code> eliminan ese elemento del flujo de tu documento, lo que significa que los lectores de pantalla lo ignorarán</li>
|
||||
</ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y coloco los datos en una tabla para sus usuarios con dificultad visual. La tabla ya tiene una clase `sr-only`, pero las reglas de CSS aún no se han completado. Asigna a `position` un valor `absolute`, a `left` un valor de `-10000px`, y tanto a `width` como a `height` un valor de `1px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe establecer la propiedad `position` de la clase `sr-only` en un valor de `absolute`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
Tu código debe establecer la propiedad `left` de la clase `sr-only` en un valor de `-10000px`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
Tu código debe establecer la propiedad `width` de la clase `sr-only` en un valor de `1` píxel.
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
Tu código debe establecer la propiedad `height` de la clase `sr-only` en un valor de `1` píxel.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Haz que los enlaces sean navegables con claves de acceso HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 301021
|
||||
dashedName: make-links-navigable-with-html-access-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML ofrece el atributo `accesskey` para especificar una tecla de acceso directo para activar o enfocar un elemento. Esto puede hacer que la navegación sea más eficiente para los usuarios de solo usan el teclado.
|
||||
|
||||
HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con elementos interactivos. Esto incluye enlaces, botones y controles de formulario.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<button accesskey="b">Important Button</button>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
El Gato Campero quiere que los enlaces alrededor de los dos títulos de artículos de blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agrega un atributo `accesskey` a ambos enlaces y establece el primero en `g` (para Garfield) y el segundo en `c` (para Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe agregar un atributo `accesskey` a la etiqueta `a` con el `id` de `first`.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
Tu código debe agregar un atributo `accesskey` a la etiqueta `a` con el `id` de `second`.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
Tu código debe establecer el atributo `accesskey` en la etiqueta `a` con el `id` de `first` en `g`. Ten en cuenta que las mayúsculas y minúsculas importan.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
Tu código debe establecer `accesskey` en la etiqueta `a` con el `id` de `second` en `c`. Ten en cuenta que las mayúsculas y minúsculas importan.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</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>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</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>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Haz que la navegación del lector de pantalla sea más fácil con el footer Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Similar a `header` y `nav`, el elemento `footer` tiene una característica de referencia incorporada que permite a los dispositivos de asistencia navegar rápidamente hacia él. Se utiliza principalmente para contener información sobre derechos de autor o enlaces a documentos relacionados que normalmente se encuentran en la parte inferior de una página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
La página de entrenamiento del Camper Cat está progresando bien. Cambia el `div` que utilizó para envolver su información de copyright en la parte inferior de la página a un elemento `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `footer`.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Tu código debe tener una etiqueta `footer` de apertura y cierre.
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Haz que la navegación del lector de pantalla sea más fácil con el encabezado Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
forumTopicId: 301023
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El siguiente elemento HTML5 que agrega significado semántico y mejora la accesibilidad es la etiqueta `header`. 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 en varias páginas.
|
||||
|
||||
`header` comparte la función landmark integrada que viste con `main`, lo que permite a las tecnologías de asistencia navegar rápidamente a ese contenido.
|
||||
|
||||
**Nota:** El `header` está diseñado para usarse dentro de la etiqueta `body` de tu documento HTML. Esto es diferente al elemento `head`, que contiene el título de la página, metainformación, etc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat está escribiendo algunos grandes artículos sobre el entrenamiento ninja, y quiere añadir una página para ellos a su sitio. Cambia la parte superior `div` que actualmente contiene el `h1` a una etiqueta `header`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `header`.
|
||||
|
||||
```js
|
||||
assert($('header').length == 1);
|
||||
```
|
||||
|
||||
Tus etiquetas `header` deben envolver `h1`.
|
||||
|
||||
```js
|
||||
assert($('header').children('h1').length == 1);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Tu elemento `header` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/header>/g) &&
|
||||
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Haz que la navegación del lector de pantalla sea más fácil con el navegador Landmark
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
forumTopicId: 301024
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El elemento `nav` es otro elemento de HTML5 con la función de punto de referencia insertado para facilitar la navegación del lector de pantalla. Esta etiqueta esta destinada a envolver los principales enlaces de navegación en tu página.
|
||||
|
||||
Si hay enlaces internos repetidos en la parte de la página, no es necesario usar el lenguaje de marcado con aquellos con una etiqueta `nav` también. Usando una etiqueta `footer` (cubierto en el próximo desafío) es suficiente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un `div`. Cambia la etiqueta `div` a una etiqueta `nav` para mejorar la accesibilidad en su página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `nav`.
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
Tus etiquetas `nav` deben envolver la etiqueta `ul` y sus elementos de la lista.
|
||||
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Tu elemento `nav` debería tener un cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/nav>/g) &&
|
||||
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
</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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Estandarizar horas con el atributo datetime HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando con el tema de fecha, HTML5 también introdujo el elemento `time` junto con un atributo `datetime` para estandarizar los tiempos. Este es un elemento inline que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene mediante el atributo `datetime`. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta `time` alrededor del texto `Thursday, September 15<sup>th<sup>` y agregue un atributo `datetime` establecido en `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener un elemento `p` que incluya el texto `Thank you to everyone for responding to Master Camper Cat's survey.` e incluye un elemento `time`.
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
```
|
||||
|
||||
Las etiquetas `time` añadidas deben envolver el texto `Thursday, September 15<sup>th</sup>`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
timeElement.length &&
|
||||
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
Tu etiqueta `time` agregada debe tener un atributo `datetime` que no esté vacío.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr.length);
|
||||
```
|
||||
|
||||
Tu atributo `datetime` agregado debe establecerse en un valor de `2016-09-15`.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = $("article > p")
|
||||
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||
const datetimeAttr = $(timeElement).attr("datetime");
|
||||
</script>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</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>
|
||||
</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>
|
||||
</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>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<section>
|
||||
<h3>Comments:</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>
|
||||
</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>
|
||||
</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>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Usa títulos para mostrar relaciones jerárquicas de contenido
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los títulos (`h1` a `h6` elementos) son etiquetas de caballo de batalla que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla se pueden configurar para leer solo los títulos de una página para que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de los títulos en tu lenguaje de marcado tengan un significado semántico y se relacionen entre sí, no se elijan simplemente por sus valores de tamaño.
|
||||
|
||||
* Significado semántico* significa que la etiqueta que usas alrededor del contenido indica el tipo de información que contiene.
|
||||
|
||||
Si estuvieras escribiendo un documento 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. Debería ser su propia sección. Del mismo modo, las etiquetas de los títulos en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido.
|
||||
|
||||
Los títulos con rango igual (o superior) comienzan nuevas secciones implícitas, los títulos con rango inferior comienzan subsecciones de la anterior.
|
||||
|
||||
Como ejemplo, una página con un elemento `h2` seguido de varias subsecciones marcadas con etiquetas `h4` confundirá a un lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puede usar CSS para editar el tamaño relativo.
|
||||
|
||||
Un punto final, cada página siempre debe tener un (y solo un) elemento `h1`, que es el tema principal de tu contenido. Este y los otros títulos son utilizados en parte por los motores de búsqueda para comprender el tema de la página.
|
||||
|
||||
# --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 lenguaje de marcado de un significado semántico al contenido y muestre las relaciones padre-hijo adecuadas de sus secciones. Cambia todas las etiquetas `h5` al nivel de título adecuado para indicar que son subsecciones de las `h2`. Utiliza etiquetas `h3` para este propósito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener 6 etiquetas `h3`.
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
Tu código debe tener 6 etiquetas de cierre `h3`.
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `h5`.
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta de cierre `h5`.
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>How to Become a 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>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Usa tabindex para agregar enfoque de teclado a un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El atributo HTML `tabindex` tiene tres funciones distintas relacionadas con el foco del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar en él. El valor (un número entero que es positivo, negativo o cero) determina el comportamiento.
|
||||
|
||||
Ciertos elementos, como los vínculos y los controles de formulario, reciben automáticamente el foco del teclado cuando un usuario pestañas a través de una página. Está en el mismo orden en que los elementos vienen en la fuente del lenguaje de marcado de HTML. Esta misma funcionalidad se puede dar a otros elementos, como `div`, `span` y `p`, colocando un atributo `tabindex="0"`. Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
|
||||
**Nota:** Un valor negativo de `tabindex` (normalmente -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 `div` utilizando para una ventana emergente), y esta más allá del alcance de estos desafíos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Él sabe que los campos de entrada obtienen automáticamente el enfoque del teclado, pero quiere asegurarse de que los usuarios de su teclado hagan una pausa en las instrucciones mientras tabulan los elementos. Agrega un atributo `tabindex` a la etiqueta `p` y establezca su valor en `0`. Extra - el uso de `tabindex` también permite que la pseudo-clase CSS `:focus` funcione en la etiqueta `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe agregar un atributo `tabindex` a la etiqueta `p` que contiene las instrucciones del formulario.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
Tu código debe establecer el atributo `tabindex` en la etiqueta `p` en un valor de 0.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Utiliza tabindex para especificar el orden de enfoque del teclado para múltiples elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El atributo `tabindex` 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="1"` hará que el teclado se enfoque primero en ese elemento. Luego, recorre la secuencia de valores `tabindex` especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y `tabindex="0"`.
|
||||
|
||||
Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que usa el código 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, ten cuidado antes de aplicarla.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="1">I get keyboard focus, and I get it first!</div>`
|
||||
|
||||
`<div tabindex="2">I get keyboard focus, and I get it second!</div>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat tiene un campo de búsqueda en su página de Citas Inspiradoras que planea colocar en la esquina superior derecha con CSS. Él quiere que los controles de formulario de búsqueda `input` y envío `input` sean los dos primeros elementos en el orden de tabulación. Agrega un atributo `tabindex` establecido en `1` al `search` `input`, y un atributo `tabindex` establecido en `2` al `submit` `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe agregar un atributo `tabindex` a la etiqueta `search` `input`.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
Tu código debe agregar un atributo `tabindex` a la etiqueta `submit` `input`.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
Tu código debe establecer el atributo `tabindex` en la etiqueta `search` `input` a un valor de 1.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
Tu código debe establecer el atributo `tabindex` en la etiqueta `submit` `input` a un valor de 2.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Envuelve el contenido en el elemento article
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
dashedName: wrap-content-in-the-article-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`article` es otro de los nuevos elementos HTML5 que agrega significado semántico a tu lenguaje de marcado. `article` es un elemento de seccionamiento, y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en el foro o artículos de noticias.
|
||||
|
||||
Determinar si el contenido puede estar solo suele ser una decisión complicada, pero hay un par de pruebas simples que puedes usar. Pregúntate, si elimino todo el contexto circundante, ¿ese contenido aún tendría sentido? Del mismo modo para el texto, ¿el contenido se mantendría si estuviera en una fuente RSS?
|
||||
|
||||
Recuerda que las personas que usan tecnologías de asistencia dependen de un lenguaje de marcado organizado y semánticamente significativo para comprender mejor su trabajo.
|
||||
|
||||
**Nota:** El elemento `section` también es nuevo HTML5, y tiene significado semántico ligeramente diferente al de `article`. Un `article` es para contenido independiente, y una `section` 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 `article`, entonces cada capítulo es una `section`. Cuando no haya relación entre grupos de contenido, usa un `div`.
|
||||
|
||||
`<div>` - grupos de contenido `<section>` - grupos de contenido relacionado `<article>` - grupos independientes, contenido autónomo
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat usó etiquetas `article` para envolver las publicaciones en la página de su blog, pero olvido usarlas en la parte superior. Cambia la etiqueta `div` para usar una etiqueta `article`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener tres etiquetas `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master 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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Envuelve los botones de radio en un elemento fieldset para una mejor accesibilidad
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El siguiente tema de formulario cubre la accesibilidad de los botones de radio. A cada opción se le da una `label` (etiqueta) con un atributo `for` vinculado al `id` del elemento correspondiente como se cubrió en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
||||
|
||||
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta `legend` para proporcionar una descripción para la agrupación, la cual es leída por los lectores de pantalla para cada elección en el elemento `fieldset`.
|
||||
|
||||
El contenedor `fieldset` y la etiqueta `legend` no son necesarias cuando las opciones se explican por sí mismas, como selección de género. Usar `label` con el atributo `for` para cada botón de radio es suficiente.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one of these three items:</legend>
|
||||
<input id="one" type="radio" name="items" value="one">
|
||||
<label for="one">Choice One</label><br>
|
||||
<input id="two" type="radio" name="items" value="two">
|
||||
<label for="two">Choice Two</label><br>
|
||||
<input id="three" type="radio" name="items" value="three">
|
||||
<label for="three">Choice Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat quiere información sobre el nivel ninja de sus usuarios cuando se registran en su lista de correo electrónico. Agregó un conjunto de botones de radio y aprendió de nuestra última lección a usar etiquetas `label` con atributos `for` para cada opción. ¡Vamos Camper Cat! Sin embargo, su código todavía necesita ayuda. Cambia la etiqueta `div` que rodea los botones de radio a una etiqueta `fieldset` y cambia la etiqueta `p` dentro de ella a una `legend`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener una etiqueta `fieldset` alrededor del conjunto de botones de radio.
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
El elemento `fieldset` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Tu código debe tener una etiqueta `legend` alrededor del texto preguntando que nivel ninja es un usuario.
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
Tu código no debe tener ninguna etiqueta `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Tu código ya no debería tener una etiqueta `p` alrededor del texto preguntando que nivel ninja es un usuario.
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</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>
|
||||
</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 lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</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>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
Reference in New Issue
Block a user