Translating MDN – Introduction to CSS layout

[Sav22999]

Questo issue è dedicato alla traduzione e revisione di un articolo di MDN.

Informazioni sul progetto

URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

URL traduzione: https://developer.mozilla.org/it/docs/Learn/CSS/CSS_layout/Introduction

Formato di file: markup wiki (testo con tag)

Strumenti: a scelta tra interfaccia di traduzione MDN (online) / editor di testo semplice (offline) / OmegaT (offline)

Istruzioni

Prima di iniziare

• Crea un account GitHub (se non lo hai già): ti servirà sia per scrivere in questo issue, sia per accedere a MDN

  • (Facoltativo) Installa il componente aggiuntivo MozIta L10n Addons per accedere più facilmente ai caratteri speciali come ’ “ ” È ecc.

• Leggi "Come tradurre le pagine di MDN"

• Leggi i capitoli della guida. Se lo desideri, lascia un feedback nel relativo issue:

  • Capitolo 1 – Buone norme di traduzione tecnica Feedback: issue (IT) Capitolo 1 – Buone norme di traduzione v.3 #225
  • Capitolo 2 – Linee guida di Mozilla Italia Feedback: issue (IT) Capitolo 2 – Linee guida di Mozilla Italia v.2 #138
  • Capitolo 3 – Flusso di lavoro Feedback: issue (IT) Capitolo 3 – Flusso di lavoro #24
  • Capitolo 4 – Tipi di file Feedback: issue (IT) Capitolo 4 – Tipi di file #31
  • Capitolo 5 – Risorse esterne Feedback: issue (IT) Capitolo 5 – Risorse esterne #36

Prendere in carico il progetto

• Scrivi nello issue Traduzione articoli MDN (Indice) #217 l'URL dell'articolo che vuoi tradurre. Verrà aperto uno issue dedicato.
• Accedi a MDN con il tuo account GitHub
• Attieniti alle istruzioni per MDN del capitolo 3 e ai suggerimenti del resto della guida, in particolare i consigli pratici del capitolo 2
• Quando hai terminato, aggiungi a questo issue il label richiesta revisione tecnica e avvisa con un messaggio nella sezione commenti.
  • Se sei il revisore tecnico, quando hai terminato, elimina il label richiesta revisione tecnica e applica quello richiesta revisione stilistica.
  • Se sei il revisore stilistico, quando hai terminato, elimina il label richiesta revisione stilistica.
• Per qualsiasi problema o domanda scrivi pure in questo issue
• …e buona traduzione! 🎊

Link Utili

• Motori di ricerca per la terminologia
  • Pontoon: tutti i progetti -- Per gli elementi UI, le funzioni e altra terminologia dei prodotti Mozilla.
  • Transvision -- Motore di ricerca esterno per i software e i siti Mozilla, complementare a Pontoon.
  • Microsoft Language Portal -- Per gli elementi UI, le funzioni e altra terminologia dei prodotti Microsoft.

❗️ N.B. Per segnalare la traduzione di un nuovo articolo utilizzare lo issue indice #217.

[danielebarell]

Riprendo finalmente la localizzazione del mio modulo Layout CSS.
Poiché è passato un po' più tempo di quel che immaginassi dalla precedente traduzione, temevo di avere già perso confidenza.
Invece mi pare di aver iniziato abbastanza agilmente.

Rispetto alla localizzazione d'esordio ho cercato di rendere meglio il senso dell'articolo in italiano a un livello un po' più alto: ove mi è sembrato necessario mi sono distaccato dal significato delle singole parole e delle frasi riassemblando un po' il periodo.
Ovviamente ho anche cercato di applicare i principii stabiliti in precedenza, in particolare l'uso dello stile impersonale invece che dare del tu al lettore e del tempo presente invece che il futuro.
Infine mantenere coerenza con la terminologia delll'articolo introduttivo.

Note in dettaglio sul lavoro sin qui svolto:

• Lo slug italiano a "Introduction to HTML" esiste ma non esiste la localizzazione corrispondente. Quindi ottengo un 404.

• Per "Introduction to CSS" non esiste invece slug. MA ho dato un'occhiata veloce agli articolo localizzati sul CSS. Mi limito a segnalare 2 titoli: "Impara a stilizzare HTML usando i CSS" e "Introduzione ai CSS"". Quindi al contrario di quanto stabilito di recente da noi, CSS appare al plurale.

• L'espressione "CSS page layout" l'ho tradotta "layout della pagina via CSS", ma lo trovo un po' ridondante. @kitsunenosaraT Sara, considera il più succinto "layout CSS".

• @Sav22999 , @Mte90 Ho localizzato il contenuto del codice HTML, il primo che compare, però bisogna produrre anche uno snippet coerente con la localizzazione e incorporarlo nella pagina. Al momento non riesco a far apparire neanche la visualizzazione del codice originale.
  Vedo un bottone nella barra degli strumenti che dice "Insert Code Sample iFrame" forse è questa funzionalità ci permette l'embedding.

"The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese."

Qui c'è una discrepanza nell'originale: il "writing mode" è tutto minuscolo nella prima frase, mentre nella seconda è scritto con le iniziali maiuscole.
Esiste un articolo della stessa autrice su Smashing Magazine nel quale "writing mode" è sempre in capital, quindi lo faccio anch'io.
Viene "Modalità di Scrittura [Orizzontale || Verticale]" ( con di minuscolo)
e subito dopo "Inline Direction" viene "Direzione in Linea". (con in minuscolo)

"The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run."

Ci ho girato un po' intorno e ho trovato:
La corrispondente Direzione in Linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.
OT: ho dato un'occhiata allo studio che viene fatto in questo articolo https://24ways.org/2016/css-writing-modes/ circa l'impostazione della proprietà writing-mode alla fine viene trovata una soluzione di visualizzazione delle etichette notevole.

"Type of CSS Boxes" (https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) non localizzato.

Ancora senza slag Multi-column layout. Appartiene agli articoli del modulo che intendo tradurre.

A presto!
dan

[danielebarell]

Oggi poca roba rispetto al tempo che son stato sull'articolo.
@kitsunenosaraT Sara, ti segnalo questo problema che ho incontrato.

L'autrice parla di come viene impostato il flusso del testo (da sinistra a destra) e dei paragrafi (dall'alto in basso) e sottolinea che questa impostazione in altre culture come quella giapponese è differente.
Quindi, grossomodo abbiamo un'impostazione 'occidentale' e una 'orientale' che sono diverse.
Quando l'autrice parla dell'impostazione occidentale dice sempre 'in English'. Cioè pare considerare solo l'inglese. Il che forse è giusto quando ti rivolgi a persone che parlano inglese o comunque ti esprimi in inglese ma, credo, sia errato in una localizzazione italiana.

