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,100 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Crea un media query
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Las consultas de medios (Media Queries) son una nueva técnica introducida en CSS3 que cambia la presentación de contenido basado en diferentes tamaños de viewport. El viewport es el área visible del usuario de una página web, y es diferente dependiendo del dispositivo utilizado para acceder al sitio.
|
||||
|
||||
Las consultas de medios se basan en un tipo de medio, y si ese tipo de medio coincide con el tipo de dispositivo en el que se muestra el documento, los estilos se aplican. Puedes tener tantos selectores y estilos dentro de tu consultas de medios como desees.
|
||||
|
||||
Este es un ejemplo de una consultas de medios que devuelve el contenido cuando el ancho del dispositivo es menor o igual a 100px:
|
||||
|
||||
`@media (max-width: 100px) { /* CSS Rules */ }`
|
||||
|
||||
y la siguiente consultas de medios devuelve el contenido cuando la altura del dispositivo es mayor o igual a 350px:
|
||||
|
||||
`@media (min-height: 350px) { /* CSS Rules */ }`
|
||||
|
||||
Recuerda, el CSS dentro de las consultas de medios se aplica sólo si el tipo de medio coincide con el del dispositivo que se está usando.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega una consultas de medios, de forma que la etiqueta `p` tenga un `font-size` de `10px` cuando la altura del dispositivo sea menor o igual a `800px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes declarar una consulta `@media` para dispositivos con un `height` menor o igual a 800px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/@media\(max-height:800px\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe tener un `font-size` de 10px cuando el `height` del dispositivo sea menor o igual a 800px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `p` debe tener un `font-size` inicial de 20px cuando el `height` del dispositivo sea mayor que 800px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.replace(/@media.*}/g, '')
|
||||
.match(/p{font-size:20px;?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
</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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Haz una imagen responsiva
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hacer imágenes responsivas con CSS es realmente simple. Sólo tienes que agregar estas propiedades a una imagen:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
El ancho máximo `max-width` de `100%` se asegurará de que la imagen nunca es más ancha que el contenedor en el que se encuentra. y la altura `height` de `auto` hará que la imagen mantenga su relación de aspecto original.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega las reglas de estilo a la clase `responsive-img` para hacerla responsiva. Nunca debería ser más ancha que su contenedor (en este caso, es la ventana de vista previa) y debería mantener su relación de aspecto original. Después de haber agregado tu código, redimensiona la vista previa para ver cómo se comportan tus imágenes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu clase `responsive-img` debe tener un `max-width` establecido en `100%`.
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
Tu clase `responsive-img` debe tener un `height` establecido en `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Haz tipografía responsiva
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
En lugar de usar `em` o `px` para dimensionar texto, puedes usar unidades de viewport para obtener una tipografía responsiva. Las unidades de viewport, como los porcentajes, son unidades relativas, pero se basan en objetos diferentes. Las unidades de viewport son relativas a las dimensiones del viewport (ancho o alto) de un dispositivo, y los porcentajes son relativos al tamaño del elemento contenedor padre.
|
||||
|
||||
Las cuatro diferentes unidades de viewport son:
|
||||
|
||||
<ul><li><code>vw</code> (viewport width): <code>10vw</code> sería el 10% del ancho del viewport.</li><li><code>vh</code> (viewport height): <code>3vh</code> sería el 3% del alto del viewport.</li><li><code>vmin</code> (viewport mínimo): <code>70vmin</code> sería el 70% de la dimensión más pequeña del viewport (altura o ancho).</li><li><code>vmax</code> (viewport máximo): <code>100vmax</code> sería el 100% de la dimensión más grande del viewport (altura o ancho).</li></ul>
|
||||
|
||||
Aquí hay un ejemplo que establece una etiqueta `body` al 30% del ancho del viewport.
|
||||
|
||||
`body { width: 30vw; }`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece el ancho `width` de la etiqueta `h2` al 80% del ancho del viewport y el ancho `width` del párrafo como el 75% de la dimensión más pequeña del viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu etiqueta `h2` debe tener un `width` de 80vw.
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g));
|
||||
```
|
||||
|
||||
Tu etiqueta `p` debe tener un `width` de 75vmin.
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
width: 80vw;
|
||||
}
|
||||
p {
|
||||
width: 75vmin;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Usa una imagen retina para pantallas de alta resolución
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Con el aumento de los dispositivos conectados a Internet, sus tamaños y especificaciones varían, y las pantallas que utilizan podrían ser diferentes tanto externa como internamente. La densidad de píxeles es un aspecto que puede ser diferente de un dispositivo a otro, esta densidad se conoce como Pixel Por Pulgada, en inglés "pixels per inch" (PPI) o Puntos por Pulgada, en inglés "dots per inch" (DPI). La pantalla más famosa que aprovecha esto es la conocida como "Pantalla Retina" en los últimos portátiles Apple MacBook Pro, y recientemente en los ordenadores iMac. Debido a la diferencia en la densidad de píxeles entre las pantallas de "Retina" y "No Retina", algunas imágenes que no han sido hechas con una pantalla de alta resolución en mente podrían verse "pixeladas" cuando se muestran en una pantalla de alta resolución.
|
||||
|
||||
La forma más sencilla de hacer que tus imágenes aparezcan correctamente en pantallas de alta resolución, tales como la "pantalla retina" de las MacBook Pros es definir sus valores de ancho `width` y de altura `height` como sólo la mitad de lo que es el archivo original. Aquí hay un ejemplo de una imagen que solo utiliza la mitad de la altura y ancho originales:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece el `width` y `height` de la etiqueta `img` a la mitad de sus valores originales. En este caso, tanto el `height` original como el `width` original son de `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu etiqueta `img` debe tener un `width` de 100 píxeles.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
Tu etiqueta `img` debe tener un `height` de 100 píxeles.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
Reference in New Issue
Block a user