Corrected translation of the challenge Create Media Query (#33898)
* Corrected translation of the challenge Create Media Query * fixed spanish translation for csss-grid challenge * Update improve-accessibility-of-audio-content-with-the-audio-element.spanish.md * corrected aplied accesibility challenge * Fixed spanish translation submit button challenge * Corrected translation of the challenge Create Media Query
This commit is contained in:
anamariaaya
Jaka Kranjc
@ -7,29 +7,32 @@ localeTitle: Mejorar la accesibilidad del contenido de audio con el elemento de
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> El elemento de <code>audio</code> de HTML5 le da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en su marca. El contenido de audio también necesita una alternativa de texto para que las personas sordas o con dificultades auditivas puedan acceder. Esto se puede hacer con el texto cercano en la página o un enlace a una transcripción. La etiqueta de <code>audio</code> soporta el atributo de <code>controls</code> . Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador, y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración. Aquí hay un ejemplo: <blockquote> <audio id = "meowClip" controles> <br> <source src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <source src = "audio / meow.ogg" type = "audio / ogg" /> <br> </audio> <br></blockquote> <strong>Nota</strong> <br> El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos. </section>
|
||||
<section id="description"> El elemento de <code>audio</code> de HTML5 da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en tu marca. El contenido de audio también necesita un texto alternativo para que las personas sordas o con dificultades auditivas puedan acceder a él. Esto se puede hacer con un texto cercano en la página o un enlace a una transcripción. La etiqueta de <code>audio</code> soporta el atributo de <code>controls</code>. Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración. Aquí hay un ejemplo:
|
||||
<blockquote> <audio id = "meowClip" controles> <br> <source src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <source src = "audio / meow.ogg" type = "audio / ogg" /> <br> </audio> <br></blockquote>
|
||||
|
||||
<strong>Nota</strong> <br> El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Es hora de tomar un descanso de Camper Cat y conocer a su compañero de campista Zersiax (@zersiax), un campeón de la accesibilidad y un usuario lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agregue un elemento de <code>audio</code> después de la <code>p</code> . Incluir el atributo de <code>controls</code> . Luego coloque una etiqueta de <code>source</code> dentro de las etiquetas de <code>audio</code> con el atributo <code>src</code> configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y <code>type</code> atributo establecido en "audio / mpeg". <strong>Nota</strong> <br> El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios de lectores de pantalla. </section>
|
||||
<section id="instructions"> Es hora de tomar un descanso de Camper Cat y conocer a su compañero campista Zersiax (@zersiax), un campeón de la accesibilidad y un usuario lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agrega un elemento de <code>audio</code> después de la <code>p</code>. Incluye el atributo de <code>controls</code>. Luego coloca una etiqueta de <code>source</code> dentro de las etiquetas de <code>audio</code> con el atributo <code>src</code> configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y el atributo <code>type</code> establecido en "audio / mpeg". <strong>Nota</strong> <br> El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios lectores de pantalla. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>audio</code> .
|
||||
- text: Tu código debe tener una etiqueta de <code>audio</code> .
|
||||
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
|
||||
- text: Asegúrese de que su elemento de <code>audio</code> tiene una etiqueta de cierre.
|
||||
- text: Asegúrate de que tu elemento de <code>audio</code> tiene una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
|
||||
- text: La etiqueta de <code>audio</code> debe tener el atributo de <code>controls</code> .
|
||||
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
|
||||
- text: Su código debe tener una etiqueta de <code>source</code> .
|
||||
- text: Tu código debe tener una etiqueta de <code>source</code> .
|
||||
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
|
||||
- text: Su etiqueta de <code>source</code> debe estar dentro de las etiquetas de <code>audio</code> .
|
||||
- text: Tu etiqueta de <code>source</code> debe estar dentro de las etiquetas de <code>audio</code> .
|
||||
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
|
||||
- text: El valor del atributo <code>src</code> en la etiqueta de <code>source</code> debe coincidir exactamente con el enlace en las instrucciones.
|
||||
- text: El valor del atributo <code>src</code> en la etiqueta de <code>source</code> debe coincidir exactamente con el enlace de las instrucciones.
|
||||
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
|
||||
- text: Su código debe incluir un atributo de <code>type</code> en la etiqueta de <code>source</code> con un valor de audio / mpeg.
|
||||
- text: Tu código debe incluir un atributo de <code>type</code> en la etiqueta de <code>source</code> con un valor de audio / mpeg.
|
||||
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
|
||||
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Agregar un botón de envío a un formulario
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Agreguemos un botón <code>submit</code> a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo <code>action</code> de su formulario. Aquí hay un ejemplo de botón <code>submit</code>: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
<section id="description"> Agreguemos un botón tipo <code>submit</code> a tu formulario. Al hacer clic en este botón, los datos de tu formulario se enviarán a la URL que especificaste con el atributo <code>action</code> de tu formulario. Aquí hay un ejemplo de botón de envío: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Agregue un botón tipo <code>submit</code> con "Submit" como su texto, como el último elemento de su elemento <code>form</code>.</section>
|
||||
@ -17,13 +17,13 @@ localeTitle: Agregar un botón de envío a un formulario
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su formulario debe tener un botón en su interior.
|
||||
- text: Tu formulario debe tener un botón en su interior.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
- text: Su botón de envío debe tener el atributo <code>type</code> establecido para <code>submit</code> .
|
||||
- text: Tu botón de envío debe tener el <code>type</code> atributo establecido para <code>submit</code> .
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: Su botón de enviar solo debe tener el texto "Submit".
|
||||
- text: Tu botón de enviar solo debe tener el texto "Submit".
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: Asegúrese de que su elemento <code>button</code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrate de que el elemento <code>button</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Agregue espacios más rápido con la rejilla
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>grid-gap</code> es una propiedad abreviada de <code>grid-row-gap</code> y <code>grid-column-gap</code> de los dos desafíos anteriores que es más conveniente de usar. Si <code>grid-gap</code> tiene un valor, creará un gap entre todas las filas y columnas. Sin embargo, si hay dos valores, utilizará el primero para establecer el espacio entre las filas y el segundo valor para las columnas. </section>
|
||||
<section id="description"> <code>grid-gap</code> es una propiedad abreviada de <code>grid-row-gap</code> y <code>grid-column-gap</code> de los dos desafíos anteriores, que es más conveniente de usar. Si <code>grid-gap</code> tiene un valor, creará una brecha entre todas las filas y columnas. Sin embargo, si hay dos valores, utilizará el primero para establecer el espacio entre las filas y el segundo valor para las columnas. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Usa <code>grid-gap</code> para introducir un espacio de <code>10px</code> entre las filas y un espacio de <code>20px</code> entre las columnas. </section>
|
||||
@ -17,7 +17,7 @@ localeTitle: Agregue espacios más rápido con la rejilla
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> clase <code>container</code> debe tener una propiedad de <code>grid-gap</code> que introduce <code>10px</code> espacio de <code>10px</code> entre las filas y un espacio de <code>20px</code> entre las columnas.
|
||||
- text: <code>container</code> La clase <code>container</code> debe tener una propiedad de <code>grid-gap</code> que introduce <code>10px</code> espacio de <code>10px</code> entre las filas y un espacio de <code>20px</code> entre las columnas.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");'
|
||||
|
||||
```
|
||||
|
||||
@ -7,21 +7,20 @@ localeTitle: Crear una consulta de medios
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Las consultas de medios son una nueva técnica introducida en CSS3 que cambia la presentación del contenido en función de los diferentes tamaños de las vistas. La ventana gráfica es el área visible de un usuario de una página web y es diferente según el dispositivo utilizado para acceder al sitio. Las consultas de medios consisten en un tipo de medio, y si ese tipo de medio coincide con el tipo de dispositivo en el que se muestra el documento, se aplican los estilos. Puede tener tantos selectores y estilos dentro de su consulta de medios como desee. Este es un ejemplo de una consulta de medios que devuelve el contenido cuando el ancho del dispositivo es menor o igual a 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> y la siguiente consulta de medios devuelve el contenido cuando la altura del dispositivo es mayor o igual a 350px: <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Recuerde, el CSS dentro de la consulta de medios se aplica solo si el tipo de medios coincide con el del dispositivo que se está utilizando. </section>
|
||||
<section id="description"> Las Consultas de Medios (Media Queries) son una nueva técnica introducida en CSS3 que cambia la presentación del contenido en función de los diferentes tamaños de las vistas. La vista gráfica es el área visible de un usuario de una página web y es diferente según el dispositivo utilizado para acceder al sitio. Las Consultas de Medios consisten en un tipo de medio y si ese tipo de medio coincide con el tipo de dispositivo en el que se muestra el documento, se aplican los estilos. Puedes tener tantos selectores y estilos dentro de tu Consulta de Medios como desees. Este es un ejemplo de una consulta de medios que devuelve el contenido cuando el ancho del dispositivo es menor o igual a 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> y la siguiente consulta de medios devuelve el contenido cuando la altura del dispositivo es mayor o igual a 350px: <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Recuerda, el CSS dentro de la consulta de medios se aplica solo si el tipo de medios coincide con el del dispositivo que se está utilizando. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Agregue una consulta de medios, de modo que la etiqueta <code>p</code> tenga un <code>font-size</code> de <code>font-size</code> de 10 px cuando la altura del dispositivo sea menor o igual a 800 px. </section>
|
||||
<section id="instructions"> Agrega una consulta de medios, de modo que la etiqueta <code>p</code> tenga un <code>font-size</code> de e 10 px cuando la altura del dispositivo sea menor o igual a 800 px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su elemento <code>p</code> debe tener el <code>font-size</code> de <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px.
|
||||
testString: 'assert($("p").css("font-size") == "10px", "Su elemento <code>p</code> debe tener el <code>font-size</code> de <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px.");'
|
||||
- text: Declare una consulta <code>@media</code> para dispositivos con una <code>height</code> menor o igual a 800px.
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare una consulta <code>@media</code> para dispositivos con una <code>height</code> menor o igual a 800px.");'
|
||||
|
||||
- text: Tu elemento <code>p</code> debe tener el <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px.
|
||||
testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");'
|
||||
- text: Declara una consulta <code>@media</code> para dispositivos con una <code>height</code> menor o igual a 800px.
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user