Lo fa in due occasioni sul pezzetto che ho tradotto oggi:

For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block.

e

You can change this default display behavior. For example, the li element is display: block by default, meaning that list items display one below the other in our English document.

[kitsunenosaraT]

@danielebarell

Mi fa piacere vederti tornare alla traduzione 😄

Il discorso che fai sulla localizzazione è sensato. Se non sono presenti all'interno della pagina snippet di codice con esempi di testo inglese, puoi "localizzare" quando parla di inglese.

Continua pure a mettere qui le tue osservazioni, le leggerò tutte in una volta in sede di QA. Quando la traduzione è conclusa, ricordati di segnalarlo con le apposite etichette di richiesta QA.

Buona continuazione!

[danielebarell]

Il discorso che fai sulla localizzazione è sensato. Se non sono presenti all'interno della pagina snippet di codice con esempi di testo inglese, puoi "localizzare" quando parla di inglese.

In realtà pensavo di localizzare anche il codice.

Ad esempio così: link a l10n Flusso normale

[kitsunenosaraT]

@danielebarell Ho dato uno sguardo all'articolo e mi sembra un'ottima idea localizzare quelle parti di codice che contengono il testo da visualizzare, es. "cibo per gatti" ecc. (stando ben attenti a non tradurre la sintassi che va lasciata inalterata, ovviamente) 👍

[danielebarell]

Oggi maltempo fuori e bufera in casa. Ma quando hai figli adolescenti te ne devi fare una ragione.

Traduzione dell'introduzione a Flexbox, probabilmente il modulo CSS più utilizzato per fare il layout.

CSS_Flexible_Box_Layout

Esiste lo slug e anche la pagina che però è in inglese.

markup

In italiano ricordo di aver letto 'codice di contrassegno' in articolo dei parecchio tempo fa. (Inizi 2000 quando mi è capitato di fare da tutor ad alcuni stagisti). Ma da noi in MozIta mi pare di avessimo deciso di lasciarlo non tradotto.

In our English language document

L'autrice continua a usare 'inglese' per indicare il senso di scrittura occidentale. E' coerente fin qui ma a noi serve un termine più adatto.

This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.

@Mte90 , @Sav22999
Ho tradotto ma temo che qui l'autrice si sia avvitata: lo spazio che gli item lasciano è alla fine della colonna non della riga.
Per dimostrarlo ho fatto un fork (copia perfetta) del suo codice originale e ho aggiunto un background colorato al wrapper, cioè all'elemento padre.
Se guardi il link puoi accorgerti dell'errore:
Flexbox 1 - mistake

Infine
Localizzazione primo snippet di Flexbox
Localizzazione secondo snippet di Flexbox

A presto,
dan

[Mte90]

Se ritieni che la versione originale sia sbagliata puoi modificarla e correggere senza problemi.
Se non te la senti lo faccio io :-)

[danielebarell]

Se ritieni che la versione originale sia sbagliata puoi modificarla e correggere senza problemi.
Se non te la senti lo faccio io :-)

Daniele,
secondo me bisognarebbe confrontarsi con l'autrice oppure a chi ha autorizzato la pubblicazione ed esporre il dubbio.
Posso contattare l'autrice, è piena di cose da fare ma in precedenza ha accettato di dare supporto su questioni tecniche.
Facciamo così?

[danielebarell]

Oggi intro alla Griglia, un metodo di layout ideato per creare pagine online potenzialmente molto simili a quelle cartacee. Credo che l'autrice ne abbia curato la definizione presso il W3C.

A livello di traduzione mi sono concentrato sul senso delle frasi più che sui singoli termini non tecnici.
In questa sezione lo scritto originale mi è parso talvolta piano e ripetitivo, talvolta 'ingarbugliato'.
Nel rispetto dei contenuti spero di aver dato un'esposizione lineare al potenziale lettore.

Localizzazione primo snippet di Grid
Localizzazione secondo snippet di Grid

A presto.
dan

[Mte90]

Certo che puoi contattarla, non devi neanche chiederlo :-D
Se vedi questi problemi scrivigli senza chiedere un nostro parere, quando c'è un bug non c'è molto da discutere lato traduzione.

[danielebarell]

Oggi le due figlie han realizzato più di 19 di media combinata in pagella.
Bestiacce, non mi ci riconosco nella maniera più assoluta. ;P

Tradotto breve paragrafo sugli elementi float.
Localizzazione snippet sugli elementi float
Il finto testo in latino ovviamente rimane quello :)

A presto

[danielebarell]

Oggi CSS tabellare.
Bello cotto ho scelto una sottosezione corta.
Prima di iniziare a lavorare un passero è entrato nello studio si è piazzato in un agolom accanto alla finestra e non ha èpiù voluto muoversi. L'ho messo in una scatola di cartone e l'ho portato sotto una tettoia nel prato del condominio.

screen reader

lasciato originale

localizzazione layout tabelle
L'horinale parte da github a differenza degli snippet precedenti.

Il layout non viene come dovrebbe e non mi pare di aver cambiato il codice.
Domani riguardo cosa non va ed eventualmente ricontatto l'autrice.

A presto.
dan

[Mte90]

Il mio dubbio è se usare tabellare, perché è un termine poco utilizzato e forse non è molto chiaro per il resto, 👍

[danielebarell]

Oggi rientro in sede insieme a uno sparuto manipolo di colleghi.

Localizzata la parte riguardante il posizionamento.
Ancora non effettuate le localizzazioni degli esempi di codice.

[danielebarell]

Sull'ultimo paragrafo 'Multi-column layout' ho un dubbio sul senso di questa frase:

While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.

Con layout multicolonna chiudo la localizzazione dell'articolo.
Mi prendo un paio di gioni per produrre il codice localizzato, convocare l'autrice per quel paio di problemi che ho detto in precedenza e rivedere il tutto.

Entro Venerdì credo di poter chiamare la revisione.

A presto.
dan

[danielebarell]

memorie dal sottosuolo - prima di terminare la revisione dell'articolo esco dall'edificio dell'azienda e mi accendo un siga in piedi sulla griglia di un marciapiede.
Dopo un minuto sento qualcuno urlare. Mi guardo a destra e a manca ma non scorgo nessuno. Che sia un nuovo tipo di acufene? Ma no, è un operaio che sta trafficando 3 metri sotto ai miei piedi e la cenere della sigaretta gli cade in testa.
Se mi sposto gli faccio cosa gradita.

@kitsunenosaraT
Oggi concluso l'articolo e chiamo la revisione QA. Penso che il modo di localizzare sia diverso dall'articolo precedente. Spero migliore.

La revisione tecnica quando avrò tutti gli snippet localizzati.

