Update 2-ui\1-document\09-size-and-scroll\tasks

Author: marcellosurdi

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html

@@ -29,8 +29,8 @@
     let ball = document.getElementById('ball')
     let field = document.getElementById('field')
 
-    // ball.offsetWidth=0 before image loaded!
-    // to fix: set width
+    // prima che l'immagine sia caricata ball.offsetWidth=0!
+    // per correggere: imposta le dimensioni
     ball.style.left = Math.round(field.clientWidth / 2) + 'px'
     ball.style.top = Math.round(field.clientHeight / 2) + 'px'
   </script>

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md

@@ -1,53 +1,53 @@
-The ball has `position:absolute`. It means that its `left/top` coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
+La palla ha `position:absolute`. Ciò significa che le coordinate `left/top` sono relative all'elemento posizionato più prossimo, cioè `#field` (perché ha `position:relative`).
 
-The coordinates start from the inner left-upper corner of the field:
+Le coordinate sono a partire dall'angolo interno superiore sinistro del campo:
 
 ![](field.svg)
 
-The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
+Le dimensioni interne del campo si calcolano con `clientWidth/clientHeight`. I valori delle coordinate del centro del campo quindi si ottengono con `(clientWidth/2, clientHeight/2)`.
 
-...But if we set `ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
+...Ma se impostiamo tali valori per `ball.style.left/top`, allora si troverebbe al centro non la palla ma il suo bordo superiore sinistro
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```
 
-Here's how it looks:
+Ecco cosa otterremmo:
 
 [iframe height=180 src="ball-half"]
 
-To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
+Per allineare il centro della palla con il centro del campo, dovremmo spostare la palla alla metà della sua larghezza a sinistra ed alla metà della sua altezza verso l'alto:
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```
 
-Now the ball is finally centered.
+Adesso la palla è finalmente centrata.
 
-````warn header="Attention: the pitfall!"
+````warn header="Attenzione: c'è una difficoltà imprevista!"
 
-The code won't work reliably while `<img>` has no width/height:
+Il codice non funzionerà in modo affidabile finché `<img>` non avrà larghezza ed altezza definite:
 
 ```html
 <img src="ball.png" id="ball">
 ```
 ````
 
-When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
+Quando il browser non conosce le dimensioni di un'immagine (dagli attributi del tag o dai CSS), allora assume che siano pari a `0` finché l'immagine non completa il caricamento.
 
-So the value of `ball.offsetWidth` will be `0` until the image loads. That leads to wrong coordinates in the code above.
+Pertanto il valore di `ball.offsetWidth` sarà `0` fino al momento in cui l'immagine non viene caricata. Questo causerà coordinate errate nel codice sopra.
 
-After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`.
+Dopo il primo caricamento, il browser solitamente mette in cache l'immagine, e ne ricorderà subito le dimensioni se la dovesse ricaricare. Al primo caricamento, tuttavia, il valore di `ball.offsetWidth` è `0`.
 
-We should fix that by adding `width/height` to `<img>`:
+Dovremmo correggere aggiungendo `width/height` a `<img>`:
 
 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```
 
-...Or provide the size in CSS:
+...o fornire le dimensioni nei CSS:
 
 ```css
 #ball {

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html

@@ -26,8 +26,8 @@
 
 
   <script>
-    // ball.offsetWidth=0 before image loaded!
-    // to fix: set width
+    // prima che l'immagine sia caricata ball.offsetWidth=0!
+    // per correggere: imposta le dimensioni
     ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
     ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
   </script>

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md

@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Place the ball in the field center
+# Posiziona la palla al centro del campo
 
-Here's how the source document looks:
+Ecco come si presenta il documento di partenza:
 
 [iframe src="source" edit link height=180]
 
-What are coordinates of the field center?
+Quali sono le coordinate del centro del campo?
 
-Calculate them and use to place the ball into the center of the green field:
+Calcolale e usale per posizionare la palla al centro del campo verde:
 
 [iframe src="solution" height=180]
 
-- The element should be moved by JavaScript, not CSS.
-- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
+- L'elemento dovrebbe essere spostato con JavaScript, non con i CSS.
+- Il codice dovrebbe funzionare anche con una dimensione della palla differente (`10`, `20`, `30` pixel) e qualunque dimensione del campo: non dovrebbe essere legato a valori noti.
 
-P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
+P.S. Certamente, il posizionamento al centro potrebbe essere ottenuto con i CSS, ma qui vi chiediamo di farlo proprio con JavaScript. Più avanti incotreremo altri casi e situzioni più complesse in cui JavaScript è l'unica alternativa. Ora ci stiamo solo "scaldando".

2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html

@@ -7,7 +7,7 @@
     text text text text text text text text text text text text text text text text text text text text text text text text text text
   </div>
 
-  The element has <code>style="width:300px"</code>
+  L'elemento ha <code>style="width:300px"</code>
   <br>
 
   <button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>