chore(i18n,learn): processed translations (#41378)
* chore(i8n,learn): processed translations * Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
camperbot
GitHub
@@ -26,7 +26,7 @@ Acá tenemos un ejemplo:
|
||||
|
||||
# --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"`.
|
||||
Es hora de salir del Camper Cat y conocer a nuestro compañero Zersiax (@zersiax), un campeón en accesibilidad y un usuario de lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, añade un 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.
|
||||
|
||||
|
||||
@@ -11,11 +11,11 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
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.
|
||||
De forma predeterminada, un navegador muestra estos elementos de forma similar al humilde `div`. Sin embargo, usarlos cuando sea apropiado le da un significado adicional a 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 de "saltar al contenido principal" en la parte superior de una página, el uso de una etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
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 de "Saltar al contenido principal" en la parte superior de la página, el uso de la etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ 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.
|
||||
El atributo HTML `tabindex` tiene tres funciones distintas relacionadas con el foco del teclado de un elemento. Cuando está en una etiqueta, indica que se puede hacer foco en el elemento. 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:
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
`article` es otro de los nuevos elementos HTML5 que agrega significado semántico a tu lenguaje de marcado. `article` es un elemento de sección, y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en 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?
|
||||
Determinar si el contenido puede ser independiente suele ser una cuestión de criterio, 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.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ 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.
|
||||
El siguiente tema sobre formularios cubre la accesibilidad de los botones tipo 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`.
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ La opción `hsl()` en CSS también hace que sencillo ajustar el tono de un color
|
||||
|
||||
# --instructions--
|
||||
|
||||
Todos los elementos tienen un `background-color` predeterminado de `transparent`. Nuestro elemento `nav` parece tener un fondo `cyan` ya que el elemento detrás del mismo tiene un `background-color` establecido a `cyan`. Añade un `background-color` al elemento `nav` para que use el mismo tono `cyan`, pero tiene `80% saturation` y `25% lightness` para cambiar su tono y sombreado.
|
||||
Todos los elementos tienen un `background-color` predeterminado de `transparent`. Nuestro elemento `nav` parece tener un fondo `cyan` ya que el elemento detrás del mismo tiene un `background-color` establecido a `cyan`. Añade un `background-color` al elemento `nav` para que use el mismo tono de `cyan`, pero que tenga `80%` de saturación y luminosidad `25%` para cambiar su tono y sombra.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,13 +9,13 @@ dashedName: use-the-u-tag-to-underline-text
|
||||
|
||||
# --description--
|
||||
|
||||
Para subrayar el texto, puedes utilizar la etiqueta `u`. Esto se usa a menudo para indicar que una sección del texto es importante, o algo que hay que recordar. Con la etiqueta `u`, el navegador aplica el CSS de `text-decoration: underline;` al elemento.
|
||||
Para subrayar texto, puedes usar la etiqueta `u`. Esto se utiliza a menudo para indicar que una sección del texto es importante, o algo que hay que recordar. Con la etiqueta `u`, el navegador aplica el CSS de `text-decoration: underline;` al elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Envuelve la etiqueta `u` solo alrededor del texto `Ph.D. students`.
|
||||
Envuelve la etiqueta `u` solo alrededor del texto `Ph.D. students `.
|
||||
|
||||
**Nota:** Trata de evitar usar la etiqueta `u` cuando se pueda confundir con un enlace. Las etiquetas Anchor también tienen un formato subrayado por defecto.
|
||||
**Nota:** Trata de evitar el uso de la etiqueta `u`, puesto que podría confundirse con un enlace. Las etiquetas de enlaces tienen un formato subrayado por defecto.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -25,7 +25,7 @@ Tu código debe agregar una etiqueta `u` al lenguaje de marcado.
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
Envuelve la etiqueta `u` solo alrededor del texto `Ph.D. students`.
|
||||
Envuelve la etiqueta `u` solo alrededor del texto `Ph.D. students` </code>.
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows
|
||||
|
||||
# --description--
|
||||
|
||||
La cuadrícula (grid) que creaste en el último desafío establecerá el número de filas automáticamente. Para ajustar las filas manualmente, usa la propiedad `grid-template-rows` de la misma manera como usaste `grid-template-columns` en el desafío anterior.
|
||||
La cuadrícula (grid) que creaste en el último desafío establecerá el número de filas automáticamente. Para ajustar las filas manualmente, usa la propiedad `grid-template-rows` de la misma manera en la que usaste `grid-template-columns` en el desafío anterior.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ En la segunda cuadrícula (grid), usa `auto-fit` con `repeat` para rellenar la c
|
||||
|
||||
# --hints--
|
||||
|
||||
La clase `container2` debe tener una propiedad `grid-template-columns` con `repeat` y `auto-fit` que cubra la cuadrícula con columnas que tengan un ancho mínimo de `60px` y máximo de `1fr`.
|
||||
La clase `container2` debe tener una propiedad `grid-template-columns` con `repeat` y `auto-fit` que cubra la cuadrícula con columnas que tengan un ancho mínimo de `60px` y un máximo de `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user