La tipa che ha scritto l'articolo originale ha confermato la correttezza della sua versione e rileggendo attentamente la confermo pure io.
Quindi nessun errore.

Riassumo le parti da inserire:

• localizzazione flusso normale
• localizzazione flex example 1
• localizzazione flex example 2
• localizzazione grid example 1
• localizzazione grid example 2
• localizzazione float
• localizzazione positioning static
• localizzazione positioning relative
• localizzazione positioning absolute
• localizzazione positioning fixed
• localizzazione positioning sticky
• localizzazione table
• localizzazione multi-column

Poi
inserire i Tag. Una batteria di tag congruenti tra loro (Maiuscoli+minuscoli o solo minuscoli ||| inglesi o italiani ||| ecc.) ce l'abbiamo?

Poi
revisione dei link, ma questo alla fine del modulo quando avremo tutti gli slug.

A presto e buon WE.

dan

[danielebarell]

-- QA review su Flexbox --

E possibile notarlo nell'esempio seguente

Ecco un semplice esempio |OK|

Secondo il loro valore predefinito [...] che ha un ordine di scrittura occidentale.

Secondo il loro valore predefenito [...] come elementi blocco, uno sotto l'altro. |OK|

genitore

padre |OK|
en passant ma perchè 'padre' e non 'madre', sarebbe un parent pure lei, no? :)

fino a coprire l'altezza [...] è definità dal più alto tra i suoi componenti

fino a raggiungere l'altezza del componente più alto. Quindi i componenti si distendno fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. |OK|

lasciando spazio extra

lasciando spazio libero |OK|

sui componenti figli

sui componenti figlio |OK|

rendendo possibile la loro espansione o contrazione

facendoli espandere o contrarre |OK|

e riempire la medesima area

continuando a riempire la medesima area |OK|

Per saperne di più

Per approfondire l'argomento |OK|

|- - - - - - QA approvata in toto ! - - - - - -|

A presto.

[kitsunenosaraT]

genitore
padre |OK|
en passant ma perchè 'padre' e non 'madre', sarebbe un parent pure lei, no? :)

Una nota. Onestamente, ho messo "padre" unicamente per uniformarlo alle tue traduzioni precedenti. Se avessi tradotto io, avrei messo direttamente genitore per tutte le occorrenze, visto che non amo la mania italiana di affibbiare un sesso agli elementi inanimati 😄
però mi sembrava una modifica puramente soggettiva, dunque ho lasciato perdere.

Se proprio dovessi scegliere tra madre e padre, direi che il primo ha più senso, visto che in molti casi l'elemento figlio è annidato nell'elemento genitore, come un feto nel ventre materno. Ma forse, inconsciamente, tutti noi tendiamo ad attribuire più importanza al nostro genere 🤔

[danielebarell]

Se proprio dovessi scegliere tra madre e padre, direi che il primo ha più senso, visto che in molti casi l'elemento figlio è annidato nell'elemento genitore, come un feto nel ventre materno. Ma forse, inconsciamente, tutti noi tendiamo ad attribuire più importanza al nostro genere 🤔

Capisco.
Diciamo che la persona potenzialmente interessata agli articoli può essere sia maschio che femmina (o altro ancora, chi lo sa) e ognuno ha la propria sensibilità. Quindi secondo me val pena di discuterne ancora un po' in modo da avere chiara la questione prima di procedere.
A costo di svalvolare un po'.

Allora, esempio di situazione di riferimento pratica:

<div id="the_parent">
      <div id="first-child"></div>
     <div id="second_child"></div>
     <img src="..." id="third_child" />
      A textual child
</div>

I termini che possiamo considerare quando ci riferiamo a un elemento che ne contiene altri:

• padre
• madre
• genitore
• parente
• [...]

"padre"
adeguato perchè: In Italia la cultura prevalente è di tipo patriarcale. Indica il rapporto di ascendenza diretto verso gli elementi contenuti.
inadeguato perchè: Rispetto a 'madre', il padre in senso fisico non contiene figli (al massimo li può 'comprendere' in senso astratto)

"madre"
adeguato perchè: Per le ragioni per cui 'padre' è inadeguato.
inadeguato perchè: Non è comunemente usato. Inoltre un "tag" è neutro o maschile. Un "parent" pure. Un "code" anche.

"genitore"
adeguato perchè: Ci togliamo dall'imbarazzo del dualismo padre/madre
inadeguato perchè : I codici a cui ci riferiamo, i tag HTML, sono dichiarativi. Cioè non hanno potenziale creazionale, non generano alcunchè. Sono scatole che racchiudono altre scatole più piccole o altri elementi come testo e immagini.

"parente"
adeguato perchè: Elimina l'accezione creazionale di "genitore", "madre", "padre".
inadeguato perchè: Non indica propriamente l'elemento che ne contiene direttamente altri, bensì una generica ascendenza. Potrebbe essere il diretto contenitore ma anche il contenitore del contenitore (il grandparent) ecc. Potrebbe anche essere un fratello o un cugino. Tecnicamente però in inglese i nodi di pari livello, non ascendenti ne' discendenti si indicano come "sibling" (fratello/sorella).

Quindi quel che forse va meglio è "parente" o "parente diretto" ove occorra specificare.
Tra l'altro l'assonanza richiama bene il termine originale "parent".

Che ne pensi, Sara?

[kitsunenosaraT]

@danielebarell

Penso che:

• possa avere un senso usare "padre"/"madre" a seconda che l'elemento genitore sia di genere maschile o femminile (es. nodo padre, tabella madre); pone comunque una serie di problemi quando il genere degli elementi non è univoco (alcuni considerano certi concetti maschili, altri femminili, come scritto anche nella guida).

• l'obiezione a "genitore" mi sembra abbastanza pedante e astrusa, puramente etimologica. "Genitore" è il termine neutro per "padre" o "madre". "Genitore" non è "generante" o "generatore", anche se ha la stessa radice. Se lo trovi inadeguato perché gli elementi non compiono l'atto di "generare", allora anche "padre/madre" è inadeguato per il medesimo motivo. A noi interessa per il concetto di "ereditarietà", e mi sembra che "genitore" riesca a chiarirlo bene. Sono aperta a discussioni, se non sei d'accordo.

• "parente" lo escluderei assolutamente. Non implica una "generica ascendenza", ma piuttosto una generica parentela. Come hai tu stesso fatto notare, i parenti possono essere fratelli, cugini, zii ecc. quindi manca quella linea di trasmissione diretta (che poi è l'unica cosa che ci interessa e che dovrebbe essere esplicita).
  Per quanto riguarda la somiglianza con l'inglese parent, esattamente per questo motivo la eviterei come la peste. Parent è il classico false friend. Se leggessi uno che traduce parent in parente penserei "Ma guarda te che ignorante! Non sa neanche la differenza tra "parent" e "relative". Dev'essere uno di quelli che pensa che basti aggiungere la vocale in fondo per tradurre una parola."

[danielebarell]

Immaginavo di metter piede su un terreno scivoloso.
;)

