docs: add Spanish docs
This commit is contained in:
Beau Carnes
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Create a Media Query
|
||||
localeTitle: Crear una consulta de medios
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## 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 medio coincide con el de el 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>
|
||||
|
||||
## 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", "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: 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 a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Add media query below */
|
||||
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Make an Image Responsive
|
||||
localeTitle: Hacer una imagen receptiva
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Hacer que las imágenes respondan con CSS es realmente muy simple. En lugar de aplicar un ancho absoluto a un elemento:
|
||||
<code>img { width: 720px; }</code>
|
||||
Puedes usar:
|
||||
<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>
|
||||
La propiedad de <code>max-width</code> del 100% ajusta la imagen para que se ajuste al ancho de su contenedor, pero la imagen no se estirará más que su ancho original. La configuración de la propiedad de <code>display</code> para bloquear cambia la imagen de un elemento en línea (su valor predeterminado) a un elemento de bloque en su propia línea. La propiedad de <code>height</code> de auto mantiene la relación de aspecto original de la imagen.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue reglas de estilo para la etiqueta <code>img</code> para que responda al tamaño de su contenedor. Debe mostrarse como un elemento de nivel de bloque, debe ajustarse a todo el ancho de su contenedor sin estirarlo y debe mantener su relación de aspecto original.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su etiqueta <code>img</code> debe tener un <code>max-width</code> establecido al 100%.
|
||||
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
|
||||
- text: Su etiqueta <code>img</code> debe tener un conjunto de <code>display</code> para bloquear.
|
||||
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
|
||||
- text: Tu etiqueta <code>img</code> debe tener una <code>height</code> establecida en auto.
|
||||
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Make Typography Responsive
|
||||
localeTitle: Hacer que la tipografía responda
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En lugar de usar <code>em</code> o <code>px</code> para <code>px</code> tamaño del texto, puede usar unidades de vista para tipografía sensible. Las unidades de vista, como los porcentajes, son unidades relativas, pero se basan en elementos diferentes. Las unidades de la ventana gráfica son relativas a las dimensiones de la ventana gráfica (ancho o alto) de un dispositivo, y los porcentajes son relativos al tamaño del elemento contenedor primario.
|
||||
Las cuatro unidades de viewport diferentes son:
|
||||
<ul><li> <code>vw: 10vw</code> sería el 10% del ancho de la ventana <code>vw: 10vw</code> . </li><li> <code>vh: 3vh</code> sería el 3% de la altura de la ventana <code>vh: 3vh</code> . </li><li> <code>vmin: 70vmin</code> sería el 70% de la dimensión más pequeña de la ventana <code>vmin: 70vmin</code> (altura en función del ancho). </li><li> <code>vmax: 100vmax</code> sería el 100% de la dimensión más grande de la ventana <code>vmax: 100vmax</code> (altura en función del ancho). </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Establezca el <code>width</code> de la etiqueta <code>h2</code> en el 80% del ancho de la ventana gráfica y el <code>width</code> del párrafo como el 75% de la dimensión más pequeña de la ventana gráfica.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su etiqueta <code>h2</code> debe tener un <code>width</code> de 80vw.
|
||||
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
|
||||
- text: Su etiqueta <code>p</code> debe tener un <code>width</code> de 75vmin.
|
||||
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "h2 {width: 80vw;} p {width: 75vmin;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Use a Retina Image for Higher Resolution Displays
|
||||
localeTitle: Utilice una imagen de retina para pantallas de mayor resolución
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La forma más sencilla de hacer que sus imágenes aparezcan como "retina" (y optimizarlas para las pantallas de retina) es definir sus valores de <code>width</code> y <code>height</code> como solo la mitad de lo que es el archivo original.
|
||||
Aquí hay un ejemplo de una imagen que solo usa la mitad de la altura y el ancho originales:
|
||||
<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Establezca el <code>width</code> y el <code>height</code> de la etiqueta <code>img</code> en la mitad de sus valores originales. En este caso, tanto la <code>height</code> original como el <code>width</code> original son 200 px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su etiqueta <code>img</code> debe tener un <code>width</code> de 100 píxeles.
|
||||
testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
|
||||
- text: Su etiqueta <code>img</code> debe tener una <code>height</code> de 100 píxeles.
|
||||
testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user