chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Creare una media query
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le Media Queries sono una nuova tecnica introdotta in CSS3 che cambia la presentazione dei contenuti in base alle diverse dimensioni della viewport (lo schermo). La viewport è l'area di una pagina web visibile all'utente, ed è diversa a seconda del dispositivo utilizzato per accedere al sito.
|
||||
|
||||
Le Media Queries consistono in un tipo di media, e se questo tipo di supporto corrisponde al tipo di dispositivo su cui viene visualizzato il documento, vengono applicati gli stili corrispondenti. All'interno delle tue media query puoi avere tutti i selettori e gli stili che desideri.
|
||||
|
||||
Ecco un esempio di una media query che restituisce il contenuto quando la larghezza del dispositivo è inferiore o uguale a `100px`:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
e la seguente media query restituisce il contenuto quando l'altezza del dispositivo è maggiore o uguale a `350px`:
|
||||
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
Ricorda, il CSS all'interno della media query viene applicato solo se il tipo di supporto corrisponde a quello del dispositivo utilizzato.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una media query, in modo che il tag `p` abbia un `font-size` di `10px` quando l'altezza del dispositivo è minore o uguale a `800px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dichiarare una `@media` query per dispositivi con `height` (altezza) inferiore o uguale a `800px`.
|
||||
|
||||
```js
|
||||
const media = new __helpers.CSSHelp(document).getCSSRules('media');
|
||||
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe avere una `font-size` di `10px` quando l'altezza `height` del dispositivo è inferiore o uguale a `800px`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
|
||||
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe avere una `font-size` iniziale di `20px` quando l'altezza `height` del dispositivo è superiore a `800px`.
|
||||
|
||||
```js
|
||||
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
|
||||
assert(ifPFirst?.style?.fontSize === '20px');
|
||||
```
|
||||
|
||||
# --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: Rendere un'immagine responsiva
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rendere le immagini responsive con CSS è in realtà molto semplice. È sufficiente aggiungere queste proprietà a un'immagine:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
La `max-width` di `100%` assicurerà che l'immagine non sia mai più larga del contenitore in cui si trova, e l'`height` impostata a `auto` farà in modo che l'immagine mantenga le sue proporzioni originali.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi le regole di stile alla classe `responsive-img` per renderla responsiva. Non dovrebbe mai essere più grande del suo contenitore (in questo caso la finestra di anteprima) e dovrebbe mantenere il suo rapporto di aspetto originale. Dopo aver aggiunto il codice, ridimensiona l'anteprima per vedere come si comportano le immagini.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `responsive-img` dovrebbe avere una `max-width` impostata a `100%`.
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
La tua classe `responsive-img` dovrebbe avere una `height` impostata su `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,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Rendere i caratteri responsivi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Invece di utilizzare `em` o `px` per dimensionare il testo, è possibile utilizzare le unità di visualizzazione responsive per i caratteri. Le unità viewport, come le percentuali, sono unità relative, ma sono basate su elementi diversi. Le unità viewport sono relative alle dimensioni (larghezza o altezza) di un dispositivo, e le percentuali sono relative alla dimensione dell'elemento contenitore genitore.
|
||||
|
||||
Le quattro diverse unità viewport sono:
|
||||
|
||||
<ul><li><code>vw</code> (larghezza della viewport): <code>10vw</code> sarebbe il 10% della larghezza della viewport.</li><li><code>vh</code> (altezza della viewport): <code>3vh</code> sarebbe il 3% dell'altezza della viewport.</li><li><code>vmin</code> (minimo): <code>70vmin</code> sarebbe il 70% della dimensione più piccola della viewport (altezza o larghezza).</li><li><code>vmax</code> (viewport maximum): <code>100vmax</code> sarebbe 100% della dimensione maggiore della viewport (altezza o larghezza).</li></ul>
|
||||
|
||||
Ecco un esempio che imposta un tag `body` al 30% della larghezza della viewport.
|
||||
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta la `width` del tag `h2` all'80% della larghezza della viewport e la `width` del paragrafo come 75% della dimensione più piccola della viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo tag `h2` dovrebbe avere una `width` di 80vw.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo tag `p` dovrebbe avere una `width` di 75vmin.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(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: Usare un'immagine retina per display con risoluzione superiore
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Con l'aumento dei dispositivi connessi a Internet, le loro dimensioni e specifiche variano, e i display che usano potrebbero essere diversi esternamente e internamente. La densità dei pixel è un aspetto che potrebbe essere diverso su un dispositivo rispetto agli altri e questa densità è conosciuta come Pixel Per Inch(PPI) o Dots Per Inch(DPI). Il display più famoso è quello noto come "Retina Display" sugli ultimi notebook Apple MacBook Pro e recentemente computer iMac. A causa della differenza di densità di pixel tra un display "Retina" e "Non-Retina", alcune immagini che non sono state fatte con un display ad alta risoluzione in mente potrebbero sembrare "pixelate" quando renderizzate su un display ad alta risoluzione.
|
||||
|
||||
Il modo più semplice per far apparire correttamente le immagini sui display ad alta risoluzione, come il "retina display" dei MacBook Pro è quello di definire i loro valori di `width` e `height` come la metà della dimensione del file originale. Ecco un esempio di un'immagine che usa solo la metà dell'altezza e della larghezza originali:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta `width` e `height` del tag `img` a metà dei loro valori originali. In questo caso, sia l'`height` che la `width` originali sono `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo tag `img` dovrebbe avere una `width` di 100 pixel.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
Il tuo tag `img` dovrebbe avere una `height` di 100 pixel.
|
||||
|
||||
```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