@kitsunenosaraT

"parente" lo escluderei assolutamente. [...] Parent è il classico false friend. Se leggessi uno che traduce parent in parente penserei "Ma guarda te che ignorante! Non sa neanche la differenza tra "parent" e "relative". Dev'essere uno di quelli che pensa che basti aggiungere la vocale in fondo per tradurre una parola."

Ok. Esclusi parente e parente diretto. Assolutamente esclusi.

possa avere un senso usare "padre"/"madre" a seconda che l'elemento genitore sia di genere maschile o femminile [...]

OK. Teniamo padre / madre

l'obiezione a "genitore" mi sembra abbastanza pedante e astrusa, puramente etimologica. "Genitore" è il termine neutro per "padre" o "madre". "Genitore" non è "generante" o "generatore", anche se ha la stessa radice. Se lo trovi inadeguato perché gli elementi non compiono l'atto di "generare", allora anche "padre/madre" è inadeguato per il medesimo motivo.

Ok. Anche genitore potrebbe andare

A noi interessa per il concetto di "ereditarietà", e mi sembra che "genitore" riesca a chiarirlo bene. Sono aperta a discussioni, se non sei d'accordo.

Sul principio sono d'accordo.
Però, visto che ci siamo, occhio quando usi il termine "ereditarietà" con un developer.
Di base un oggetto figlio eredita da un oggetto base quando ne riproduce le proprietà, cambiandone eventualmente i valori e/o aggiungendo altre proprietà.
Tipica keyword tecnica per indicare questa relazione è 'extends'

class Todaro{
 id=99;
 name = "todaro";
}
class Sara extends Todaro{
 name="sara todaro";
 aka = "kitsunenosaraT";
}
--
var sara = new Sara():
log(sara.name === "sara todaro")  // true
log(sara.id === 99)  //  true
log(sara.aka === "Sav22999")  //  false

;D

Nell'ambito di questo modulo, cioè quello solitamente affidato ai designer (vs developer):

• I nodi HTML innestati non ereditano nulla dal nodo padre.
• Mentre nel CSS le regole definite per l'aspetto dei nodi padri hanno sovente influenza sull'aspetto dei nodi figli.
  Infatti la "C" di CSS sta per "Cascading".
  Se definisci un font-family: Helvetica; per il nodo < body > i testi nei nodi < h1 >,< p >,< main >,< footer > ecc. appariranno tutti in Helvetica se non altrimenti ridefinita la regola suddetta.

/// fine papello ///

Al netto delle divagazioni ci assestiamo su:

• padre per riferimento maschile (tipo: nodo padre)
• madre per riferimento femminile (tipo: tabella madre)
• genitore questo direi tenerlo in seconda battuta se padre/madre diventa troppo ripetitivo.

Sara può andar bene secondo te?

[kitsunenosaraT]

@danielebarell

Al netto delle divagazioni ci assestiamo su:

padre per riferimento maschile (tipo: nodo padre)
madre per riferimento femminile (tipo: tabella madre)
genitore questo direi tenerlo in seconda battuta se padre/madre diventa troppo ripetitivo.

Ribadisco quanto ho detto prima.
"Padre/madre" a seconda del genere ok, "genitore" ok, ma scegliamone uno e andiamo con quello.
La coerenza terminologica aiuta a fare chiarezza e ha priorità sulla gradevolezza del testo.
Eviterei di chiamare un elemento una volta genitore e una volta padre/madre solo per variare un po' il lessico.

parente diretto
Scusa, mi ero dimenticata di commentare questo: se io ti dico che sono "parente diretta" di Gertrude, non puoi capire se Gertrude è mia madre o mia figlia. Parente diretto è ambiguo quasi quanto parente, non implica una relazione discendente univoca come le altre opzioni discusse.

Sul principio sono d'accordo.
Però, visto che ci siamo, occhio quando usi il termine "ereditarietà" con un developer.
I nodi HTML innestati non ereditano nulla dal nodo padre.

Hai ragione, non tutti i nodi "ereditano".
Il punto che volevo sottolineare io, usando "ereditare" con valore metaforico e non tecnico, è che genitore non vuol dire semplicemente "chi compie l'atto di generare qualcosa", ma ha anche un valore di appartenenza, di provenienza, in alcuni casi di eredità.
Questo era in diretta risposta alla tua affermazione:

I codici a cui ci riferiamo, i tag HTML, sono dichiarativi. Cioè non hanno potenziale creazionale, non generano alcunchè. Sono scatole che racchiudono altre scatole più piccole o altri elementi come testo e immagini.

[danielebarell]

"Padre/madre" a seconda del genere ok, "genitore" ok, ma scegliamone uno e andiamo con quello.
La coerenza terminologica aiuta a fare chiarezza e ha priorità sulla gradevolezza del testo.
Eviterei di chiamare un elemento una volta genitore e una volta padre/madre solo per variare un po' il lessico.

Escluso anche genitore. 👎

Padre || Madre Andiamo sempre e solo con quelli. 👍

Il punto che volevo sottolineare io, usando "ereditare" con valore metaforico e non tecnico, è che genitore non vuol dire semplicemente "chi compie l'atto di generare qualcosa", ma ha anche un valore di appartenenza, di provenienza, in alcuni casi di eredità.

Vero. :)

-- QA review su Flexbox --

per facilitare il layout monodimensionale

per facilitare la creazione di layout monodimensionali | OK |

su cu applicare il layout; perciò tutti i sui figli diretti diventeranno componenti flex. E possibile notarlo nell'esempio seguente.

su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio. | OK |

sul genitore

sul padre | OK |

i tre componenti figli si dispongono in colonna e lo si deve al fatto che diventano componenti flex e vengono influenzati dal medesimo valore iniziale

Questo accade perché essi ora sono componenti flex e assumono il medesimo valore iniziale che Flexbox attribuisce loro | OK |

Vengono

In questo caso vengono | OK |

Si allunguano tutti quanti tanto quanto il componente più alto

Si allungano tutti fino a raggiungere l'altezza del componente più alto | OK |

perchè il valore iniziale della proprietà {{cssxref("align-items")}} viene impostata

perché il valore iniziale di {{cssxref("flex-direction")}} impostato | OK |

coprire

raggiungere | OK |

One Two Three

Uno Due Tre | OK |

componenti figli

componenti figlio | OK |
Però non capisco:

