Merge pull request #286 from marcellosurdi/article/coordinates

longo-andrea · web-flow · commit 67ccf231899c · 2021-04-18T18:12:32.000+02:00
Coordinates
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
@@ -1,8 +1,8 @@
-# Outer corners
+# Angoli esterni
 
-Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+Gli angoli esterni sono fondamentalmente quello che otteniamo da [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
 
-Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+Le coordinate dell'angolo superiore sinistro `answer1` e quelle dell'angolo inferiore destro `answer2`:
 
 ```js
 let coords = elem.getBoundingClientRect();
@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
 let answer2 = [coords.right, coords.bottom];
 ```
 
-# Left-upper inner corner
+# Angolo interno superiore sinistro
 
-That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+Questo differisce dall'angolo esterno solo per la larghezza del bordo. Un modo affidabile per calcolare la distanza è `clientLeft/clientTop`:
 
 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```
 
-# Right-bottom inner corner
+# Angolo interno inferiore destro
 
-In our case we need to substract the border size from the outer coordinates.
+Nel nostro caso possiamo sottrarre la misura del bordo dalle coordinate esterne.
 
-We could use CSS way:
+Potremmo utilizzare il valore CSS:
 
 ```js
 let answer4 = [
@@ -32,7 +32,7 @@ let answer4 = [
 ];
 ```
 
-An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+Un'alternativa sarebbe aggiungere `clientWidth/clientHeight` alle coordinate dell'angolo interno superiore sinistro. Questa è probabilmente la soluzione migliore:
 
 ```js
 let answer4 = [
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
@@ -5,18 +5,18 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function(e) { // mostra le coordinate del click
       coords.innerHTML = e.clientX + ':' + e.clientY;
     };
   </script>
 </head>
 
 <body>
 
-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Clicca in un punto qualsiasi per ottenere le coordinate relative alla finestra.
+  <br> Fatelo a scopo di test, per verificare il risultato che ottenete con JavaScript.
   <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(le coordinate del click vengono mostrate qui)</div>
 
 
   <div id="field">
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
@@ -5,18 +5,18 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function(e) { // mostra le coordinate del click
       coords.innerHTML = e.clientX + ':' + e.clientY;
     };
   </script>
 </head>
 
 <body>
 
-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Clicca in un punto qualsiasi per ottenere le coordinate relative alla finestra.
+  <br> Fatelo a scopo di test, per verificare il risultato che ottenete con JavaScript.
   <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(le coordinate del click vengono mostrate qui)</div>
 
 
   <div id="field">
@@ -32,7 +32,7 @@
 
 
   <script>
-    // ...your code...
+    // ...il tuo codice...
   </script>
 
 </body>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
@@ -2,23 +2,23 @@ importance: 5
 
 ---
 
-# Find window coordinates of the field
+# Trovate le coordinate del campo relative alla finestra
 
-In the iframe below you can see a document with the green "field".
+Nell'iframe sotto potete osservare un documento con un "campo" verde.
 
-Use JavaScript to find window coordinates of corners pointed by with arrows.
+Usate JavaScript per trovare le coordinate relative alla finestra degli angoli indicati dalle frecce.
 
-There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+Per comodità è stata implementata una semplice funzionalità nel documento: un click in un punto qualsiasi mostrerà le coordinate.
 
 [iframe border=1 height=360 src="source" link edit]
 
-Your code should use DOM to get window coordinates of:
+Il vostro codice dovrebbe usare il DOM per ottenere le coordinate relative alla finestra di:
 
-1. Upper-left, outer corner (that's simple).
-2. Bottom-right, outer corner (simple too).
-3. Upper-left, inner corner (a bit harder).
-4. Bottom-right, inner corner (there are several ways, choose one).
+1. angolo esterno superiore sinistro (è semplice).
+2. angolo esterno inferiore destro (semplice anche questo).
+3. angolo interno superiore sinistro (un po' più difficile).
+4. angolo interno inferiore destro (esistono vari modi, sceglietene uno).
 
-The coordinates that you calculate should be the same as those returned by the mouse click.
+Le coordinate che calcolate dovrebbero essere le stesse di quelle mostrate al click del mouse.
 
-P.S. The code should also work if the element has another size or border, not bound to any fixed values.
+P.S. Il codice dovrebbe funzionare anche se l'elemento ha un'altra dimensione o un altro bordo, non deve dipendere da valori fissi.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md
@@ -1,4 +1,4 @@
-In this task we only need to accurately calculate the coordinates. See the code for details.
+In questo esercizio dobbiamo solo calcolare accuratamente le coordinate. Guardate il codice per i dettagli.
 
-Please note: the elements must be in the document to read `offsetHeight` and other properties.
-A hidden (`display:none`) or out of the document element has no size.
+Nota bene: gli elementi devono essere visibili nel documento per leggere `offsetHeight` e le altre proprietà.
+Un elemento nascosto (`display:none`) o fuori dal documento non ha dimensioni.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
@@ -24,13 +24,13 @@
 
   <script>
     /**
-     * Positions elem relative to anchor as said in position.
+     * Posiziona elem relativamente a anchor come indicato in position.
      *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     Elemento di riferimento per il posizionamento
+     * @param {string} position Un valore tra: top/right/bottom
+     * @param {Node} elem       Elemento da posizionare
      *
-     * Both elements: elem and anchor must be in the document
+     * Entrambi gli elementi, elem e anchor, devono essere visibili nel documento
      */
     function positionAt(anchor, position, elem) {
 
@@ -55,10 +55,10 @@
 
     }
 
-    /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
-     */
+     /**
+      * Mostra una nota con l'html passato come parametro nella posizione indicata
+      * relativa all'elemento anchor.
+      */
     function showNote(anchor, position, html) {
 
       let note = document.createElement('div');
@@ -69,7 +69,7 @@
       positionAt(anchor, position, note);
     }
 
-    // test it
+    // prova
     let blockquote = document.querySelector('blockquote');
 
     showNote(blockquote, "top", "note above");
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
@@ -24,21 +24,21 @@
 
   <script>
     /**
-     * Positions elem relative to anchor as said in position.
+     * Posiziona elem relativamente a anchor come indicato in position.
      *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     Elemento di riferimento per il posizionamento
+     * @param {string} position Un valore tra: top/right/bottom
+     * @param {Node} elem       Elemento da posizionare
      *
-     * Both elements: elem and anchor must be in the document
+     * Entrambi gli elementi, elem e anchor, devono essere visibili nel documento
      */
     function positionAt(anchor, position, elem) {
       // ... your code ...
     }
 
     /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
+     * Mostra una nota con l'html passato come parametro nella posizione indicata
+     * relativa all'elemento anchor.
      */
     function showNote(anchor, position, html) {
 
@@ -50,7 +50,7 @@
       positionAt(anchor, position, note);
     }
 
-    // test it
+    // prova
     let blockquote = document.querySelector('blockquote');
 
     showNote(blockquote, "top", "note above");
diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md
@@ -2,17 +2,17 @@ importance: 5
 
 ---
 
-# Show a note near the element
+# Mostrate una nota vicino l'elemento
 
-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
+Create una funzione `positionAt(anchor, position, elem)` che posizioni `elem` vicino l'elemento `anchor` in base a `position`.
 
-The `position` must be a string with any one of 3 values:
-- `"top"` - position `elem` right above `anchor`
-- `"right"` - position `elem` immediately at the right of `anchor`
-- `"bottom"` - position `elem` right below `anchor`
+Il parametro `position` deve essere una stringa con uno dei 3 valori seguenti:
+- `"top"` - posiziona `elem` proprio sopra `anchor`
+- `"right"` - posiziona `elem` subito a destra di `anchor`
+- `"bottom"` - posiziona `elem` esattamente sotto `anchor`
 
-It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
+Il codice che scriverete viene richiamato dalla funzione `showNote(anchor, position, html)`, che trovate nel codice sorgente dell'esercizio e che crea una nota con l'`html` passato come parametro e lo mostra nella posizione assegnata `position` vicino all'elemento `anchor`.
 
-Here's the demo of notes:
+Ecco un esempio:
 
 [iframe src="solution" height="350" border="1" link]
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
@@ -1,4 +1,4 @@
-The solution is actually pretty simple:
+La soluzione è in realtà piuttosto semplice:
 
-- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
-- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
+- Utilizzate `position:absolute` nel file CSS invece di `position:fixed` per `.note`.
+- Utilizzate la funzione [getCoords()](info:coordinates#getCoords) della sezione <info:coordinates> per ottenere le coordinate relative al documento.
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html
@@ -66,7 +66,7 @@
       positionAt(anchor, position, note);
     }
 
-    // test it
+    // prova
     let blockquote = document.querySelector('blockquote');
 
     showNote(blockquote, "top", "note above");
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Show a note near the element (absolute)
+# Mostrate una nota vicino l'elemento (position:absolute)
 
-Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
+Modificate la soluzione dell'[esercizio precedente](info:task/position-at) affinché la nota utilizzi `position:absolute` invece di `position:fixed`.
 
-That will prevent its "runaway" from the element when the page scrolls.
+In questo modo eviteremo che si allontani dall'elemento quando la pagina scorre.
 
-Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
+Prendete la soluzione dell'esecizio precedente come punto di partenza. Per testare lo scorrimento aggiungete lo stile `<body style="height: 2000px">`.
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md
@@ -2,27 +2,27 @@ importance: 5
 
 ---
 
-# Position the note inside (absolute)
+# Posizionate la nota all'interno (position:absolute)
 
-Extend the previous task <info:task/position-at-absolute>: teach the function  `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
+Estendete l'esercizio precedente <info:task/position-at-absolute>: fate in modo che la funzione `positionAt(anchor, position, elem)` inserisca `elem` all'interno di `anchor`.
 
-New values for `position`:
+Nuovi valori per `position`:
 
-- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
-- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
+- `top-out`, `right-out`, `bottom-out` -- funzionano come prima, inseriscono `elem` sopra/a destra/sotto `anchor`.
+- `top-in`, `right-in`, `bottom-in` -- inseriscono `elem` all'interno di `anchor`: posizionandolo nel bordo superiore/a destra/inferiore.
 
-For instance:
+Per esempio:
 
 ```js
-// shows the note above blockquote
+// mostra la nota sopra blockquote
 positionAt(blockquote, "top-out", note);
 
-// shows the note inside blockquote, at the top
+// mostra la nota all'interno di blockquote, nel bordo superiore
 positionAt(blockquote, "top-in", note);
 ```
 
-The result:
+Ecco il risultato:
 
 [iframe src="solution" height="310" border="1" link]
 
-As the source code, take the solution of the task <info:task/position-at-absolute>.
+Prendete la soluzione dell'esercizio <info:task/position-at-absolute> come codice sorgente.
diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`positionAt(anchor, position, note);`
`67`	`67`	`}`
`68`	`68`
`69`		`- // test it`
	`69`	`+ // prova`
`70`	`70`	`let blockquote = document.querySelector('blockquote');`
`71`	`71`
`72`	`72`	`showNote(blockquote, "top", "note above");`