• 1 componente figlio
• 2 componenti figlio
• 3 componenti figlio
  @kitsunenosaraT Sara, questo è un errore che ho fatto ripetutamente. Perdona l'ignoranza perchè in effetti mi sfugge la vera ragione. Perchè componenti figlio invece che componenti figli ?

rendendo possibile la loro espansione o contrazione

facendoli espandere o contrarre | OK |

Se [...] quando [...]

Se [...]. Se [...] | OK |

per far spazio al nuovo inserimento e riempire

per far spazio al nuovo inserimento continuando a riempire | OK |

Questa è stata una breve introduzione alle possibilità

Questa è solo una breve introduzione alle possibilità | OK |

Per saperne di più

Per approfondire l'argomento | OK |

| Attenzione | Questo ci è sfuggito:

perché il valore iniziale della proprietà align-items viene impostata a stretch dal padre

perché il valore iniziale della proprietà align-items viene impostato a stretch dal padre
(soggetto è il valore non la proprietà)

///

Snippets :

• I CodePen sono da reindirizzare su MDN repo
• I JSFiddle van già bene @Sav22999, @Mte90 li avete localizzati voi?

///

A presto.
dan

[Mte90]

Non ho localizzato niente, se serve fammi sapere ma per me vanno bene

[kitsunenosaraT]

Però non capisco:

1 componente figlio
2 componenti figlio
3 componenti figlio
@kitsunenosaraT Sara, questo è un errore che ho fatto ripetutamente. Perdona l'ignoranza perchè in effetti mi sfugge la vera ragione. Perchè componenti figlio invece che componenti figli ?

È giusto sia "componenti figli" che "componenti figlio" (sarebbe da intendere come componenti (di tipo) figlio).
Il problema è che tu hai usato a volte "componenti figli" e a volte "componenti figlio", così ho uniformato. Se preferisci, puoi sostituire tutto con "componenti figli", basta che non usi un po' un approccio e un po' l'altro ma mantieni una terminologia coerente (come nel caso di padre/genitore).

| Attenzione | Questo ci è sfuggito:

perché il valore iniziale della proprietà align-items viene impostata a stretch dal padre

Hai ragione, anche questa è da cambiare.

[danielebarell]

@kitsunenosaraT
Ciao, riprendo il lavoro su questo issue.

-- QA review su Grid --
Nota personale
Spesso cerco di risolvere le traduzioni con frasi coordinate cioè allo stesso livello e congiunte da "e"
(i.e. fornisci un input e otterrai un output)
Sara preferisce una strutturazione subordinata (i.e. fornisci un input per ottenere un output)
Idem con la punteggiatura che io ignoro e Sara invece usa.

[…] definiamo anche alcune indicazioni per righe e colonne nell'elemento padre

[…], definiamo anche alcune indicazioni per righe e colonne nell'elemento padre | Proposta |

Secondo me il termine indicazioni può essere sostituito dal più specifico regole . Una "regola" in CSS è per l'appunto un codice che valorizza una o più proprietà per definire l'aspetto del componente.
L'originale dice:

we are also defining some row and column tracks on the parent using the […] properties respectively.

"Tracks" mi pare che siano le regole che definiscono la tracciatura della griglia.

Quindi potrebbe forse essere:

definiamo anche una regola per righe e colonne nell'elemento padre

e disporre gli elementi in righe e colonne.

cioè per disporre gli elementi in righe e colonne. | OK |

è possibile posizionare i componenti

è possibile posizionarvi all'interno i componenti | Meglio! OK |

[…] e questo fa sì che i componenti coprano molteplici tracciati.

[…] Questo fa sì che i componenti seguano tracciati diversi. | Molto meglio! OK |

Una volta compresa la funzione di ogni parte del layout , potremo stabilire con chiarezzza il metodo che più si addice al suo sviluppo.

Una volta compresa la funzione di ogni operazione nel layout, risulterà chiaro quale sia il componente più adatto a ciascun tipo di layout. | Contesto |

Qui secondo me si vuole intendere che una volta impostato il layout generale con Griglie e Flexbox i componenti all'interno di questo layout potranno essere sviluppati con metodi più specifici. Inoltre operazione in sostituzione di funzione temo che generi confusione nel lettore. Chi opera è l'utente che usa le funzionalità esposte nell'interfaccia strutturata secondo un layout

Perciò propongo:

Una volta compresa la funzione di ogni sezione nel layout, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

A presto
dan

[danielebarell]

-- QA review su Float --

Configurare un elemento in float cambia il proprio comportamentamento e quello dell'elemento che gli succede nel flusso normale.

Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. |OK|

Il valore della proprietà float dovrebbe essere lo ereditato dal padre dell'elemento.

"eredita" il valore della proprietà float dall'elemento padre. | OK |

Nell'esempio di sotto viene spostato un <div> a sinistra e impostato il suo {{cssxref("margin")}} a destra a per creare uno spazio tra il testo e l'elemento.

Nel seguente esempio, un elemento <div> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. |OK|

Questo è quello che ci occorre conoscere nel design del web moderno a proposito degli elementi float.

Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float. |Bene, OK|

[…] in maniera esauriente in  le proprieta float e clear

in maniera esauriente nell'articolo sulle proprietà float e clear |OK|

E' tutt'ora  possibile imbattersi in questo sistema nelle pagine web.

È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. |Bene, OK|

---- |** QA accettata in toto **| ---

MA
occorre correggere il titolo Simple float example dello snippet di esempio.

Riprendiamo prossima settimana.
Buon Weekend e a presto.
;)
dan

[kitsunenosaraT]

Spesso cerco di risolvere le traduzioni con frasi coordinate cioè allo stesso livello e congiunte da "e"
(i.e. fornisci un input e otterrai un output)
Sara preferisce una strutturazione subordinata (i.e. fornisci un input per ottenere un output)

Solo un piccolo appunto... Non è solo Sara che preferisce, è lo stile che abbiamo adottato nella Guida (vedi sezione "Lunghezza delle frasi) e che è stato lo standard nel settore della localizzazione informatica per molto tempo.
Questo per farti capire che quando revisiono cerco sempre di non basarmi sui gusti personali, ma su linee guida condivise.

[…], definiamo anche alcune indicazioni per righe e colonne nell'elemento padre

Proposta:

definiamo anche una regola per righe e colonne nell'elemento padre

Benissimo!

---

Una volta compresa la funzione di ogni operazione nel layout, risulterà chiaro quale sia il componente più adatto a ciascun tipo di layout.

Proposta:

Una volta compresa la funzione di ogni sezione nel layout, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

@danielebarell

Benissimo, ma vorrei evitare di ripetere due volte di seguito layout. Controproposta:

Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

---

occorre correggere il titolo Simple float example dello snippet di esempio.

Prendiamo nota!

Grazie e a presto!

[danielebarell]

Solo un piccolo appunto [...] [Questo per farti capire che quando revisiono cerco sempre di non basarmi sui gusti personali, ma su linee guida condivise.

Pardon. Ripasso:
"L’inglese è notoriamente una lingua che preferisce periodi semplici e collegati paratatticamente (coordinate).
L’italiano è, al contrario, una lingua famosa per il periodare lungo e complesso, in cui prevale l’ipotassi (subordinate).
Ne consegue che a volte, traducendo dall’inglese all’italiano, il periodo che risulta appare fin troppo “elementare”, spezzettato.
Per evitare questo effetto può essere utile unire due periodi brevi in uno più lungo, quando possibile evidenziandone il nesso logico con una proposizione subordinata. Questo darà al discorso un senso di continuità e renderà più facile seguirne il filo logico."
👍

Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout. | Ottimo! OK |

Grazie Sara @kitsunenosaraT :)

---

Questa settimana farò QA review su "posizionamento" che è la parte dell'articolo più complessa.
Quella successiva QA review sul resto e cerco di chiudere l'articolo entro Venerdì 7 Agosto.
A fine Agosto / primi di Settembre conto di partire con l'articolo successivo del modulo CSS Layout.

---

[danielebarell]

--QA review su Tecniche di posizionamento, prima parte--

Il posizionamento non è propriamente un metodo per creare il layout di una pagina bensì un modo di gestire e ritoccare…

il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare… | OK |

Tuttavia esistono tecniche utili per alcuni tipi di modelli di layout che si basano sulla proprietà…

Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà… | OK |

Occorre conoscere cinque tipi di posizionamento

I tipi di posizionamento che ci serve conoscere sono cinque | Meglio! OK |

inserisci l'elemento nella posizione stabilita dal documento per il flusso del layout, nulla di strano in questo caso.

inserisci l'elemento nella posizione stabilita dal flusso di layout del documento, nessuna istruzione speciale | Ottimo! OK |

l'elemento viene completamente levato dal flusso normale della pagina come se venisse inserito a un livello separato.

l'elemento viene completamente isolato dal flusso normale della pagina, come se si trovasse su un livello separato. | OK |

(o del suo elemento discendente più prossimo)

(o del suo elemento predecessore più prossimo) | Contesto |

L'originale è (or its nearest positioned ancestor element)
il mio "discendente" è del tutto sbagliato, "predecessore" è giusto ma non mi suona molto bene.
Propongo
(o del suo elemento contenitore più prossimo).
poichè l'"ancestor" deve necessariamente contenere l'elemento target.
anche se quando applichi il position: absolute l'elemento target esce dal flusso normale e l'"ancestor" non lo contiene più. Quindi anche questo traducente sarebbe perfettibile. @kitsunenosaraT Che dici Sara?

come i box a scheda organizzati in modo che un certo numero di schede vengono disposte una sopra l'altra

come i box a scheda, organizzati come un certo numero di schede disposte una sopra l'altra | Meglio! OK |

Oppure box di notifica

Un altro esempio sono i box di notifica | OK |

però àncora

con la differenza che àncora | OK|

Posizionamento aderente: è un nuovo tipo […] come se avesse position: fixed

Posizionamento adesivo: è un nuovo tipo […] muta il suo comportamento in position: fixed | Molto meglio!, OK |

A presto!
dan

[kitsunenosaraT]

@danielebarell

(o del suo elemento discendente più prossimo)

(o del suo elemento predecessore più prossimo) | Contesto |

L'originale è (or its nearest positioned ancestor element)
Propongo
(o del suo elemento contenitore più prossimo).

Mi pare accettabile! 👍

Un'altra cosa che vale la pena segnalare: come scoperto nello issue #244 sembra che i tag a fine pagina debbano essere lasciati in inglese, perché servono per l'indicizzazione interna del sito. Bisognerà modificare quelli e quelli di tutte le pagine precedentemente tradotte.

[danielebarell]

--QA review su Tecniche di posizionamento, seconda parte--

---

Semplice esempio di posizionamento ||| Non si vede il risultato del codice;

Posizionamento relativo ||| Lo snippet di codice è da localizzare;

Posizionamento assoluto ||| Lo snippet di codice è da localizzare;

Posizionamento adesivo ||| Lo snippet di codice è da localizzare;

Da linkare correttamente positioning sulla Nota conclusiva;

--> Da chiedere a David Mills, Che spazi condivisi abbiamo per gli snippet Codepen e JSFiddle?

---

vediamo un paio di semplici esempi che si basano sullo stesso HTML, cioè questo:

vediamo un paio di semplici esempi basati sullo stesso codice HTML: | OK |

Il posizionamento relativo permette uno spostamento del componente dalla posizione preimpostata che occuperebbe nel flusso normale.

Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. | OK |

che servono per spostare l'elemento associato in basso e a destra il che potrebbe sembrare controintuitivo. In effetti è come se elemento subisse una spinta da sinistra e dall'alto che ne provoca lo spostamento a destra e in basso.

che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso. | Molto meglio! OK |

viene ottenuto il risultato seguente:

si ottiene il seguente risultato: | OK |

è possibile aggiungere le seguenti regole CSS per implementare il posizionamento assoluto:

implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per: | OK |

In questo caso al secondo paragrafo {{cssxref("position")}} viene assegnato il valore absolute e i medesimi valori a {{cssxref("top")}} e {{cssxref("left")} assegnati in precedenza.

In questo caso, al secondo paragrafo assegniamo a {{cssxref("position")}} il valore absolute e le stesse proprietà {{cssxref("top")}} e {{cssxref("left")}} | Contesto |

Assegnamo lo stesso valore di prima alle proprietà top e left
Quindi propongo:
In questo caso, assegnamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}

Molto differente!

La differenza si nota! | OK |

è stato separato completamente dal resto del layout della pagina e allocato al di sopra.

è stato separato completamente dal resto del layout della pagina e allocato al di sopra di essa. | Contesto |
Secondo me l'elemento viene posto al di sopra del resto del layout ma rimane all'interno della pagina.
Quindi propongo:
è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso.

Gli altri due paragrafi appaiono giustapposti come se non esistesse affatto il paragrafo al loro stesso livello gerarchico ma con il posizionamento.

Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. | Risolto molto meglio, brava! OK |

lo spostamento

l'offset | OK | MA
@kitsunenosaraT Sara, non ho capito per quale motivo non traduciamo in questo particolare caso, forse perchè nelle frasi successive io stesso non l'ho tradotto?

l'elemento padre che contiene l'elemento può essere cambiato gli daremo un'occhiata nella lezione dedicata al posizionamento

L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al posizionamento

Tuttavia gli offset invece che essere relativi al contenitore padre vengono applicati in relazione all'area di visualizzazione.

Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. | OK |

un menu che rimane fisso mentre il resto della pagina a livello sottostante viene scrollata.

un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante. | OK |

In questo esempio l'HTML è composto da tre paragrafi testuali che provocano lo scrollamento della pagina e da un box a cui viene assegnato position: fixed.

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnato l'attributo position: fixed | Contesto |

Molto meglio della mia precedente però propongo di cambiare attibuto con regola che è più specifico nel CSS.
Quindi:

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed

aderente

adesivo | OK |

Mette insieme il tipo statico preordinato con il tipo fisso. Quando il componente ha position: sticky scorre come fosse nel flusso normale sin quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce" come se vi fosse applicato position: fixed.

Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con attributo position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato attributo in position: fixed. | Contesto |

Molto meglio anche qui MA come detto prima propongo di sostituire il traducente "attributo" con "regola"
Quindi:
Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

---

Ci siamo quasi :)
A presto,
dan

[danielebarell]

--QA review su Layout a tabella--

---

||| Non si vede il risultato del codice d'esempio.
||| Va rimosso il riferimento al codepen personale

gli sviluppatori web utilizzavano le tabelle anche per costruire tutto il layout della pagina inserendo le intestazioni, il piè pagina, le diverse colonne ecc. in numerose righe e colonne di tabella.

gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. | Dubbio |

La frase originale dice

web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns.

Un termine riconducibile a "contenuti" non esiste, anche se a me personalmente piace che ci sia.
@kitsunenosaraT
Sara, tu come risolveresti?

A quel tempo funzionava in questo modo però l'approccio presentava molti problemi:

Questo approccio funzionava, ma presentava molti problemi: | Ottimo! OK |

erano difficili da correggere e sbagliati a livello semantico (ad esempio creavano problemi alla navigazione di chi utilizzava lo screen reader) 

creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader). | OK |

Il modo in cui appare una tabella nella pagina web si deve … che non sono tabelle.

Il modo in cui una tabella appare nella pagina web si deve … elementi diversi dalle tabelle. | OK |

Di sotto

Di seguito | OK |

Però utilizzare le tabelle CSS dovrebbe ormai essere considerarlo un metoddo legacy per affrontare situazioni in cui abbbiamo a che fare con browser molto vecchi privi del supporto di Flexbox e Griglia.

Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia. | Molto meglio! OK |

e viene inserita anche una didascalia all'interno del paragrafo.

in più è presente un paragrafo contenente una didascalia. | Ottimo! OK |

Tutti gli input

Tutti i campi di input | OK |

Le regole del CSS sono piuttosto note eccettuato il valore della proprietà {{cssxref("display")}}

Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. | OK |

… ed operano fondamentalmente come se componessero un markup di tabella in modo che i campi input e le discalalie vengano allineate in maniera corretta.

Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. | OK |

Tutto quello che rimane da fare è regolare la dimensione…

Rimane solo da regolare la dimensione… | OK |

Si noti che la didascalia è stata impostata display: table-caption

Si noti che il paragrafo contenete la didascalia è stato impostato con l'attributo display: table-caption | Contesto |

Con il CSS meglio usare "regola" invece di attributo.
Quindi propongo:
Si noti che il paragrafo contenete la didascalia è stato impostato con l'attributo display: table-caption

che determina un comportamento simile a … per questioni di stile.

che determina un comportamento simile a … In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <input>. | Perfetto! OK |

Il che genera il segiente risultato

Otteniamo il seguente risultato: | OK |

--

Sara, questa parte in particolare è stata molto migliorata da te! 👍 👍

A presto,
dan

[kitsunenosaraT]

Semplice esempio di posizionamento ||| Non si vede il risultato del codice;

A volte basta un piccolissimo errore di sintassi perché il codice non venga visualizzato come deve. Bisognerebbe confrontarlo con il codice originale e capire dove sta l'inghippo.

---

In questo caso al secondo paragrafo {{cssxref("position")}} viene assegnato il valore absolute e i medesimi valori a {{cssxref("top")}} e {{cssxref("left")} assegnati in precedenza.

In questo caso, al secondo paragrafo assegniamo a {{cssxref("position")}} il valore absolute e le stesse proprietà {{cssxref("top")}} e {{cssxref("left")}} | Contesto |

Quindi propongo:
In questo caso, assegnamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}

Hai ragione.

---

è stato separato completamente dal resto del layout della pagina e allocato al di sopra.

è stato separato completamente dal resto del layout della pagina e allocato al di sopra di essa. | Contesto |

Quindi propongo:
è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso.

Anche qui hai ragione.

---

@kitsunenosaraT Sara, non ho capito per quale motivo non traduciamo in questo particolare caso, forse perchè nelle frasi successive io stesso non l'ho tradotto?

Esatto, ho preferito mantenere la coerenza terminologica. "Offset" è un po' più specifico di un semplice spostamento, è lo scarto prefissato da una data posizione. Penso sia più chiaro così per il lettore. In ogni caso è sempre buona norma usare la terminologia con coerenza.

---

In questo esempio l'HTML è composto da tre paragrafi testuali che provocano lo scrollamento della pagina e da un box a cui viene assegnato position: fixed.

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnato l'attributo position: fixed | Contesto |

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed

Ok, perfetto!

---

Mette insieme il tipo statico preordinato con il tipo fisso. Quando il componente ha position: sticky scorre come fosse nel flusso normale sin quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce" come se vi fosse applicato position: fixed.

Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con attributo position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato attributo in position: fixed. | Contesto |

Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

idem come sopra.

---

gli sviluppatori web utilizzavano le tabelle anche per costruire tutto il layout della pagina inserendo le intestazioni, il piè pagina, le diverse colonne ecc. in numerose righe e colonne di tabella.

gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. | Dubbio |

La frase originale dice

web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns.

Un termine riconducibile a "contenuti" non esiste, anche se a me personalmente piace che ci sia.
@kitsunenosaraT
Sara, tu come risolveresti?

Ho fatto un piccolo escamotage perché l'originale mi sembrava avere qualche problema:

web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns.

Metti una colonna dentro un'altra colonna? Mi sembra che il significato sia che suddividi le parti del layout (header, footer e "corpo" del testo (= contenuti), che potrebbe essere suddiviso o meno in colonne) in righe e colonne.
Ti viene in mente un altro modo per rigirarla includendo il riferimento esplicito alle colonne (che vanno messe in altre colonne?)

---

Si noti che la didascalia è stata impostata display: table-caption

Si noti che il paragrafo contenete la didascalia è stato impostato con l'attributo display: table-caption | Contesto |

Quindi propongo:
Si noti che il paragrafo contenete la didascalia è stato impostato con l'attributo display: table-caption

Ottima osservazione, ma forse intendevi:

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption

[danielebarell]

Metti una colonna dentro un'altra colonna? Mi sembra che il significato sia che suddividi le parti del layout (header, footer e "corpo" del testo (= contenuti), che potrebbe essere suddiviso o meno in colonne) in righe e colonne.
Ti viene in mente un altro modo per rigirarla includendo il riferimento esplicito alle colonne (che vanno messe in altre colonne?)

Anche a me l'originale pare convoluto. Direi proprio di confermare la versione che hai suggerito tu:
gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella.

Ottima osservazione, ma forse intendevi…

Appunto! :DD

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption

[danielebarell]

--QA review su Layout multicolonna--

Nel contesto del Web la necessità di suddividere un articolo in colonne non è così necessario ma quando vogliamo evitare a chi legge  di scrollare, la possibilità di suddividere un contenuto in colonne si rivela una tecnica utile.

Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile. | OK |
~ Avevo praticamente capovolto il significato originale
menomale che l'hai rimesso in piedi

Per trasformare il blocco in un contenitore multicolonna … il numero delle quali viene automaticamente calcolato in base alla larghezza totale del contenitore.

Il blocco si può trasformare in un contenitore multicolonnaIl blocco si può trasformare in un contenitore multicolonna … (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).

Nell'esempio sotto un elemento <div> a cui viene assegnata la classe container

Nel seguente esempio, un elemento <div> con classe container | fila! OK |

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore indicando al browser di disporre tante colonne quante sono necessarie per riempirene la larghezza.

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. | OK |
~ Sara, qui ripeti la specifica che le colonne sono di 200px, nell'originale non esiste ma per me ok.

Lo spazio rimanente viene suddiviso in modo da avere una spaziatura tra una colonna e l'altra.  

Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.

|- - - - - - QA approvata in toto ! - - - - - -|

[danielebarell]

--QA review su Sommario--

L'articolo ha fornito un breve riassunto di tutte le tecniche di layout che occorre conoscere.

Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. | OK |

Continuiamo

Continua | OK |

|- - - - - - QA approvata in toto ! - - - - - -|

|- - - - - - - - - - - - - QA dell'intero articolo terminata ! - - - - - - - - - - - - - |

@kitsunenosaraT
Sara,
Sono molto contento del lavoro che abbiamo svolto su questo articolo :))

Attendo una settimana, la prossima, prima di ritirare la richiesta di revisione stilistica; ovvero il tempo che dovrebbe occorrermi per raccogliere tutte le migliorie accordate e dare forma definitiva all'articolo.

@Mte90 , @Sav22999
Sempre nella prossima settimana cercherò di risolvere i problemi sul codice cercando confronto con David Mills (un tecnico molto coinvolto in Mozilla) o Saverio o Daniele se possono.

Grazie ancora,
Buon Week End!

dan

[kitsunenosaraT]

@danielebarell

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. | OK |
~ Sara, qui ripeti la specifica che le colonne sono di 200px, nell'originale non esiste ma per me ok.

Onestamente, l'ho fatto apposta per rendere il concetto esplicito: proprietà column-width con valore 200 pixel = crea colonne da 200 px. Visto che va bene anche a te, direi di lasciarlo così.

Sono molto contento del lavoro che abbiamo svolto su questo articolo :))

Anch'io! Direi che unendo le forze abbiamo prodotto un materiale degno di essere preso come riferimento dagli sviluppatori 🎉

[danielebarell]

|-- Check out stilistico --|

Cambia tutte le occorrenze di layout a tabella in layout con tabelle |Checked|

è possibile affiancare elementi blocco ad altri elementi

è possibile affiancare altri elementi agli elementi blocco |Checked|

Le caratteristiche utilizzate per lo stile di una tabella HTML possono essere utilizzate su elementi su elementi non tabellari

Le caratteristiche utilizzate per lo stile di una tabella HTML possono essere riproposte su elementi non tabellari |Checked|

Abbiamo, in sostanza, la possibilità di cambiare unicamente il loro aspetto.

Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento. |Checked|

perché il valore iniziale della proprietà align-items viene impostata a stretch dal padre

perché il valore iniziale della proprietà align-items viene impostato a stretch dal padre |Checked|

definiamo anche alcune indicazioni per righe e colonne nell'elemento padre

definiamo anche una regola per righe e colonne nell'elemento padre |Checked|

Una volta compresa la funzione di ogni operazione nel layout, risulterà chiaro quale sia il componente più adatto a ciascun tipo di layout.

Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout. |Checked|

(o del suo elemento discendente più prossimo)

(o del suo elemento contenitore più prossimo). |Checked|

In questo caso, al secondo paragrafo assegniamo a {{cssxref("position")}} il valore absolute e le stesse proprietà {{cssxref("top")}} e {{cssxref("left")}}

In questo caso, assegnamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}} |Checked|

è stato separato completamente dal resto del layout della pagina e allocato al di sopra di essa.

è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. |Checked|

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnato l'attributo position: fixed

** Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed** |Checked|

Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con attributo position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato attributo in position: fixed.

Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed. |Checked|

Si noti che il paragrafo contenete la didascalia è stato impostato con l'attributo display: table-caption

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption |Checked|

[danielebarell]

|-- Check out codice --|

Tutti gli snippet che si appoggiano a codepen e Jsfiddle sono stati localizzati e sono visibili |Checked|

Risolvere il problema degli snippet non visibili |TODO|
I codici il cui risultato non è visualizzabile sono:
• Flusso normale
• Posizionamento (statico)
• Layout con tabelle

Metti il link corretti agli articoli localizzati quando il modulo è concluso. |TODO|

[danielebarell]

|--Note per l10n a venire--|

• Tradurre innanzitutto il titolo nel campo Traduzione per corretta creazione dello slug.
• Usa la punteggiatura.
• Struttura il periodo con principali e subordinate anziché appiattirlo con coordinate. Tendenza:L’inglese è paratattico, l’italiano è ipotattico.
• Coerenza terminologica prima, gradevolezza e stile eventualmente dopo.
• Traduci default come predefinito || predefinita e non altro (es. preimpostato || preimpostata ).
• Traduci parent come padre || madre e non altro.
• Traduci child (items, elements ecc.) come [componenti] figlio e non figli. Sta per componenti [di tipo] figlio.
• Taduci "... esempio di seguito" e non altro. (es. di sotto)

Chiudo l'issue #231.

Riprendo a Settembre con l'articolo successivo.

Daniele @Mte90
Sara @kitsunenosaraT
Saverio @Sav22999

Grazie a ancora.

Vi saluto.
dan